详解基于vue-cli3.0如何构建功能完善的前端架子-创新互联

上一篇文章写了vue和typescript的整合，发现很多小伙伴对vue-cli构建出来的项目很感兴趣，所以今天打算写写怎么在vue-cli3.0的架子上，在进一步完善，整合出具备基础功能的前端架子，主要包括以下几个功能点：

1. webpack 打包扩展
2. css：sass支持、normalize.css
3. rem布局
4. 路由设计:懒加载、前置检查、合法性校验
5. api 设计
6. 请求体设计-防重复提交
7. vuex状态管理

webpack 打包扩展

vue-cli3 大的特点就是 零配置 ，脚手架把webpack相关的配置都隐藏在@vue\preload-webpack-plugin中，默认的配置可以满足大部分应用场景，优点是我们可以节省很多折腾配置的时间，webpack对于新手来说，还是有点门槛的，这样一来，新人上手可以更关注于vue的编码上。缺点也很明显，对于想自己进行自定义配置的时候，就会稍微麻烦些。

查看当前webpack的详细配置

使用 vue inspect 可以查看到详细的配置列表

扩展webpack配置

当我们想要修改或者扩展webpack配置项时，可以在根目录下新增 vue.config.js 文件，列举个我自己写的简单小栗子

// webpack 扩展
module.exports = {
 baseUrl: 'production' === process.env.NODE_ENV ?
  '/production-sub-path/' :
  '/',
 chainWebpack: config => {
  config.module
   .rule('images')
   .use('url-loader')
   .tap(options => Object.assign(options, { limit: 500 }));
 },
 devServer: {
  open: 'darwin' === process.platform,

  // host: '0.0.0.0',
  port: 8088,
  https: false,
  hotOnly: false,

  // proxy: 'https://api.douban.com' // string | Object 
  proxy: 'http://localhost:3000' // string | Object 
 },
 lintOnSave: false
};