详细说明如何构建基于vue-cli3.0的全功能前端货架

上一篇文章写的是vue和typescript的集成，发现很多小伙伴对vue-cli搭建的项目很感兴趣，所以今天打算写的是如何在vue-cli3.0的架子上进一步完善和集成具有基本功能的前端架子，主要包括以下功能点：

Webpack打包扩展css:sass支持，normalize.css rem布局路由设计：惰性加载，预检查，有效性检查api设计请求正文设计-反重复提交vuex状态管理webpack打包扩展

vue-cli3最大的特点就是零配置。脚手架隐藏了与@vue\preload-webpack-plugin中的webpack相关的配置。默认配置可以满足大多数应用场景。好处是我们可以为折腾配置节省很多时间。对于初学者来说，webpack还是有点门槛的，新人可以多关注vue编码。缺点很明显，想要自定义自己的配置会有点麻烦。

检查当前网络包的详细配置

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

展开webpack配置

当我们想要修改或扩展webpack配置项时，可以在根目录中添加vue.config.js文件，并列出一个自己编写的简单栗子

//webpack扩展模块. exports={ base URL : ' production '==process . env . node _ env？/production-sub path/' : '/'，chainwebpack : config={ config . module。规则('图像')。使用(' url-loader ')。点击(选项=对象.分配(选项，{ limit : 500 })；}，devserver : { open : ' Darwin '==process . platform，//host: '0.0.0 '，port: 8088，https: false，hotOnly: false，//proxy: 'https://api .豆瓣.com '//string | Object proxy : ' http://localhost :3000 '/string | Object }，Lintons官方网站上对Vue.js开发的标准工具的介绍非常详细，还有中文版，非常容易理解。

Sass支持

style lang=' SCS '/style style lang=' SCS ' @ import。/资产/风格/app '；组件中使用了/style用户定义函数和mixin。暂时还没有找到全局引用的方法，只能在需要使用的组件文件中手动引用，如下

style lang=' scss ' @ import './资产/风格/功能'；@import./资产/风格/混搭'；rem { height : px 2 rem(187.5 px)；//用户定义函数}。咪咪{ @ include clear fix()；//自定义mixin}/style为了消除浏览器之间的差异，我们需要引入normalize.css

//app.scss@import '。/node _ modules/normalize . CSS/normalize '；//引用第三方normalize @ import ' custom _ normalize '；//自定义规范化布局

在移动端使用rem布局是一个不错的选择。因为我们在中使用了scss，所以我们可以使用函数来简化我们的重复计算。设计通常给出一个宽度为750px的双图，所以我们可以将基准设置为document . getelementsbytagname(' html ')[0]。style . font size=window.innerwidth/10' px '；然后编写一个转换函数，如下所示：

//_ functions . scss @ function px rem($ px){ $ rem : 75px；@ return($ px/$ rem)rem；}我们用的时候可以这样写。rem { height : px 2 rem(300 px)；//双图片下的宽度是300px，}转换成css。rem { height: 4rem}路由设计

它主要包括路由惰性加载、路由预检查和合法性检查逻辑。下面是我写的一个简单的路线

从“Vue”导入Vue从“vue路由器”导入路由器；//路由懒加载const GetComponent=(name : string)=)=import(`)./view/$ { name }。vue `)；使用路由器；const Router=new Router({ routes :[{ path : '/'，name: 'home '，component : getComponent(' home ')}，{ path: '/about '，name: 'about '，component : getComponent(' about ')，meta: { auth: true } }，{ path: '*，name: ' not _ fount '，component 3:路由前置检查*/router.beforeEach((to，from，next)={ //合法性校验if (to.meta.auth) { console.log('进入auth’)；next()；} next()；});导出默认路由器；美国石油学会(美国石油协会)设计

新建服务文件夹用于存放美国石油学会(美国石油协会)脚本，根据业务模块来划分文件，如用户相关的美国石油学会(美国石油协会)一个文件、购买相关的一个文件，api.ts是各模块美国石油学会(美国石油协会)的集合，如下

//服务/API。ts从“”导出{ UserAPI } ./user '；从""导出{ buyApi } ./buy '；//服务/用户。tsexport const UserAPI={/* * *获取用户数据*/UserInfo : '/node _ API/read/UserInfo ' }；//服务/购买。t export const buy API={/* * *购买*/shopping : '/node _ API/shop/buy ' }；这么划分，是为了项目结构和业务结构都足够清晰，同时可以避免单文件过长的问题。

超文本传送协议请求二次封装

发送超文本传送协议(超文本传输协议的缩写)我使用的是非常流行的axios，我在其基础上，稍微进行简单的封装，然后暴露请求对象供调用。二次封装主要是为了解决以下几个问题

简化参数，把一些常用参数都赋默认值，简化外部的使用，使得更加通用和利于排查问题。返回报文统一处理，我们通常需要对些高频的场景做相同的处理，如错误码、未登录等场景，可以在它提供的返回响应拦截器中，统一处理。防止重复提交，因为网络、后端处理的因素，有时接口响应会较慢，那么用户可能会在非常短的时间内，反复点击按钮，在第一次请求未返回的情况下，会再次发起新的请求，那么我们可以在爱可信提供的前置拦截器中搞点事情。关于防止重复请求这东东，我在以前的一篇文章有写过，前端防止用户重复提交射流研究…感兴趣的小伙伴可以看看。根据以上几点，下面是我封装的请求文件，思路都比较简单，就不多说啦

从“axios”导入axios从" qs "导入QS；const Axios=Axios。创建({ baseurls : '/'，timeout: 10000，responseType: 'json '，withCredentials: true，标头RS : { ' Content-Type ' : ' application/x-www-form-URL编码；charset=utf-8 ' } })；const CancelToken=axios .CancelTokenconst请求映射=新映射()；//请求前置拦截器axios。拦截。请求。使用(配置={//防重复提交常量键串=QS。stringify(对象。分配({ }，{ url: config.url，method: config.method }，config。数据))；if(RequestMap。get(KeyString)){//取消当前请求配置。CancelToken=new CancelToken((取消)={取消('请慢一点');});} requestMap.set(keyString，true)；Object.assign(config，{ _ KeyString : KeyString })；if(配置。方法==' post ' | | config。方法==' put ' | | config。方法===' delete '){//序列化配置。数据=QS。stringify(配置。数据)；}返回配置；},错误={返回承诺。拒绝(错误);});//返回响应拦截器axios。拦截。回应。使用(RES={//重置请求映射常量配置： any=RES . configrequestMap.set(配置. KeyString _ false)；if(RES . status===200){返回RES .数据；} //todo弹窗提示等控制台。日志(`请求错误：$ { RES } `)；},错误={返回{代码：-1 }；});/* * * @描述*请求* @ param url * @ param data * @ param method */const request=(URL : string，数据={}，方法=' post ')={ return Axios({ method，URL，数据，params 3360 method。touppercase()===' GET ' data })；};导出{请求}；状态管理状态管理

这里我根据业务模块来划分文件结构，如下图

分为首页模块和用户模块，每个模块都有自己独立的状态突变等，在商店。分时（同timesharing）中，引入各模块的文件，如下

从“Vue”导入Vue从“Vuex”导入Vuex从""导入索引“/索引模块/索引”；从""导入用户“/用户模块/用户”；vue。使用(Vuex)；导出默认的新Vuex .存储({ modules: { user，index } })；大家注意到这里有个store _ types.ts文件，这个文件主要是为了搭配分时（同分时)使用的，文件内容如下

导出枚举用户类型{ /** *模块名称*/'MODULE_NAME'='user '，/** *增加次数*/'ADD_COUNT'='addCount '，/** *计算属性-获取十倍的值*/' GET _ TEM _ COUNT '=' getten COUNT ' }在看下组件中的使用方式：

脚本lang='ts '从@/store/store _ type '导入{ UserType }；从“vue-property-decorator”导入{组件、道具、Vue、手表、发射器}；从“vuex-class”导入{操作、Getter、变体、命名空间、状态}；@Componentexport默认类试验扩展了vue { @ State(State=State[user type .模块名称].计数)公共fff！号；@Getter(`${UserType .MODULE_NAME}/${UserType .GET_TEM_COUNT} `)公共tenCount！号；@突变(`${UserType .MODULE_NAME}/${UserType .ADD_COUNT} `)公共addCount！任何；}/脚本虽然这么写的确有点绕，但有个好处，我们可以通过注释清晰知道方法和属性的说明

小结

以上是我根据自己工作中常见的场景来设计的，希望能对小伙伴能有帮助，其中设计不当的地方，欢迎小伙伴们在留言区一起探讨哈~也希望大家多多支持我们。