使用vue-cli创建发布个人的ui组件库（类似iview,element，ui）

最近在一篇满满女朋友的文章中，回忆起了暑假学长分配的重要任务需要等待我去完成。好好，事不宜迟开始搞。

一、创建一个项目

首先使用vue-cli创建一个webpack 的项目

vue init webpack zypc-components

balabala,创建完成之后，下载依赖

npm install

二、将项目放到github上

将项目放到git上

git init
git remote add origin git地址
git add .
git commit -m "create"
git pull origin master
git push -u origin master -f

ok最基本的操作完成

三、准备组件库中的组件

删除src/components目录下的HelloWorld.vue文件，删除src/router/index.js文件中的

import HelloWorld from "@/components/HelloWorld"

{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
}

在src/components目录下添加文件夹Input，在其中创建ui组件文件input.vue,以下为一个input组件的示例

<template>
    <div>
        <input 
        ref="zypcInput"
        @focus="zypcFocusInput"
        @blur="zypcBlurInput"
        :value="value"
        @input="input"
        :placeholder="placeholder" 
        :style="{
            backgroundColor:backgroundColor,
            width:width,
        }" 
        class="zypc-inputFirst" 
        type="text"> 
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    props:["backgroundColor","placeholder","width","value"],
    mounted() {

    },
    methods: {
        // 获得焦点为input标签添加边框
        zypcFocusInput(){
            this.$refs.zypcInput.style.border = '1px solid rgb(3,169,244)'
        },
        // 失去焦点将input标签的边框设置为默认值
        zypcBlurInput(){
            this.$refs.zypcInput.style.border = '1px solid rgb(150,150,150)'
        },
        // 实现v-modle的功能
        input(){
            this.$emit('input',event.target.value)
        }
    },
}
</script>

<style lang="">
.zypc-inputFirst {
    border: 1px solid rgb(150, 150, 150);
    border-radius: 10px;
    outline: none;
    padding-left: 5px;
    height: 25px;
    width: 200px;
    margin: 6px;
}
</style>

在src/components目录下添加文件index.js
在index.js文件中使用Install方法全局注册组件，即可以像其他iview，element组件可一样使用Vue.sue()全局引用

import Input from './Input/input.vue'

const components = {
   install(Vue){
       Vue.component('zypcInput',Input) //name名很重要，最后引用的组件名
   } 
}

/* 支持使用标签的方式引入 */
if(typeof window !== 'undefined' && window.Vue){
    window.Vue.use(components);
}
export default components;

组件准备好了，开始配置相关文件

四、配置文件

修改build目录下的webpack.base.conf.js文件中的入口

entry: {
    // app: './src/main.js' //入口文件。 main.js中加载的是app.vue文件，所以app.vue是渲染的入口
    app:process.env.NODE_ENV === 'production' 
    ? './src/components/index.js' 
    :'./src/main.js'
    // 环境变量为production 导入index.js
  },

修改build目录下的webapck.prod.conf.js文件中的出口

output: {
    path: config.build.assetsRoot,
    // filename: utils.assetsPath('js/[name].[chunkhash].js'),
    // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    publicPath:config.build.assetsPublicPath,
    //filename配置输出文件的名称
    filename: 'zypc-components.min.js',
    //导出库的名称
    library:'zypc-components',
    //配置以何种方式导出库
    libraryTarget:'umd',
    umdNamedDefine:true
  },

修改生产环境的样式文件，依然在webpack.prod.conf.js文件中

new ExtractTextPlugin({
      // filename: utils.assetsPath('css/[name].[contenthash].css'),
      // Setting the following option to `false` will not extract CSS from codesplit chunks.
      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
      filename:'zypc-components.min.css'
    }),

防止 npm run build 打包失败注释掉webpack.prod.conf.js文件中的一些代码
注释前

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    // keep module.id stable when vendor modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),

注释后

    // new HtmlWebpackPlugin({
    //   filename: process.env.NODE_ENV === 'testing'
    //     ? 'index.html'
    //     : config.build.index,
    //   template: 'index.html',
    //   inject: true,
    //   minify: {
    //     removeComments: true,
    //     collapseWhitespace: true,
    //     removeAttributeQuotes: true
    //     // more options:
    //     // https://github.com/kangax/html-minifier#options-quick-reference
    //   },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      // chunksSortMode: 'dependency'
    // }),
    // keep module.id stable when vendor modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'vendor',
    //   minChunks (module) {
    //     // any required modules inside node_modules are extracted to vendor
    //     return (
    //       module.resource &&
    //       /\.js$/.test(module.resource) &&
    //       module.resource.indexOf(
    //         path.join(__dirname, '../node_modules')
    //       ) === 0
    //     )
    //   }
    // }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'manifest',
    //   minChunks: Infinity
    // }),

最后配置根目录的package.json文件

  "name": "zypc-components",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "withmingallhub <40680331+withmingallhub@users.noreply.github.com>",
  "licentse": "MIT",
  "private": false,
  "main": "dist/zypc-components.min.js",
  "repository": {
    "type": "git",
    "url": "git@github.com:withmingallhub/zypc-components.git"
  },
  "files": [
    "dist",
    "src/components"
  ],
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

完成之后将最新代码推到github上

五、发布组件库

要发布组件库首先要在npm官网申请注册一个账号https://www.npmjs.com/
申请完成之后，打开shell
1.将项目打包

npm run build

2.切换npm源

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

3.登录
这有一个小问题，建议在网络较好的网络环境下进行登录，否则会报错。

npm login

输入用户名、密码、邮箱即可
3.返回根目录，发布上线

npm version patch
npm publish

六、在npm官网搜索组件库名称就会有个人组件库出来了

发布成功后，使用组件库
下载

npm i xxxx

import xx from 'zypc-components'
//引入css文件，否则组件库的样式没有打包后的css文件样式
import 'import 'zypc-components/dist/zypc-components.min.css''
Vue.use(zypc-components)

就可以全局使用了