vue项目开发的个人总结

最近公司新建一个项目，用vue搭建前端，因为自己也是从0开始，所以记录下开发觉得有用的事情，方便以后回顾：

项目搭建：

新建一个vue项目，由于有脚手架vue-cli的帮助，一切都变得很容易，有点发愁的就是为了追寻前端的脚步（顺便吐槽下前端开发是真的很爱折腾）采用vue-cli 3.x版本，配置和之前2.x完全不一样，无需再去考虑webpack的配置，全部放在vue.config.js。

关于vue.config.js的相关配置vue-cli3 官网都介绍得很清楚了，这里就不多介绍。

多页模式：

由于业务的复杂程度，单页模式是很有局限性的，因此采用多页模式，3.x的多页模式配置比2.x来得轻松太多了，只要一个pages就能解决所有事情，这里主要记录一些开发过程中遇到的一些问题：

1. template模板如果有同一份会出现之后的页面覆盖前面的情况，之前在这里花费了不少时间，因为三个页面：about, index, home，pages配置顺序：about -> index -> homd，想说方便公用一份index.html，导致都是显示都是home页面。
2. 由于后端开发习惯，ide使用的是intellij，这里需要注意下，事先新建node_modules文件夹，设置文件夹git ignore，打开项目再对项目做install，不然idea会针对git做index，这是非常费时间的事情。

UI框架选型：

框架搭建之后就是框架选型，前端的框架千变万化，选择性实在太多了，初步从ElementUi，iview和ant三者去做考虑。选择这三者初步考虑：

1. elementUi 之前有个项目使用的框架，而且使用频率实在是太高。
2. iview公司ued人员主推框架规范。
3. ant一个前端的同事着重推荐。

分析之后：

1. ant
   1. 公司目前也有项目正在尝试
   2. 功能支持强大，iview支持的ant都支持，ant还支持很多有用的功能iview不支持
2. element
   1. element 生态更好，使用频率远超过iview
   2. api比较 ，侧重于在template里直接去渲染模板
3. iview
   1. 公司主推
   2. api比较 ，iview 要比element 简洁许多
4. 结论
   1. 毕竟是小白，element 公司目前没有组件正在尝试，没有前人的经验，所以不考虑
   2. 对比主要控件：树、表单、时间选择器和表格进行对比，iview的功能性不如ant，同时针对2.0的原型，ant能更好的支持实现，不需要额外的空间开发，节约开发成本，因此最终选型是ant。

ant自定义主题：

由于本人是后端出生，对前端是抱有兴趣，没有深入小白一个，但是又有强迫症，希望采用最好的解决方案，因此更换主题希望用less文件引入来实现。

由于ant默认主题和原型有差异，希望实现更换主题，有两个办法：

1. https://vuecomponent.github.io/ant-design-vue/docs/vue/customize-theme-cn/#%E5%9C%A8-vue-cli-3%E4%B8%AD%E5%AE%9A%E5%88%B6%E4%B8%BB%E9%A2%98
2. https://vuecomponent.github.io/ant-design-vue/docs/vue/customize-theme-cn/#%E9%85%8D%E7%BD%AE-less-%E5%8F%98%E9%87%8F%E6%96%87%E4%BB%B6

2这个办法真是看了半天也没看懂，又没人请教，网上也没有资料，后来去查看ant默认的主题antd.less，发现写法：

@import "../lib/style/index.less";
@import "../lib/style/components.less";

才想明白，__at__import = @import，所以我的配置：

@import '~ant-design-vue/dist/antd.less';

@primary-color: #00a9c8;

main.js里面：

import '../../assets/static/theme.less'

终于成功了，这里花了很多时间，主要问题有几点：

1. 是在main.js 里面import，还是在css.loaderOptions里面去设置。
   1. 但是没找到关于less的配置，官网只提供了modifyVars参数的设置，搜索网上也就找到sass有个 data的配置，但是这个针对less是不生效的。
      1. 当在 multi-page 模式下构建时，webpack 配置会包含不一样的插件 (这时会存在多个 html-webpack-plugin 和 preload-webpack-plugin 的实例)。所以导致网上的例子都不生效。（怀疑）
      2. 查看了vue-cli-plugin-style-resources-loader的源代码，发现是根据webpack

         'normal',
         'normal-modules',
         'vue',
         'vue-modules'四种类型实现添加资源，因此怀疑是否在多页模式下漏了类型。

      3. 由于实现方案过于复杂，更改方案，layout chunk引入less，其他通过父子路由实现页面嵌套。
      4. 花了两天时间发现这里有个坑：1和2都不是问题的原因，如果.vue文件里面没有

         style scoped lang="less"标签，或是标签里面为空，都会过滤掉不去加载预处理的css。

2. 如果你想修改某个控件的样式，有几个办法：
   1. css直接复写（比较方便，但是不方便维护）
   2. 主题维护，如果主题默认有提供变量，可以直接修改，比如@primary-color，变量值我是去具体的less文件查看源码，比如menu/style/index.less
   3. 自己less实现类似dark的主题
   4. 结论：优先用2，如果可复用高采用3，针对特殊的用1。

部署：

代码构建：

Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

1. install compiler 默认放在devDependencies，移到dependencies
2. compiler和vue版本一致确认了好多遍都是2.5.21，后来执行了npm install vue-template-compiler -D，发现引入的vue-template-compiler是2.5.22，升级了下发现部署成功了，坑。

页面访问：

访问index.html，发现都是空白，怀疑chunk没有引入进来。看了network，chunk-vendors.js实现了预加载，但是没有引用导致source里面没有代码。

结果发现自己pages配置中的chunks属性，vendor-chunk少打了一个s。