零基础搭建vue组件库，并发布第一个npm包

参考 element-ui 组件库的源码，搭建自己的vue组件库。（element-ui源码地址：https://github.com/ElemeFE/element）

 

一、创建项目

这里我借助的 @vue/cli 快速创建的项目

vue create vueui   快速创建项目vueui

vue create vueui

二、新建组件文件夹 packages

上一步创建好项目之后，在根目录下创建一个名为 packages 的文件夹，用来存储组件；

packages中新建一个 index.js 文件批量注册组件

三、在packages 文件夹中创建一个组件

目录结构如下：

每一个组件单独创建文件夹，组件中包含一个组件文件 main.vue 和一个 js文件 index.js

四、编写相应文件内容

1. packages/alert/src/main.vue  

<template>
  <div>测试组件</div>
</template>

<script>
export default {
  name: 'alert'
}
</script>

2. packages/alert/index.js

import alert from './src/main.vue'

alert.install = function(vue) {
    vue.component(alert.name, alert)
}

export default alert

3. packages/index.js    （批量注册组件）

import alert from './alert/index'

const cmps = [
  alert
]

const install = vue => {
  cmps.map(cmp => {
    vue.component(cmp.name, cmp)
  })
}
if(window && window.Vue) install(window.Vue)

export default {
  install,
  alert
}

五、测试组件

src/main.js

import Vue from 'vue';
import App from './App.vue'
import alert from '../packages/index'


Vue.use(alert);

Vue.config.productionTip = false;

new Vue({
    render: h => h(App)
}).$mount("#app");

src/App.vue 

<template>
  <div id="app">
    <alert></alert>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

npm run serve 将项目跑起来，看到上边的测试组件，说明成功了

六、打包成npm包

项目基于vue-cli，所以借助vue-cli中vue-cli-service的库模式进行打包

1. 配置 package.json 的scripts

...
 "scripts": {
    "serve": "vue-cli-service serve",
    "build-lib": "vue-cli-service build --target lib --name reda-compoment --dest lib packages/index.js",
  },
...

2. 执行 npm run build-lib

七、发布

1. 修改 package.json

2. 添加.npmignore 文件

因为发布到npm的包，只需要lib目录、package.json 和README.md,其他文件忽略即可

.npmignore 文件

src/
packages/
public/
postcss.config.js
babel.config.js
*.map

3. 登录 npm (没有npm 账号的话，先去npmjs官网注册，点这里去注册)

终端登录

npm config set registry https://registry.npmjs.org/

npm login

输用户名、密码

npm publish

八、查看

登录 npm官网，即可看到自己账户