发布自己的Vue组件库到npm让别人可以下载，很装B同时也很简单.......

您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

心血来潮，很好奇element-ui是怎么搞出来的。其实流程很简单，经过研究。

1. 首先你需要创建一个脚手架，并且配置一些基本webpack配置。
2. 写一些自己的组件，如Button、Radio等等。
3. 在组件根目录创建一个组件下载入口文件index.js
4. npm run build将整个项目文件打包
5. 注册一个npm账号，并在打包完毕后npm login -> npm publish发布到npm上
6. 在自己的业务项目中npm i XXXXX 下载发布到npm上的包
7. Vue.use(XXX)
8. 这样就大功告成啦。。所有封装好的组件都是可以直接用的，和往常使用element-ui是一样的。

具体流程如下

1.vue init webpack-simple XX创建组件库脚手架

2.创建components子组件，一定要定义name，用于Vue.use

<template>
  <div class="calculate">
    <div class="button">按钮</div>
  </div>
</template>
<script>
  export default({
    name:'OButton',
    data() {
      return{
      }
    },
    mounted() {
    },
    methods:{
    }
  })
</script>
<style>
.button{
	width:100px;
	height:50px;
	color:#fff;
	background:blue;
	border-radius: 4%;
}
  
</style>

3.在components根目录新建index.js组件入口文件，作为webpack入口

import Button from './My-Button.vue'
import Alert from './My-Alert.vue'

const components = [
    Button,
    Alert ,
]

const install = function (Vue) {
    if (install.installed) return
    // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
    if (typeof window !== 'undefined' && window.Vue) {
        install(window.Vue)
    }
}

export default install 

4.配置webpack.config.js中的入口和出口

 entry: './src/components/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'main.js',
    library: "vue-component-fx", 
    libraryTarget: "umd",
    umdNamedDefine: true
  },

5.修改package.json中的参数

  "name": "vue-component-fx",
  "description": "A Vue.js project",
  "version": "1.0.4",
  "author": "fengxin <1244200081@qq.com>",
  "license": "MIT",
  "private": false,
  "main":"dist/main.js",

6.npm run build打包

7.npm login

8.npm publish发布

9.在项目中安装引入，和elementui一样

import mycomponent from 'vue-component-fx'
Vue.use(mycomponent)

由于npm run build和npm run dev在webpack配置后会导致项目运行失效，因此在每次打包发布和开发的过程中需要对package.json和webpack.config.js文件进行修改。

开发版本还原

{
  "name": "dev-model",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "fengxin <1244200081@qq.com>",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

ar path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },

接下来每一个组件都会实时更新，开源发布到npm中，有兴趣的小伙伴可以关注哦
https://www.npmjs.com/package/ui-package-for-vue