vue cli4构建基于typescript的vue组件并发布到npm

房产小陶 發表於 2020-8-3 08:37:00

vue cli4构建基于typescript的vue组件并发布到npm

<h2>基于vue cli创建一个vue项目</h2>
　　首先安装最新的vue cli脚手架，
　　npm install --global @vue/cli
<div class="cnblogs_code">
<pre>npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @vue/cli@4.4.6
added 1230 packages from 670 contributors in 118.122s</pre>
</div>
　　查看安装的vue -V
<div class="cnblogs_code">
<pre>@vue/cli 4.4.6</pre>
</div>
 　　创建项目：vue create my-project-name（“my-project-name”，这个可以根据需要命名，尽量用英文）
<div class="cnblogs_code">
<pre>Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: ts_tmpl</pre>
</div>
　　创建完成之后，会出现如下提示
<div class="cnblogs_code">
<pre>⚓Running completion hooks...

�Generating README.md...

�Successfully created project my-project-name.
�Get started with the following commands:

$ cd my-project-name
$ npm run serve</pre>
</div>
　　根据提示执行命令
<div class="cnblogs_code">
<pre>E:\vue_codes>cd my-project-name

E:\vue_codes\my-project-name>npm run serve

> my-project-name@0.1.0 serve E:\vue_codes\my-project-name
> vue-cli-service serve

INFOStarting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

DONECompiled successfully in 5304ms 上午11:13:54

No type errors found
Version: typescript 3.9.7
Time: 3160ms

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.95:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.</pre>
</div>
　　在浏览器输入地址：http://localhost:8080/
<img src="https://img2020.cnblogs.com/blog/413851/202007/413851-20200729130056715-85707561.png" alt="">
　　出现如上图所示界面，表示项目创建成功了。
 　　生成的代码目录结构如下：
<img src="https://img2020.cnblogs.com/blog/413851/202007/413851-20200729130127083-1569212893.png" alt="">
 　　两个声明文件：shims-vue.d.ts和shims.tsx.d.ts
　　shims-vue.d.ts：由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个shims-vue.d.ts 文件，放在项目项目对应使用目录下，例如 src/shims-vue.d.ts，用来支持*.vue 后缀的文件
　　shims-tsx.d.ts：允许.tsx 结尾的文件，在 Vue 项目中编写 jsx 代码
<code>　　tsconfig.json：</code>typescript配置文件,主要用于指定待编译的文件和定义编译选项
　　normalize.css：Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。Normalize.css是一种CSS reset的替代方案。
　　.browserslistrc：这个配置能够分享目标浏览器和nodejs版本在不同的前端工具。这些工具能根据目标浏览器自动来进行配置，Browserslist这个东西单独是没用的，（补充: 在vue官方脚手架中，browserslist字段会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。）
 　　browserslist的配置文件： 　　> 1% 兼容全球使用率大于1%的游览器 　　last 2 versions 兼容每个游览器的最近两个版本 　　not ie <= 8 不兼容ie8及以下 　　具体可见 browserslist。
<div>
<div>　　babel.config.js：Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。</div>

　　postcss.config.js：用于配置将px转化成rem，和自动添加CSS浏览器前缀等。</div>
<div>　　esnext 是一个 JavaScript 库，可以将 ES6 草案规范语法转成今天的 JavaScript 语法。</div>
<h2>改造项目结构</h2>
　　这种组件项目和我们日常的项目还是有很大区别的，由于前面我采用的是vue cli创建的完整模板项目，这里许多东西用不到，我们就将其删掉，最终项目目录结构如下：
<img src="https://img2020.cnblogs.com/blog/413851/202007/413851-20200731133920837-829924049.png" alt="">
 　　examples：是组件使用示例
　　src/components：是组件源码
　　package.json代码如下：
<div class="cnblogs_code">
<pre>{
"name": "jie-echarts",
"version": "0.1.0",
"private": false,
"description": "echarts组件",
"main": "dist/JieEcharts.common.js",
"author": "zouqj<zouyujie@126.com>",
"license": "MIT",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name JieEcharts ./src/index.ts"
}, </pre>
<div style="color: rgba(212, 212, 212, 1); font-family: Consolas, "Courier New", monospace; font-weight: normal; font-size: 14px; line-height: 19px; white-space: pre">
<div style="color: rgba(212, 212, 212, 1); font-family: Consolas, "Courier New", monospace; font-weight: normal; font-size: 14px; line-height: 19px; white-space: pre">  "repository": {     "type": "git",     "url": "git+https://github.com/zouyujie/vue-components/tree/master/jie-echarts"   },   "bugs": {     "url": "https://github.com/zouyujie/vue-components/issues"   },   "homepage": "https://github.com/zouyujie/vue-components/tree/master/jie-echarts",   "keywords": [     "vue",     "vuejs",     "typescript",     "vuecli4.x"   ],
</div>
</div>
<pre>"dependencies": {
"core-js": "^3.6.5",
"echarts": "^4.8.0",
"ts-loader": "^8.0.1",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@types/echarts": "^4.6.4",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-plugin-router": "~4.4.0",
"@vue/cli-plugin-typescript": "~4.4.0",
"@vue/cli-plugin-vuex": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.12.0",
"prettier": "^1.19.1",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3",
"vue-template-compiler": "^2.6.11"
}
}</pre>
</div>
　　重点注意标红部分的配置。
　　tsconfig.json
<div class="cnblogs_code">
<pre>{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"typeRoots": ["/@types", "./node_modules/@types"],
"types": ["webpack-env"],
"paths": {
 "@/*": ["src/*"]
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": ["node_modules"]
}</pre>
</div>
　　vue.config.js代码如下：
<div class="cnblogs_code">
<pre>'use strict';
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const resolve = (dir) => path.resolve(__dirname, dir);
module.exports = {
// 修改 src 目录为 examples 目录
pages: {
index: {
 entry: 'examples/main.ts',
 template: 'public/index.html',
 filename: 'index.html',
},
},
// vue 通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的图片路径，再用 url-loader 将小于 4kb 的
// 图片内联，以减少 HTTP 请求的数量。所以我们可以通过 chainWebpack 调整图片的大小限制。例如，我们将
// 图片大小限制设置为 13kb，低于13kb的图片全部被内联，高于13kb的图片会放在单独的img文件夹中。
chainWebpack: (config) => {
const imagesRule = config.module.rule('images');
imagesRule
 .use('url-loader')
 .loader('url-loader')
 .tap((options) => Object.assign(options, { limit: 13312 }));
},
// 设置css: { extract: false },可以强制内联，就不会将css单独打包成一个文件，导致页面没有style
css: { extract: false },
productionSourceMap: false,
};</pre>
</div>
　说明：UglifyJS Webpack Plugin插件用来缩小（压缩优化）js文件，修改应用入口文件，examples/main.ts，方便执行npm run serve的时候，可以直接查看组件的示例。
　.npmignore可以将一些不需要发布到npm的文件忽略掉，.npmignore配置如下：
<div class="cnblogs_code">
<pre>.*
package-lock.json
/.git/
/.vscode/
tslint.json
tsconfig.json
*.log

.DS_Store
/dist
/examples
/node_modules
/public
/src
/tests
.browserslistrc
jest.config.js
vue.config.js

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
.gitignore
.npmignore
.npmrc
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?</pre>
</div>
　　components下面
　　index.ts代码，以插件的形式进行封装，方便全局引用：
<div class="cnblogs_code">
<pre>import jieEcharts from './jie-echarts.vue';

(jieEcharts as any).install = (Vue: any) => {
Vue.component(jieEcharts.name, jieEcharts);
};

export default jieEcharts;</pre>
</div>
　　jie-echarts.vue，是组件源码，代码：
<div class="cnblogs_code">
<pre><template>

<div :ref="id" :id="id" :class="myclass" :style="style" />
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import Echarts from "echarts";
@Component({
name: "jie-echarts"
})
export default class extends Vue {
@Prop({ default: "myCharts" }) private id!: string;
@Prop({ default: "100%" }) private width!: string;
@Prop({ default: "200px" }) private height!: string;
@Prop({ default: "echarts-line" }) private myclass!: string;
@Prop() private options!: object;
@Prop({ default: false }) private loading!: boolean;

private MyEcharts: any = null; // echarts实例

created() {
console.log("this.options :>> ", this.options);
}
mounted() {
this.InitCharts();
}

get style() {
return {
 height: this.height,
 width: this.width
};
}
@Watch("options", { deep: true })
onChangeOption(newVal: string, oldVal: string) {
if (this.MyEcharts) {
 if (newVal) {
 // console.log(JSON.stringify(newVal))
 this.MyEcharts.setOption(newVal, true);
 } else {
 this.MyEcharts.setOption(oldVal, true);
 }
 setTimeout(() => {
 this.MyEcharts.resize();
 });
} else {
 this.InitCharts();
}
}
@Watch("height")
onChangeHeight(val: string) {
if (val) {
 this.height = val;
}
if (this.MyEcharts) {
 this.MyEcharts.setOption(this.options, true);
} else {
 this.InitCharts();
}
}
@Watch("loading")
onChangeLoading(val: boolean) {
if (val == true) {
 this.showLoading();
}
if (val == false) {
 this.hideLoading();
}
}
//-----------------------method----------------------
// 组件初始化
private InitCharts() {
const dom: any = this.$refs[this.id] as HTMLDivElement; // document.getElementById(this.id);
this.MyEcharts = Echarts.init(dom);
if (this.loading == true) {
 this.showLoading();
}
/**
* 此方法适用于所有项目的图表，但是每个配置都需要在父组件传进来，相当于每个图表的配置都需要写一遍，不是特别的省代码，主要是灵活度高
* echarts的配置项，你可以直接在外边配置好，直接扔进来一个this.option
*/
this.MyEcharts.clear(); // 适用于大数据量的切换时图表绘制错误,先清空在重绘
this.MyEcharts.setOption(this.options, true); // 设置为true可以是图表切换数据时重新渲染
setTimeout(() => {
 this.MyEcharts.resize();
});
// 当窗口变化时随浏览器大小而改变
 window.addEventListener("resize", () => {
 this.MyEcharts.resize();
});
this.MyEcharts.on("click", (params: any) => {
 this.mapClick(params);
});
}
//组件单击事件
private mapClick(params: any) {
// console.log(params, 999999);
 const data = {
 color: params.color,
 data: params.data,
 dataIndex: params.dataIndex,
 seriesIndex: params.seriesIndex,
 chartType: params.componentSubType
};
this.$parent.$emit("chartParams", JSON.stringify(data));
if (params.seriesType == "map") {
 this.$emit("mapValue", params.name);
} 
 this.$emit("eclick", params);
}
private showLoading() {
if (this.MyEcharts) {
 this.MyEcharts.showLoading({
 text: "loading"
 // color: '#4cbbff',
 // textColor: '#4cbbff',
 });
}
}
private hideLoading() {
if (this.MyEcharts) {
 this.MyEcharts.hideLoading();
}
}   beforeDestroy() {     window.removeEventListener("resize", () => {       this.MyEcharts.resize();     });   }
}
</script>
<style lang="scss" scoped>
.echarts-line {
height: 100%;
}
</style></pre>
</div>
　　@types目录下：
　　component.d.ts代码：
<div class="cnblogs_code">
<pre>import Vue from 'vue';

export class VanComponent {
static name: string;
static install(vue: typeof Vue): void;
}</pre>
</div>
　　说明：@types是npm的一个分支，当我们把npm包发上去，npm包就会托管到服务器，供大家下载，但是ts为了代码的可复用性，要申明一些静态类型文件，那些文件就是*.d.ts
　　shims-vue.d.ts代码：
<div class="cnblogs_code">
<pre>declare module "*.vue" {
import Vue from "vue";
export default Vue;
}</pre>
</div>
　　App.vue，组件引入演示界面，代码：
<div class="cnblogs_code">
<pre><template>
<div id="app">
<jie-echarts :options="echartsOptions"></jie-echarts>
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import jieEcharts from "../src/index";
@Component({
components: {
jieEcharts
}
})
export default class TestJieEchartsPreview extends Vue {
protected echartsOptions = {
xAxis: {
 type: "category",
 data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
 type: "value"
},
series: [
 {
 data: ,
 type: "line"
 }
]
};
}
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}

#nav {
padding: 30px;

a {
font-weight: bold;
color: #2c3e50;

&.router-link-exact-active {
 color: #42b983;
}
}
}
</style></pre>
</div>
　　执行npm run serve，运行结果如下：
<img src="https://img2020.cnblogs.com/blog/413851/202007/413851-20200731134613168-700978222.png" alt="">
<h2>发布到NPM</h2>
<div>　　1.去https://www.npmjs.com/注册一个账号</div>
<div>　　2.登录邮箱，点击激活连接</div>
<div><img src="https://img2020.cnblogs.com/blog/413851/202007/413851-20200731132303812-1520119638.png" alt="">
　　3.执行npm login，进行登录
<div class="cnblogs_code">
<pre>PS E:\vue_codes\my-project-name> npm login
Username: zouyujie
Password:
Email: (this IS public) zouyujie@126.com</pre>
</div>
　　如果你是使用的淘宝镜像，注意啊要先切换到npm官网镜像，切换方式：npm config set registry https://registry.npmjs.org/
　　4.执行命令 npm publish，进行发布，如果出现如下图所示错误：
<img src="https://img2020.cnblogs.com/blog/413851/202007/413851-20200731132444824-1015226247.png" alt="">
 　　说明邮箱没有绑定成功，点击https://www.npmjs.com/email-edit，进行绑定，然后重新执行npm publish，运行结果如下：
</div>
<div>
<div class="cnblogs_code">
<pre>PS E:\vue_codes\my-project-name> npm publish
npm notice
npm notice package: jie-echarts@0.1.0
npm notice === Tarball Contents ===
npm notice 632B dist/index.html
npm notice 4.3kB dist/favicon.ico
npm notice 66B babel.config.js
npm notice 965.0kB dist/js/chunk-vendors.80f39f1d.js
npm notice 6.3kB dist/js/index.f9222971.js
npm notice 1.4kB package.json
npm notice 327B README.md
npm notice === Tarball Details ===
npm notice name: jie-echarts
npm notice version: 0.1.0
npm notice package size:341.3 kB
npm notice unpacked size: 978.0 kB
npm notice shasum: 2b65bfa887ba4677dc95a36a4b0403ebfecc9fde
npm notice integrity: sha512-RwSE3lC8N3wZT[...]b1b9cvJ8UtL/w==
npm notice total files: 7
npm notice
+ jie-echarts@0.1.0</pre>
</div>
　　至此，npm发布成功。
　　然后我们去npm上，查看我们发布的npm包，
<img src="https://img2020.cnblogs.com/blog/413851/202007/413851-20200731132619434-169405683.png" alt="">
　　 如果能看到如下图所示界面：
<img src="https://img2020.cnblogs.com/blog/413851/202007/413851-20200731132657788-1887990657.png" alt="">
 　　说明已发布成功。
　　注意：每次重新发布都要记得修改一下版本号，否则会发布失败。发布成功后，你的npm邮箱都会受到一封npm组件发布成功的邮件通知。
　　npm上地址：https://www.npmjs.com/package/jie-echarts
<h2>安装jie-echarts</h2>
     npm i jie-echarts
</div>

</div>
<div id="MySignature" role="contentinfo">
<div align="left"><div style="color: #111111"><table style="vertical-align: top">
<tbody><tr>
<td id="tdSign">博客地址：</td><td>http://www.cnblogs.com/jiekzou/</td>
<td rowspan="2"></td>
</tr>
<tr>
<td>博客版权：</td><td>本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。 </td>
</tr>
<tr><td>其它：</td><td>
.net-QQ群4：612347965
java-QQ群：805741535
H5-QQ群：773766020 
<div>我的拙作
《Vue3.x+TypeScript实践指南》
《ASP.NET MVC企业级实战》
《H5+移动应用实战开发》
《Vue.js 2.x实践指南》
《JavaScript实用教程》
《Node+MongoDB+React 项目实战开发》
已经出版，希望大家多多支持！</div></td></tr>
</tbody></table></div>
</div>
<img src="https://images.cnblogs.com/cnblogs_com/jiekzou/780174/t_240929014358_%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240929094331.png" style=" border:2px solid #ddd;border-radius:20px;" height="326" width="235"> 
来源：https://www.cnblogs.com/jiekzou/p/13424352.html

頁: [1]

琼殿技术论坛's Archiver

vue cli4构建基于typescript的vue组件并发布到npm