1.分解需求
技术栈
考虑到后续招人和现有人员的技术栈，选择Vue作为框架。
公司主要业务是GIS和BIM，通常开发一些中大型的系统，所以vue-router和vuex都是必不可少的。
放弃了ElementUI选择了AntDesignVue（最近Element好像复活了，麻蛋）。
工具库选择lodash。
建立脚手架
搭建NPM私服。
使用Node环境开发CLI工具。
基于
vue/cli搭建基础的模板（大家都比较了解，节省开发时间，远胜于从零开始搭建）。根据业务需求定义各种开发中可能用到的功能（组件库、状态管理、过滤器、指令、CSS内置变量、CSSMixins、表单验证、工具函数等）。
性能优化，例如对AntDesignVue组件库的优化。
开发规范
对代码风格、命名规则、目录结构进行统一规范。
静态资源的使用规范。
单元测试、提交线上测试规范。
Git提交记录和多人协作规范。
2.样式
CSS预处理器的选择
Sass/Scss
Less
Stylus
为什么选择了两个？因为公司团队跟倾向于使用scss开发，less是为了覆盖antdesignvue的样式，stylus只有我自己喜欢这种风格。
局部样式与全局样式
局部样式
一般都是使用scoped方案：
stylescoped.../style
全局样式
全局样式目录：
/stylesvariable.scss:全局变量管理mixins.scss:全局Mixins管理global.scss:全局样式
其中variable.scss和mixins.scss会优先于global.css加载，并且可以不通过import的方式在项目中任何位置使用这些变量和mixins。
//vue.config.jsmodule.exports={css:{loaderOptions:{sass:{prependData:`
import/styles/variable.scss;import/styles/mixins.scss;`,},},},}体验优化
页面载入进度条
使用nprogress对路由跳转时做一个伪进度条，这样做在网络不好的情况下可以让用户知道页面已经在加载了：
importNProgressfromnprogress;router.beforeEach(()={NProgress.start();});router.afterEach(()={NProgress.done();});
美化滚动条
一直用Mac做前端，突然发现同事的Windows上出现了十分丑陋的滚动条，为了保持一致：
::-webkit-scrollbar{width:6px;height:6px;}::-webkit-scrollbar-track{width:6px;background:rgba(#F1C,0.1);-webkit-border-radius:2em;-moz-border-radius:2em;border-radius:2em;}::-webkit-scrollbar-thumb{background-color:rgba(#F1C,0.5);background-clip:padding-box;min-height:28px;-webkit-border-radius:2em;-moz-border-radius:2em;border-radius:2em;}::-webkit-scrollbar-thumb:hover{background-color:rgba(#F1C,1);}
静态资源加载页面
首次加载页面时，会产生大量的白屏时间，这时做一个loading效果看起来会很友好，其实很简单，直接在public/index.html里写一些静态的样式即可。
移动端vh问题
在移动端使用vh时，发现在Chrome、Safari浏览器中，因为浏览器栏和一些导航栏、链接栏导致不一样的呈现：
你以为的vh===视口高度
实际上vh===视口高度+浏览器工具栏（地址栏等等）的高度
解决方案
安装vh-checknpminstallvh-check\--save
importvhCheckfromvh-check;vhCheck(browser-address-bar);
定义一个CSSMixin
mixinvh($height:vh){height:$height;height:calc(#{$height}-var(--browser-address-bar,0px));}之后就是哪里不会点哪里。
3.组件库
因为ElementUI长期没更新，并且之前使用过React的AntDesign（重点），所以组件库选择了AntDesignVue。
覆盖AntDesignVue样式
设计师眼中的AntDesign===丑（心酸）。
1.使用.less文件
AntDesignVue的样式使用了Less作为开发语言，并定义了一系列全局/组件的样式变量，所以需要安装了less、less-loader，在
/styles/antd-theme.less可以覆盖默认样式。优点是：
方便快捷，可以修改class，覆盖默认变量。
缺点是：
必须引入
import~ant-design-vue/dist/antd.less;，引入后会将所有的组件样式全部引入，导致打包后的css体积达到kb左右。2.使用JavaScript对象
通过JavaScript对象的方式可以修改内置变量，需要对Less进行配置：
//vue.config.jsconstmodifyVars=require(./src/styles/antdTheme.js);module.exports={css:{loaderOptions:{less:{lessOptions:{javascriptEnabled:true,modifyVars,},},},},}
这一步还可以继续优化，通过babel-plugin-importAntDesignVue的组件样式可以按需加载：
//babel.config.jsmodule.exports={presets:[
vue/cli-plugin-babel/preset,],plugins:[[import,{libraryName:ant-design-vue,libraryDirectory:es,style:true},],],};优点是：
可以按需引入，打包后的CSS体积取决于你引用了多少个组件。
缺点是：
不能使用class进行样式覆盖。
干掉无用的图标
AntDesignVue把所有的Icon一次性引入（不管你因用了多少个组件），这使得体积打包后图标所占的体积竟然有几百kb之多。这些图标大多数不会被设计师所采纳，所以部分图标都应该被干掉：
创建一个icons.js来管理AntDesignVue图标，这里以一个Loading图标为例：
//
/src/assets/icons.jsexport{defaultasLoadingOutline}fromant-design/icons/lib/outline/LoadingOutline;如何知道你要加载的图标在什么路径下？
在
ant-design/icons/lib目录下有三种风格的图标，分别是fill、outline、twotone，这里面内部的文件并不是svg格式，而是js和ts格式，这就是为什么我们可以这么引入图标的关键所在了。下一步是通过配置vue.config.js将这个文件引入进来：
//vue.config.jsmodule.exports={configureWebpack:{resolve:{alias:{
ant-design/icons/lib/dist$:path.resolve(__dirname,./src/assets/icons.js),},},},}解决Moment多国语
解决到这之后，AntDesignVue居然还很大，这是因为moment是AntDesignVue中有强依赖该插件，所以使用webpack插件减小打包体积，这里我们只保留zh-cn语言包：
//vue.config.jsmodule.exports={chainWebpack:(config)={config.plugin(ContextReplacementPlugin).use(webpack.ContextReplacementPlugin,[/moment[/\\]locale$/,/zh-cn/]);},}
部分组件需要在页面内引用
AntDesignVue中部分体积较大的组件，例如DatePicker，根据业务需求，应考虑在页面中进行加载，尽量保证首屏加载的速度：
scriptimport{DatePicker}fromant-design-vue;exportdefault{