1、初始化一个项目 vue create ***
2、将项目中原来的src目录改为examples
新建packages空文件夹
3、因为没了src目录，需要修改vue.config.js（没有这个文件就新建一个）才能正常运行
直接上代码
1 const path = require('path'); 2 module.exports = { 3 /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */ 4 // baseUrl: process.env.NODE_ENV === 'production' ? './' : '/', 5 // publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './', 6 publicPath: './', 7 //更改入口和出口文件名 8 pages: { 9 index: { 10 entry: "examples/main.js", 11 template: "public/index.html", 12 filename: "index.html" 13 }, 14 }, 15 // 扩展 webpack 配置，使 packages 加入编译 16 chainWebpack: config => { 17 config.module 18 .rule('js') 19 .include 20 .add('/packages/') 21 .end() 22 .use('babel') 23 .loader('babel-loader') 24 .tap(options => { 25 // 修改它的选项... 26 return options 27 }) 28 }, 29 /* 输出文件目录：在npm run build时，生成文件的目录名称 */ 30 outputDir: 'ecmoho-chart', 31 /* 放置生成的静态资源 (mixin、css、img、fonts) 的 (相对于 outputDir 的) 目录 */ 32 assetsDir: "assets", 33 /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */ 34 productionSourceMap: false, 35 /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */ 36 filenameHashing: false, 37 /* 代码保存时进行eslint检测 */ 38 lintOnSave: false, 39 /* webpack-dev-server 相关配置 */ 40 devServer: { 41 /* 自动打开浏览器 */ 42 open: false, 43 /* 设置为0.0.0.0则所有的地址均能访问 */ 44 host: '0.0.0.0', 45 port: 8080, 46 https: false, 47 hotOnly: false, 48 } 49 };
4、开始在packages中写自己要封装的插件
1）packages下新建文件夹chart --chart里面写自己想要的插件
2）packages下新建index.js文件
1 import chart from "./chart/index"; 2 3 // 存储组件列表 4 const components = [chart]; 5 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册 6 const install = function(Vue) { 7 // 判断是否安装 8 if (install.installed) return; 9 // 遍历注册全局组件 10 components.forEach(component => { 11 Vue.component(component.name, component) 12 }); 13 }; 14 // 判断是否是直接引入文件 15 if (typeof window !== "undefined" && window.Vue) { 16 install(window.Vue); 17 } 18 export default { 19 // 导出的对象必须具有 install，才能被 Vue.use() 方法安装 20 install, 21 // 以下是具体的组件列表 22 chart 23 };
3）chart文件夹下新建index.js文件
1 import chart from "./src/chart"; 2 3 // 为组件提供 install 安装方法，供按需引入 4 chart.install = function (Vue) { 5 Vue.component(chart.name, chart) 6 }; 7 // 默认导出组件 8 export default chart
4）packages下面可以建自己需要的文件夹，例如css、js等
完整packages文件夹文件目录如下
5、开始验证了
1）examples下main.js中引用
2）app.vue组件中调用
3）npm run serve 可以试运行一下，基本上不会出现什么差错
6、发布到npm上
1）修改package.json文件，添加一条npm run lib指令在scripts中，修改发布到npm上的各种字段
直接上代码
1 { 2 "name": "ecmoho-chart", 3 "version": "0.1.1", 4 "private": false, 5 "description": "ecmoho-chart 图形封装插件", 6 "main": "lib/ecmoho-chart.umd.min.js", 7 "keyword": "vue echarts ecmoho-chart", 8 "scripts": { 9 "serve": "vue-cli-service serve", 10 "build": "vue-cli-service build", 11 "lib": "vue-cli-service build --target lib --name ecmoho-chart --dest lib packages/index.js" 12 }, 13 "dependencies": { 14 "echarts": "^4.5.0", 15 "vue": "^2.6.10" 16 }, 17 "devDependencies": { 18 "@vue/cli-service": "^4.1.0", 19 "vue-template-compiler": "^2.6.10" 20 }, 21 "browserslist": [ 22 "> 1%", 23 "last 2 versions" 24 ] 25 }
2）添加.npmignore 文件，设置忽略发布文件
代码代码
1 # 忽略目录 2 examples/ 3 packages/ 4 public/ 5 6 # 忽略指定文件 7 vue.config.js 8 babel.config.js 9 *.map
3）登录npm账号
如果配置了淘宝镜像，先设置回npm镜像：$ npm config set registry http://registry.npmjs.org
npm login 根据提示输入账号、密码、邮箱就可以了，邮箱可以自己先登录一下
npm run lib 打包
npm publish 发布
4）如果报403错误说明邮箱没有验证，到npm官网上验证一下邮箱就行了