上一篇文章写了vue和typescript的整合，发现很多小伙伴对vue-cli构建出来的项目很感兴趣，所以今天打算写写怎么在vue-cli3.0的架子上，在进一步完善，整合出具备基础功能的前端架子，主要包括以下几个功能点：
webpack 打包扩展
css：sass支持、normalize.css
rem布局
路由设计:懒加载、前置检查、合法性校验
api 设计
请求体设计-防重复提交
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/' : 'https://www.jb51.net/', 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
// app.scss @import "./node_modules/normalize.css/normalize"; //引用第三方normalize @import "custom_normalize"; // 自定义的normalize
rem布局
在移动端下使用rem布局是个不错的选择，既然我们使用里的scss，那么可以使用函数来简化我们的重复计算的工作。设计给到的通常是2倍图，宽为750px，那么我们可以将基准设为 document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px'; 然后写个转换函数，如下：
// _functions.scss @function px2rem($px) { $rem: 75px; @return ($px/$rem) + rem; }
我们在使用的时候，就可以这么写
.rem { height: px2rem(300px); // 2倍图下的宽是300px, }
转换成css就是
.rem { height: 4rem; }
路由设计
主要包括路由懒加载、路由前置检查、合法性校验逻辑，以下是我写的一个简单路由
import Vue from 'vue'; import Router from 'vue-router'; // 路由懒加载 const getComponent = (name: string) => () => import(`./views/${name}.vue`); Vue.use(Router); const router = new Router({ routes: [ { path: 'https://www.jb51.net/', name: 'home', component: getComponent('home') }, { path: '/about', name: 'about', component: getComponent('about'), meta: { auth: true } }, { path: '*', name: 'not_fount', component: getComponent('notFount') } ] }); /** * 路由前置检查 */ router.beforeEach((to, from, next) => { // 合法性校验 if (to.meta.auth) { console.log('into auth'); next(); } next(); }); export default router;
api 设计
新建 service 文件夹用于存放api脚本，根据业务模块来划分文件，如用户相关的api一个文件、购买相关的一个文件， api.ts 是各模块api的集合，如下
// service/api.ts export { userApi } from './user'; export { buyApi } from './buy'; // service/user.ts export const userApi = { /** * 获取用户数据 */ userInfo: '/node_api/read/userInfo' }; // service/buy.ts export const buyApi = { /** * 购买 */ shoping: '/node_api/shop/buy' };
这么划分，是为了项目结构和业务结构都足够清晰，同时可以避免单文件过长的问题。
HTTP请求二次封装