刷新UI组件库-准备开发组件库语言框架：vue,vuepress,vue-cli3,less参考框架：iview-ui,element-ui开发定位风格：小清新，简约颜色：主绿，底白字体：oppofont免费商业新项目全局安装npminstall-g@vue/cli或yarnglobal添加@vue/cli创建项目vuecreatefresh-project将目录结构src改为packages:存放组件。index.js的内容如下/定义安装方法，接收Vue作为参数。如果使用use注册插件，所有组件都会被注册constinstall=function(Vue){//判断是否安装if(install.installed)return//遍历并注册全局组件components.map(component=>Vue.component(component.name,component))}//判断文件是否直接导入if(typeofwindow!=='undefined'&&window.Vue){install(window.Vue)}exportdefault{//导出的对象必须有install，可以通过Vue.use()方法安装，//下面是具体组件列表Button}新建vue.config.js，内容如下constpath=require('path');module.exports={pages:{index:{entry:'examples/main.js',template:'public/index.html',filename:'index.html'}},//扩展webpack配置以添加包到编译链Webpack:config=>{config.module.rule('js').include.add('/packages').end().use('babel').loader('babel-loader').end()},pluginOptions:{'style-资源加载器'：{预处理器:'less',patterns:[path.resolve(__dirname,"./public/assets/style/index.less")]//引入全局样式变量}}}使用vuepress目录结构创建新示例：显示组件.vuepress目录下新建enhanceApp.js，导入开发好的组件库importifreshfrom'../../packages/index.js'//注册组件库exportdefault({Vue,//Vue构造函数选项VuePress正在使用，//附加到根实例路由器的一些选项，//当前应用程序的路由实例siteData//站点元数据})=>{Vue.use(ifresh)}单个组件demo.vue文件需要给名字起名字！jsexport//导入组件，组件必须声明nameimportbtnfrom'./src'//提供组件的install安装方法，供按需引入btn.install=function(Vue){Vue.component(btn.name,btn)}//导出组件exportvarButton=btn;
