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

心血来潮，很好奇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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！