Vue自定义组件库开发并发布NPM教程

 

一、检查vue/cli的版本

JavonHuang:/ JavonHuang$ cd JavonHuang
JavonHuang:JavonHuang JavonHuang$ vue -V
@vue/cli 4.2.2
JavonHuang:JavonHuang JavonHuang$ 

二、创建vue工程

1.选择上手动 Manually select features

JavonHuang:JavonHuang JavonHuang$ vue create swift-ui


Vue CLI v4.2.2
┌─────────────────────────────────────────┐
│                                         │
│   New version available 4.2.2 → 4.3.1   │
│    Run npm i -g @vue/cli to update!     │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

2.选择插件

? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

3.选择样式处理插件Sass/SCSS (with dart-sass)

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
  Stylus 

4.选择ES规范ESLint + Standard config 

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier 

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? 
  In dedicated config files 
❯ In package.json 

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) n

5.删除些与本次没有用的文件

6.创建文件夹packages用于存放自定义插件库。

二、组件注册

1.Vue组件全局注方式有两种

[1].通过Vue.component().

[2].通过Vue.use(),这种方式注册的前提是组件里面必须包含一个install方法。

此项目使用第二种注册方式

2.在packages/button路径下创建index.js，将组件暴露出来

import Button from './src/button.vue';

Button.install=Vue=>{
  Vue.component(Button.name,Button);
}

export default Button;

3.在packages路径下创建index.js。我们的组件库会有很多的组件，再次文件中注册所有暴露出来的组件。

import Button from './button';
//字体图标
import './fonts/font.scss';
//把所有的组件存储起来

const components=[Button];

const install = Vue => {
  //判断组件是否安装，如果已经安装了就不在安装。
  if(install.installed) return;
  install.installed=true;
  //遍历的方式注册所有的组件
  components.map(component=>Vue.use(component));
}

//检查是否vue是否安装，满足才执行
if(typeof window !=="undefined" && window.Vue){
  install(window.Vue);
};

export default {
  //所有的组件必须有一个install的方法，才能通过Vue.use()进行按需注册
  install,
  ...components
}

三、项目配置文件

1.在packages路径下创建font.scss用于存放字体和图标

2.在项目跟目录创建vue.config.js的配置文件，设置webpack打包配置。

const path=require('path');

module.exports = {
  //关闭语法检查
  lintOnSave:false,
  //修改入口
  pages:{
    index:{
      entry:"src/main.js",//入口
      template:"public/index.html",
      filename:"index.html"
    }
  },
  //webpack的基本配置
  chainWebpack: config=>{
    config.module
    .rule('js')
    .include.add(path.resolve(__dirname,'packages'))
    .end()
    .use("babel")
    .loader("babel-loader")
    //修改配置
    .tap(options =>{
      return options;
    })
  }
}

四、使用组件

1.main.js全局注册

import Vue from 'vue'
import App from './App.vue'
import stButton from './../packages'
Vue.config.productionTip = false

Vue.use(stButton)

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

2.在app.vue内使用

<template>
  <div id="app">
   <st-Button></st-Button>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</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;
  margin-top: 60px;
}
</style>

五、打包发布

1.package.jsom

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

2.执行命令 

npm run lib
npm init -y//生成包配置文件

3.登录页npm 

npm login

4.提交包

npm publish

 

5.测试安装

npm i flexible-ui

码源：https://github.com/JavonHuang/flexible-ui