背景:做生意，难免要面对快速发展的需求。快速开发意味着开发者的时间不多了。如果有一套基础模板，可以省去很多前期工作。为什么需要一个基础模板来专心做业务开发？实际问题是，vue-cli提供的那个不好吗？是的，一般来说，我们会通过vue-cli快速启动一个项目，但问题是创建的项目模板集合过于简单，我们实际的业务开发场景需要更多的基础设备——比如request工具等常见的配套设备。 如果每个项目在创建后都需要花费少量的时间来添加少量的新的配套设备，无疑会浪费宝贵的开发时间(毕竟产品和项目经理没有把你的时间算在基本框架的搭建上)，而且理论上这部分工作是重复的，可以抽出来。 当然，每个公司的业务场景是不一样的，下面的细节只是一些业务需求的基础项目模板。 基本模板应该包含哪些功能？vue-cli创建的项目模板已经包含了很多基本配置，比如ESLint等。我们只需要做一个简单的扩展。 扩展内容如下:默认启用ESLint基本CSS类，增加图标，增加http请求工具。添加以上四种配置后，默认脚手架生成模板的空缺基本可以填补。 可能有人会问，为什么没有带路线的配置项？我不认为每个项目都需要路由。很多项目只是一个简单的没有太多页面跳转的活动页面，加上路由本身成本不高，所以没有配置。 接下来，我们来说说这四种配置应该做什么。 生成vue-cli时，可以指定默认启用ESLintESLint。这里的问题是，大多数现有的规则应该遵守，少数应该修改。 你什么意思？按照标准方案，缩进是两个空格，但所有团队都是用四个空格缩进。这个时候就会被覆盖，这就是做一些修改的地方。 在这个基本的模板扩展中，ESLint的部分使用了标准的集成方案，并且重写了一些规则，可以遵循团队的规则。 在构建web项目的过程中添加基本的css类，肯定会遇到一部分样式布局。一般来说会包括以下两个方面:css初始化，目的是统一浏览器之间的差异。添加一般的css类，比如主题颜色的定义等。我们可以通过预解语言来形成一般的CSS类，比如使用SCSS/萨斯。 引入预解语言后，可以定义几个基本变量，比如颜色值，通过webpack配置注入到所有组件中，如下图:将全局scss变量注入到所有组件中。几个常用的样式也可以独立成一个类，方便随时使用，比如内外边距、字体、颜色、宽度等。，这些都是可以提前定义的，想调用就直接调用，比如ml10 {margin-left: 10px。}，可以直接使用，无需在单个文件组件中定义。 这样的好处就是方便。有时候，只要设置了文本标签的字体大小，开发就要面临两个问题:用css class name/write创建一个新的样式标签。原始样式标记下的class-name { font-size:18px；}想一个标准化的类名很痛苦。我相信不止我一个人这么想。 如果一次写多个属性，可以不写。在很多情况下，你只需要设置一个边距或者字体大小，所以在开始的时候把这些分别画出来是个不错的选择。 拿出填充类，0~100有图标。添加图标其实并不是所有项目都会用到，但是考虑到配置还是需要一点时间，所以也添加到了基础模板的范围内。 这里主要使用Svg-icon。详细内容可参考大人物文章《牵手，带你优雅使用icon》 关于svg图标的配置细节，需要写一个简单的svg组件+svg-sprite配置+svg设置自动导入。这些都可以集成到基础模板中，你只需要导入对应的svg图标。 HTTP请求工具认为90%以上的页面都会与接口进行交互，所以我们也可以将HTTP请求工具内置到模板中。 这里使用Axios作为HTTP请求的库，当然也可以使用原生的fetchAPI，按照团队的喜好就可以了。 对于HTTP请求工具，有以下几个常见的需求:根据不同的环境，切换不同的接口URL前缀，解决请求/响应阻塞，统一封装GET/POST方法。这些配置并不难，可以在axios文档中找到。 其中，对于请求/响应的块，通常做的是根据接口定义的不同状态码来判断成功/失败。个人会把所有失败的情况都扔进reject方法中去解决，只有成功的时候才会把关键数据扔出去，这样在使用的时候。然后获取接口数据，可以判断少量的状态码，直接获取关键数据。 响应于阻止伪代码的请求，也可以在块中添加诸如许可字段的请求报头信息。 具体的axios配置请参考大boss的文章《Axios在vue中的封装及API接口的管理》优化基础项目模板。细心的学生可能会发现，以这种方式启用的项目会有一些问题。例如，在添加基本css类的步骤中，会产生大量的类冗余。毕竟，并不是每个生成的快捷方式css类都会在开发中用到。写完整了，你会发现构建CSS文件特别大，这是必须优化的一点。 比如svg图标能否压缩体积也是可以优化的一点。 去掉多余的css知道该怎么做，网上搜索一下大概就能给你答案。在这里，我们使用Purgecsswebpack插件来解决冗余的CSS。 这个插件的方便之处在于，它已经集成到了vue-cli脚手架中，只要按照教程来解决就可以了。下面是如何使用vue ui工具添加，安装后已经配置好了。 用vue ui安装purgeCSS插件压缩svg压缩svg。当然我们用的是svgo，一键集成到npm脚本中，可以在构造时压缩。 svgo的详细内容请参考官方文档，以上细节在SVGION的大文章中也有详细介绍，这里就不做过多描述了。 //安装npm i -g svgo//运行指定目录your_svgsvgo -f your_svg//并集成到命令中。在package.json的脚本中写“svgo”:“svgo-f your _ SVG”结论。经过以上配置，基本上开发可以避免少量的前期工作，但是当然不能开箱即用，比如
