从无到有开发vue组件库以及发布到npm上

因为公司需要开发一个vue的组件库并且能npm传上去，install下来，所以我在网上翻阅了很多文章，总算是完成了，这期间也遇到了很多的坑，整理一下，希望能帮助有需要的人。

我用的是vue-cli3来开发，安装起来比较简单，使用起来也方便vue-cli3官方链接；

环境准备

npm install -g @vue/cli / yarn global add @vue/cli

创建项目

首先全局安装脚手架，然后创建一个新的项目 vue create hello-world , 然后一路回车就可创建成功了；

创建成功之后 npm run serve 启动项目然后打开 http://localhost:8080/

看到 Welcome to Your Vue.js App 就算创建成功了

修改文件

在src的目录下新建一个index.js作为组件导出的入口文件，所有组件都会在src的index.js的进行引用然后导出，最后打包的时候会根据index.js的里面的配置进行编译。

import xxx from './components/xxx/xxx.vue'

const components = [
  // 选择弹窗
  xxx
]

const install = function (Vue) {
  if (install.installed) return;
  components.map(component => Vue.component(component.name, component));
};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  xxx,
}

然后去编辑build到 package.json 的 scripts 中:

build-bundle: "vue-cli-service build --target lib --name libraryName ./src/index.js";

其中 --name libraryName 指定的是要发布的项目的名称， ./src/index.js 是找到导出组件的路径

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-bundle": "vue-cli-service build --target lib --name cc-ui ./src/index.js"
  },

然后执行npm run build-bundle

会看到打包出一个新的文件夹dist，里面有各种版本可以发布的js文件，我们选择common.js作为发布的文件；

npm 发布

npm login 登陆npm, 输入账号密码邮箱

发布的时候记得发布版本号，每次发布都需要更新版本号，不能撤回，一定要注意！更新版本号有三种方法

比如我想来个1.0.1版本，注意，是最后一位修改了增1，那么命令：npm version patch  回车就可以了；

比如我想来个1.1.0版本，注意，是第二位修改了增1，那么命令：  npm version minor  回车就可以了；

比如我想来个2.0.0版本，注意，是第一位修改了增1，那么命令： npm version major 回车就可以了；

切记不要错了！

npm publish 发布（注意包的名字不要和别人的冲突了，最好提前查一下）然后就发布成功了。这样你npm i xxx 就可以安装成功了；

组件引用

import xxx from 'xxx'
import 'xxx/xxx.css'
Vue.use(xxx);
注意样式都在css中，如果没有引用css的话，就会没有样式

总结

以上就是我从无到有的创建了一个组件库，不能说多么到位，但是都是我的一些经验和总结，
希望能帮助到有需要的人，我觉得有想开发组件库的小伙伴根据以上代码应该可以创建成功。

最后注意一点就是在组件的vue文件中，一定要带name, 当初我就是因为没有name一直报错