npm+vue-cli发布vue自定义组件

npm+vue-cli发布vue自定义组件

日常开发中,我们经常会封装一些组件,在多个项目切换组件的修改特别麻烦,我们可以把这些经常用到的组件发布到npm上面进行统一管理,这样可以大大提高我们的工作效率,甚至到后期可以自己封装一套属于自己的组件库;

1. 使用vue-cli快速创建项目

2. components目录中创建自定义组件;下面以vue-cricleprogressbar组件为例CircleProgress.vue

3. 在创建src/index.js,这里提供两种方法

   // 方法一,直接引入组件,无法全局注册
   import CircleProgress from './components/CircleProgress.vue';
   export default CircleProgress;
   
   // 方法二,为组件提供install安装方法,供按需引入
   import CircleProgress from './components/CircleProgress.vue';
   CircleProgress .install = function (Vue) {
     Vue.component(CircleProgress.name, CircleProgress )
   }
   export default CircleProgress 

4. 配置package.json文件

   {
     "name": "vue-circleprogressbar", // 组件名称
     "version": "1.2.2", // 组件版本号
     "private": false,
     "main": "lib/vue-circleprogressbar.umd.min.js", // 组件入口,在scripts.package命令中生成
     "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "package": "vue-cli-service build --target lib --name vue-circleprogressbar --dest lib ./src/components/index.js", //创建lib文件夹,将打包好的组件导入文件夹中
     },
     "keywords": [],
     "author": [],
     "license": "MIT",
     "dependencies": {},
     "devDependencies": {}
   }

   到这里本地开发工作就基本完成了,下一步就是把本地组件推送到npm上面

5. 首先需要在 npm 创建一个账号
6. 在终端执行 npm login 输入你注册的 npm 的账号和密码
7. 执行npm publish,如果没问题的话这里组件就成功上传到npm上面了
8. 后面就可以像引入其他组件一样直接用npm install安装组件进行引入

---

不清楚的可以参考我写的vue-circleprogressbar组件源码: vue-circleProgress组件