项目需求

一套功能类似于有赞商城后台管理系统中店铺-微页面的系统，该系统实现用户可以选择所需要的组件，拖动调整组件的顺序，以及编辑组件的内容并且在移动端展示等相关功能,如下图所示。

开始前的思考

系统主要功能

仔细想了一想，该系统需要实现下面三大功能

• 组件系统
• 移动端组件生成系统
• 后台管理系统组件编辑功能

基于什么开发

服务端渲染？还是用原生js封装组件？使用框架选 react 还是 vue？（其实我不会react，但请容许我装个b []~(￣▽￣)~*）

因为之前且尝试开发过element ui库的组件，详情点这，对于element ui的架构有一定的了解，于是打算把基本的功能照搬element ui的架构，先基于vue开发一套组件系统，其他的功能再自行定制。

构建时的思考

构建工具的搭建

构建工具我选择了webpack，大版本为4.0，试着吃吃螃蟹。先思考下需要webpack的哪些功能：

基本上就是以上的loader及插件了。

因为组件库涉及到多个功能的打包，比如组件库，预览时的配置，以及后面会提到的和其他项目的集成，所以对于webpack的配置，可以学习vue-cli中的配置，将公共的配置抽离，特殊的配置通过webpack-merge插件完成合并。

这里将不同的需求及功能抽离成了如上图所示的几个webpack配置， 其中webpack.base.js为公共的配置，如下图所示，分别处理了vue文件，图片以及js文件

这篇文章的目的是主要提供一个思路，所以这里不详细讲解webpack的相关配置。

除了构建工具，还能不能更加高效的完成开发？

其实对于开发来说，提高效率的主要方式就是将相同的事物封装起来，就好比一个函数的封装，这里因为组件文件的结构是相似的，所以我学习element ui的做法，将组件的创建过程封装成脚本，运行命令就能够直接生成好文件，以及添加配置文件。代码如下

const path = require('path')
const fileSave = require('file-save')
const getUnifiedName = require('../utils').getUnifiedName
const uppercamelcase = require('uppercamelcase')
const config = require('../config')const component_name = process.argv[2]                                  //组件文件名 横杠分隔
const ComponentName = uppercamelcase(component_name)                    //组件帕斯卡拼写法命名
const componentCnName = process.argv[3] || ComponentName                //组件中文名
const componentFnName = '$' + getUnifiedName(component_name)            //组件函数名/** 以下模版字符串不能缩进，否则创建的文件内容排版会混乱  **/const createFiles = [{path: path.join(config.packagesPath, component_name, 'index.js'),content: `import Vue from 'vue'
import ${ComponentName} from './src/main.vue'const Component = Vue.extend(${ComponentName})
${ComponentName}.install = function(Vue) {Vue.component(${ComponentName}.name, ${ComponentName})Vue.prototype.${componentFnName} = function() {const instance = new Component()instance.$mount()return instance}
}export default ${ComponentName}`}, {path: path.join(config.packagesPath, component_name, 'src', 'main.scss'),content: `@import '~@/style/common/variable.scss';
@import '~@/style/common/mixins.scss';
@import '~@/style/common/functions.scss';`}, {path: path.join(config.packagesPath, component_name, 'src', 'main.vue'),content: `<template></template><script>
export default {name: '${getUnifiedName(component_name)}'
}
</script><style lang="scss" scoped>
@import './main.scss';
</style>`}, {path: path.join(config.examplesPath, 'src', 'doc', `${component_name}.md`),content: `## ${ComponentName} ${componentCnName}<div class="example-conainer"><div class="phone-container"><div class="phone-screen"><div class="title"></div><div class="webview-container"><sg-${component_name}></sg-${component_name}></div></div></div><div class="edit-container"><edit-component></div>
</div><script>import editComponent from '../components/edit-components/${component_name}'export default {data() {return {}},components: {editComponent}}
</script>`}, {path: path.join(config.examplesPath, 'src/components/edit-components', `${component_name}.vue`),content: ``}
]const componentsJson = require(path.join(config.srcPath, 'components.json'))
const docNavConfig = require(path.join(config.examplesPath, 'src', 'router', 'nav.config.json'))if(docNavConfig[component_name]) {console.log(`${component_name} 已经存在，请检查目录或者components.json文件`)process.exit(0)
}if(componentsJson[component_name]) {console.log(`${component_name} 已经存在，请检查目录或者nav.config.json文件`)process.exit(0)
}createFiles.forEach(file => {fileSave(file.path).write(file.content, 'utf8').end('\n');
})componentsJson[component_name] = {}
componentsJson[component_name].path =  `./packages/${component_name}/index.js`
componentsJson[component_name].cnName = componentCnName
componentsJson[component_name].fnName = componentFnName
componentsJson[component_name].propsData = {}docNavConfig[component_name] = {}
docNavConfig[component_name].path =  `./src/doc/${component_name}.md`
docNavConfig[component_name].cnName = componentCnName
docNavConfig[component_name].vueRouterHref = '/' + component_name
docNavConfig[component_name].fnName = componentFnNamefileSave(path.join(config.srcPath, 'components.json')).write(JSON.stringify(componentsJson, null, '  '), 'utf8').end('\n');fileSave(path.join(config.examplesPath, 'src', 'router', 'nav.config.json')).write(JSON.stringify(docNavConfig, null, '  '), 'utf8').end('\n');console.log('组件创建完成')
复制代码

以及删除组件

const path = require('path')
const fsdo = require('fs-extra')
const fileSave = require('file-save')
const config = require('../config')const component_name = process.argv[2]const files = [{path: path.join(config.packagesPath, component_name),type: 'dir'
}, {path: path.join(config.examplesPath, 'src', 'doc', `${component_name}.md`),type: 'file'
}, {path: path.join(config.srcPath, 'components.json'),type: 'json',key: component_name
}, {path: path.join(config.examplesPath, 'src', 'router', 'nav.config.json'),type: 'json',key: component_name
}]files.forEach(file => {switch(file.type) {case 'dir':case 'file':removeFiles(file.path)break;case 'json':deleteJsonItem(file.path, file.key);break;default:console.log('unknow file type')process.exit(0);break;}
})function removeFiles(path) {fsdo.removeSync(path)
}function deleteJsonItem(path, key) {const targetJson = require(path)if(targetJson[key]) {delete targetJson[key]}fileSave(path).write(JSON.stringify(targetJson, null, '  '), 'utf8').end('\n');
}console.log('组件删除完成')
复制代码

如何开发vue组件

用过vue的同学应该知道vue开发组件有两种方式，一种是 vue.component()的方式，另一种是vue.extend()方式，可以在上面的创建文件代码中看见，这两种方式我都用到了。原因是，对于配置组件的页面，需要用到动态组件，对于移动端渲染，动态组件肯定是不行的，所以需要用到函数形式的组件。

如何打包vue组件

打包vue组件，当然不能将其他无用的功能打包进库中，所以再来一套单独的webpack配置

const path = require('path')
const merge = require('webpack-merge')
const webpackBaseConfig = require('./webpack.base')
const miniCssExtractPlugin = require('mini-css-extract-plugin')
const config = require('./config')
const ENV = process.argv.NODE_ENVmodule.exports = merge(webpackBaseConfig, {output: {filename: 'senguo.m.ui.js',path: path.resolve(config.basePath, './dist/ui'),publicPath: '/dist/ui',libraryTarget: 'umd'},externals: {vue: {root: 'Vue',commonjs: 'vue',commonjs2: 'vue',amd: 'vue'}},module: {rules: [{test: /\.(sc|c)ss$/,use: [miniCssExtractPlugin.loader, {loader: 'css-loader'}, {loader: 'sass-loader'}]}]},plugins: [new miniCssExtractPlugin({filename: "sg-m-ui.css"})]
})
复制代码

先看看组件的入口文件，这是通过配置文件自动生成的，所以不必操心什么，本文的最后会奉上精简版的vue组件开发webpack脚手架，可以直接拿去用哦。

//文件从 build/bin/build-entry.js生成
import SgAlert from './packages/alert/index.js'
import SgSwipe from './packages/swipe/index.js'
import SgGoodsList from './packages/goods-list/index.js' const components = [SgAlert,SgSwipe,SgGoodsList]const install = function(Vue) {components.forEach(component => {component.install(Vue)})
}/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {install(window.Vue);
}// module.exports = {install}
// module.exports.default = module.exports
export default {install}
复制代码

是不是很简单啊。

该如何看见我开发的组件？

因为开发组件时肯定是需要一套webpack的配置用于启动web服务和热更新，所以在build文件夹中，编写了另外一套webpack配置用于开发时预览组件

<--webpack.dev.js-->const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const webpackBaseConfig = require('./webpack.base')
const webpackCleanPlugin = require('clean-webpack-plugin')
const config = require('./config')module.exports = merge(webpackBaseConfig, {module: {rules: [{test: /\.(sc|c)ss$/,use: [{loader: 'style-loader'}, {loader: 'vue-style-loader',}, {loader: 'css-loader'}, {loader: 'sass-loader'}]}]},devServer: {host: '0.0.0.0',publicPath: '/',hot: true,},plugins: [new webpackCleanPlugin(['../dist'], {root: config.basePath,allowExternal: true}),new webpack.HotModuleReplacementPlugin()]
})
复制代码

<--webpack.demo.js-->const path = require('path')
const merge = require('webpack-merge')
const webpackDevConfig = require('./webpack.dev')
const config = require('./config')
const htmlWebpackPlugin = require('html-webpack-plugin')const webpackDemoConfig= merge(webpackDevConfig, {entry: path.resolve(config.examplesPath, 'index.js'),output: {filename: 'index.js',path: path.resolve(config.basePath, './dist'),publicPath: '/'},module: {rules: [{test: /\.md$/,use: [{loader: 'vue-loader'}, {loader: 'vue-markdown-loader/lib/markdown-compiler',options: {raw: true}}]},  {test: /\.html$/,use: [{loader: 'html-loader'}]}, ]}, plugins: [new htmlWebpackPlugin({template: path.join(config.examplesPath, 'index.html'),inject: 'body'})]
})module.exports = webpackDemoConfig
复制代码

在其中可以看见使用了md文件，使用md文件的目的是：

1. 可以在开发时直接预览组件
2. 可以很方便的编写说明文档

通过vue-markdown-loader就可以将md文件解析成vue文件了，这个库是element ui 的官方人员开发的，其实原理很简单，就是将md文档先解析成html文档，再将html文档放入vue文档的template标签内，script 和 style标签单独抽离并排放置，就是一个vue的文档了，解析完后交给vue-loader处理就可以将md文档内容渲染到页面了。

那么预览页面的路由该如何处理呢？

就像上面创建文件那样，通过配置文件以及脚本动态生成路由文件，运行之前，先创建路由js文件即可

配置文件一览

{"main": {"path": "./src/pages/main.vue","cnName": "首页","vueRouterHref": "/main"},"alert": {"path": "./src/doc/alert.md","cnName": "警告","vueRouterHref": "/alert"},"swipe": {"path": "./src/doc/swipe.md","cnName": "轮播","vueRouterHref": "/swipe"},"goods-list": {"path":"./src/doc/goods-list.md","cnName": "商品列表","vueRouterHref": "/goods-list"}
}复制代码

构建完成的路由文件

//文件从 build/bin/build-route.js生成
import Vue from 'vue'
import Router from 'vue-router'
const navConfig = require('./nav.config.json')
import SgMain from '../pages/main.vue'
import SgAlert from '../doc/alert.md'
import SgSwipe from '../doc/swipe.md'
import SgGoodsList from '../doc/goods-list.md' Vue.use(Router)const modules = [SgMain,SgAlert,SgSwipe,SgGoodsList]
const routes = []Object.keys(navConfig).map((value, index) => {let obj = {}obj.path = value.vueRouterHref,obj.component = modules[index]routes.push(obj)
})export default new Router({mode: 'hash',routes
})
复制代码

就这样，从组件的创建到项目的运行都是自动的啦。

介个编辑拖拽的功能要咋弄呢？

当然是用的插件啦，简单粗暴，看这里,它是基于Sortable.js封装的，有赞貌似用的也是这个库。

但看到右边的那个编辑框，我不禁陷入了沉思，怎么样才能做到只开发一次，这个配置页面就不用管理了？

编辑组件的组件？？？

由于中文的博大精深，姑且将下面的关键字分为两种：

1. 用于移动端展示的组件------ 功能组件
2. 用于编辑功能组件的组件---- 选项组件

分析需求可以发现，功能组件的内容都是可以由选项组件编辑的，最初我的想法是，选项组件的内容也根据配置文件生成，比如组件的props数据，这样就不用开发选项组件了，仔细一想还是太年轻了，配置项不可能满足设计稿以及不同的需求。

只能开发另一套选择组件咯，于是乎将选项组件的内容追加到自动生成文件的列表，这样微微先省点事。

组件间的通信咋办？

功能组件与选项组件间的通信可不是一件简单的事，首先要所有的组件实现同一种通信方式，其次也不能因为参数的丢失而导致报错，更重要的是，功能组件在移动端渲染后需要将选项组件配置的选项还原。

嗯，用那些方式好呢？

vuex? 需要对每一个组件都添加状态管理，麻烦

eventBus? 我怕我记不住事件名

props？是个好办法，但是选项组件要怎么样高效的把配置的数据传递出来呢？v-model就是一个很优雅的方式

首先功能组件的props与选项组件的v-model绑定同一个model，这样就能实现高效的通信，就像这样：

<--swipe.md-->## Swipe 轮播<div class="example-conainer"><div class="phone-container"><div class="phone-screen"><div class="title"></div><div class="webview-container" ref="phoneScreen"><sg-swipe :data="data"></sg-swipe></div></div></div><div class="edit-container"><edit-component v-model="data"></div>
</div><script>
import editComponent from '../components/edit-components/swipe'
export default {data() {return {data: {imagesList: ['https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg']}}},components: {editComponent}
}
</script>
复制代码

就这样，完美解决组件间通信，但是这是静态的组件，别忘了还有一个难点，那就是动态组件该如何进行参数传递，以及知道传递什么参数而不会导致报错。

拖拽系统的构建

先看个示例图

其中左侧手机里的内容是用v-for渲染的动态组件，右侧选项组件也是动态组件，这样就实现了上面所想的，功能组件和选项组件只需开发完成，配置页面就会自动添加对应的组件，而不用管理，如下图所示

但这样就会有一个问题，每个组件内部的数据不一致，得知道选中的组件是什么，以及知道该如何传递正确的数据，还记得之前的配置文件吗？其实这些组件也是读取的配置文件渲染的，配置文件如下：

{"alert": {          // 组件名"path": "./packages/alert/index.js","cnName": "警告","fnName": "$SgAlert","propsData": {} //props需要传递的数据},"swipe": {"path": "./packages/swipe/index.js","cnName": "轮播","fnName": "$SgSwipe","propsData": {"imagesList": ["https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"]}},"goods-list": {"path": "./packages/goods-list/index.js","cnName": "商品列表","fnName": "$SgGoodsList","propsData": {}}
}
复制代码

每一个组件的配置都添加了propsData，里面的元素和组件props数据以及选项组件v-model关联，这样就不用担心缺失字段而报错了，但是这样的做法给开发添加了麻烦。

组件编写的过程中还得将数据手动添加到配置文件，看能不能直接读取vue文件的props解决这个问题

到了这一步，组件以及组件的编辑拖拽功能均已完成，要考虑的是，如何把编辑拖拽功能页面集成到现有的后台系统中去，因为拖拽编辑组件的功能是给客户用的，这里为了效率和组件系统一同开发了。

如何与现有商户后台系统集成

vue路由的配置，每一个路由都对应一个组件，那么这个系统也可以这样做，只需要把中间那部分拖拽配置组件的页面打包后引入到父工程（商户后台管理系统）中去就好了，那么该如何处理呢？其实很简单，将webpack打包入口设置成相对应的vue文件就行，就像这样。

const path = require('path')
const merge = require('webpack-merge')
const webpackBaseConfig = require('./webpack.base')
const config = require('./config')
const miniCssExtractPlugin = require('mini-css-extract-plugin')
const ENV = process.argv.NODE_ENVmodule.exports = merge(webpackBaseConfig, {entry: path.resolve(config.examplesPath, 'src/manage-system-app.vue'),output: {filename: 'components-manage.js',path: path.resolve(config.basePath, './dist/components-manage'),publicPath: '/dist/components-manage',libraryTarget: 'umd'},externals: {vue: {root: 'Vue',commonjs: 'vue',commonjs2: 'vue',amd: 'vue'}},module: {rules: [{test: /\.(sc|c)ss$/,use: [ miniCssExtractPlugin.loader, {loader: 'css-loader'}, {loader: 'sass-loader'}]}]},plugins: [new miniCssExtractPlugin({filename: "components-manage.css"})]
})
复制代码

然后在父工程引入组件库以及样式文件，再将路由对应的组件配置成这个打包后的js文件就行。

import EditPage from '@/pages/EditPage.js'new Router({routes: [{path: '/edit-page',components: EditPage}]
})
复制代码

组件渲染系统

这还不简单么，看代码就懂了。

class InsertModule {constructor(element, componentsData, thatVue) {if(element instanceof String) {const el = document.getElementById(element)this.element = el ? el : document.body} else if(element instanceof HTMLElement) {this.element = element} else {return console.error('传入的元素不是一个dom元素id或者dom元素')}if(JSON.stringify(componentsData) == '[]') {return console.error('传入的组件列表为空')}this.componentsData = componentsDatathis.vueInstance = thatVuethis.insertToElement()}insertToElement() {this.componentsData.forEach((component, index) => {const componentInstance = (this.vueInstance[component.fnName] && this.vueInstance[component.fnName] instanceof Function&&this.vueInstance[component.fnName]({propsData: component.propsData})||{})if (componentInstance.$el) {componentInstance.$el.setAttribute('component-index', index)componentInstance.$el.setAttribute('isComponent', "true")componentInstance.$el.setAttribute('component-name', component.fnName)this.element.appendChild(componentInstance.$el)} else {console.error(`组件 ${component.fnName} 不存在`)}}) }
}const install = function(Vue) {Vue.prototype.$insertModule = function(element, componentsData) {const self = this;return new InsertModule(element, componentsData, self)}
}/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {install(window.Vue);
}export default {install}
复制代码

这里将 组件的props数据传入至组件完成相关配置，这也是之前为什么选择prosp通信的原因

this.vueInstance[component.fnName]({propsData: component.propsData})<-- swipe.js -->
import Vue from 'vue'
import Swipe from './src/main.vue'const Component = Vue.extend(Swipe)
Swipe.install = function(Vue) {Vue.component(Swipe.name, Swipe)Vue.prototype.$SgSwipe = function(options) {const instance = new Component({data: options.data || {},propsData: {data: options.propsData || {}}      //这里接收了数据})instance.$mount()return instance}
}export default Swipe复制代码

就系介样，渲染完成，200元一条的8g内存的梦啥时候能够实现？

结束语

最后，奉上此系统精简版的webpack配置，除了没拖拽系统以及组件渲染系统，其他的基本都支持，可以在此配置上定制自己的功能，编写自己的组件系统，但是强烈建议阅读element ui的脚手架配置，尝试从0-1定制自己的脚手架哦。

github.com/Richard-Cho…