上一篇文章写了vue和typescript的整合，发现很多小伙伴对vue-cli构建出来的项目很感兴趣，所以今天打算写写怎么在vue-cli3.0的架子上，在进一步完善，整合出具备基础功能的前端架子，主要包括以下几个功能点：
webpack 打包扩展
css：sass支持、normalize.css
rem布局
路由设计:懒加载、前置检查、合法性校验
api 设计
请求体设计-防重复提交
vuex状态管理
webpack 打包扩展
vue-cli3 最大的特点就是
零配置 ，脚手架把webpack相关的配置都隐藏在@vuepreload-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
};
官网Vue.js 开发的标准工具 的介绍非常详细，而且还有中文版，非常易懂,
sass支持
<style lang="scss"></style>
<style lang="scss">
@import "./assets/style/app";
</style>在组件中使用自定义的 functions 和 mixin，我暂时没找到全局引用的办法，只能在需要使用的组件文件中手动引用，如下
<style lang="scss">
@import "../assets/style/functions";
@import "../assets/style/mixin";
.rem {
height: px2rem(187.5px); //自定义的函数
}
.mimi {
@include clearfix(); //自定义的mixin
}
</style>为了抹平各个浏览器间的差异，我们需要引入 normalize.css
