现在对前端工程师的要求越来越高，需要掌握的技术点越来越多，一些基本的前端技能就可以了适应所有前端领域的快速变化。接下来我将从零开始实现自己的UI组件库并发布到npm上，提供给需要的朋友参考，总结一下自己对封装组件的理解，以备日后复习。本项目以Button按钮为例，详细记录了封装一个ButtonUI组件的每一步以及需要注意的地方：效果需要技巧，需要掌握Vue的基本语法组件间通信槽的使用vue-cli3创建项目，打包npm&git的使用创建项目检查节点环境配置首先在本地和全局安装节点环境。vue的运行是依靠node的npm管理工具实现的。节点的下载地址。下载node后，打开cmd管理工具，输入node-v，回车，查看node版本号。如果出现版本号，则表示安装成功。注意：node的版本必须是8.9以上（推荐8.11.0+）node-vnpm-vVueversion关于老版本如果你全局安装了老版本的vue-cli（1.x或2.x），需要先通过npmuninstallvue-cli-g或者yarnglobalremovevue-cli卸载，VueCLI的包名由vue-cli改为@vue/cli。安装新版本npminstall-g@vue/cli#ORyarnglobaladd@vue/cli查看版本vue--version|vue-V创建项目vuecreatemc-uiORvueui也可以使用UI图形界面创建项目注意：由于我们要开发第三方依赖库，所以选择Manuallyselectfeatures。选择项目中需要安装哪些功能(*)Babel()TypeScript()ProgressiveWebApp(PWA)Support()Router()Vuex(*)CSSPre-processors(*)Linter/Formatter()UnitTesting()E2ETesting系统默认包含基本的Babel+ESLint预设，我们只需要选择CSS配置即可。移动键盘上的上下键选择需要的特性，按键盘上的空格键选择哪种CSS预处理语言Sass/SCSS(withdart-sass)Sass/SCSS(withnode-sass)LessStylus由于ElementUI的风格是Sass，所以我们可以选择第一项，为什么不选择第二项呢？因为dart-sass比node-sass好，所以下载选择代码风格只有防错的ESLintESLint+AirbnbconfigESLint+StandardconfigESLint+Prettier可以根据个人喜好选择，代码格式检测我更喜欢第三种方法(*)Lintonsave()Lintandfixoncommit选择Ctrl+S保存时检测代码格式配置文件生成方式在专用配置文件中在package.json中由于个人喜好，我更喜欢选择第二个选项是否保存预设Configure将此保存为预设以供将来的项目使用？(y/N)看项目需求，我这里选N。回车后，系统会自动帮我们将选中的配置集成到模板中，然后生成一个完整的工程。核心逻辑我们大致根据ElementUI的源码目录开发自己的UI库项目。所以删除系统自动为我们创建的src、assets等目录，在根目录下创建一个packages目录，用来存放我们要开发的UI组件；在根目录下创建一个test目录，用于测试我们自己开发的UI组件。由于我们更改了原项目的目录结构，使得系统在本地运行，找不到对应的目录进行打包，所以需要在项目的根目录下创建一个vue.config.js文件夹，手动修改webpack配置使系统本地它运行和打包正常。//vue.config.jsconstpath=require('path');module.exports={pages:{index:{entry:'test/main.js',template:'public/index.html',filename:'index.html'}},chainWebpack:config=>{config.module.rule('js').include.add(path.resolve(__dirname,'packages')).end().use('babel').loader('babel-loader').tap(options=>{returnoptions;})}}基本样式基础
