基于vue-cli3.0构建功能完善的移动端架子，主要功能包括

工具打包扩展css:sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局跨域设置eslint设置内容交付网络引入路由设计、登录拦截axios、api设计状态管理状态管理项目地址： vue-cli3-H5

演示地址： https://zhouyupeng.github.io/vuecli3H5/#/

工具打包扩展

武-克利3 .*后目录结构大改，去除了以往的构建、配置文件夹，要实现配置的改动在根目录下增加vue.config.js进行配置

css:sass支持、normalize.css、_mixin.scss、_variables.scss

使用的钢性铸铁预处理器是萨斯，对于钢性铸铁混合，变量这里做了全局引入，并且引入normalize.css使超文本标记语言元素样式在跨浏览器上表现得的高度一致性

vue.config.js配置

css: { //是否使用钢性铸铁分离插件ExtractTextPlugin extract: true，//开启半铸钢钢性铸铁(Cast Semi-Steel)源图？sourceMap: false，//css预设器配置项//启用所有css /预处理器文件的半铸钢钢性铸铁(Cast Semi-Steel)模块modules: false，SAS : { data : ' @ import ' style/_ mixin。SCS '；@ import ' style/_变量。SCS '；'//全局引入} } }大众、雷姆布局

对于移动端适配方案使用的是网易新闻的方法，

使用大众雷姆布局

/**750px设计稿取1rem=100px为参照，那么超文本标记语言元素的宽度就可以设置为宽度： 7.5雷姆，于是超文本标记语言的font-size=deviceWidth/7.5 * */html { font-size : 13.33333 VW } @媒体屏幕和(最大宽度： 320 px){ html { font-size : 42.667 px；font-size : 13.33333 VW } } @媒体屏幕和(最小宽度： 321 px)和(最大宽度：360 px){ html { font-size : 48PX；font-size : 13.33333 VW } } @媒体屏幕和(最小宽度： 361px)和(最大宽度：375 px){ html { font-size : 50PX；font-size : 13.33333 VW } } @媒体屏幕和(最小宽度： 376 px)和(最大宽度：393 px){ html { font-size : 52.4PX；font-size : 13.33333 VW } } @媒体屏幕和(最小宽度： 394 px)和(最大宽度：412 px){ html { font-size : 54.93 px；font-size : 13.33333 VW } } @媒体屏幕和(最小宽度： 413 px)和(最大宽度：414 px){ html { font-size : 55.2PX；font-size : 13.33333 VW } } @媒体屏幕和(最小宽度： 415 px)和(最大宽度：480 px){ html { font-size : 64PX；font-size : 13.33333 VW } } @媒体屏幕和(最小宽度： 481 px)和(最大宽度：540 px){ html { font-size : 72PX；font-size : 13.33333 VW } } @媒体屏幕和(最小宽度： 541 px)和(最大宽度：640 px){ html { font-size : 85.33 px；font-size : 13.33333 VW } } @媒体屏幕和(最小宽度： 641 px)和(最大宽度：720 px){ html { font-size : 96PX；font-size : 13.33333 VW } } @媒体屏幕和(最小宽度： 721 px)和(最大宽度：768 px){ html { font-size : 102.4PX；font-size : 13.33333 VW } } @媒体屏幕和(最小宽度： 769 px){ html { font-size : 102.4PX；font-size : 13.33333 VW } } @媒体屏幕和(最小宽度： 769 px){ html { font-size : 102.4PX；# app { margin : 0 auto } } vue。配置。射流研究…配置

loader options 3360 { postss : {//这是雷姆适配的配置插件：[需要(' postss-px rem ')({ rem unit : 100 })]} }开发时跨域设置

devServer: { open: true，//启动服务后是否打开浏览器主机： '127.0.0.1 ',端口： 8088,//服务端口https: false，hotOnly: false，代理： ' https://easy-mock。com/'//设置代理}配置完后，本地开发环境的爱可信的基础地址要写为'' ,即空字符串。

发布到线上时如果前端代码不是和后台美国石油学会(美国石油协会)放在同源下的，后台还需做跨域处理，

eslint标准设置

const Router=新路由器({ routes :[{ path : '/'，名称： '家庭'，组件：首页，元： { auth: false，//是否需要登录保持Alive:为真//是否缓存组件} }，{ path: '/about '，name: 'about '，component :()=import(/* WebPACKchunk name : ' about ' */' ./查看/关于。vue ')，meta: { auth: true，keepAlive: true } }，{ path: '/login '，name: 'login '，component :()=import(/* webpackchunk name : ' log in ' */' ./查看/登录。vue ')，meta: { auth: false，keepAlive: true } }，{ path: '*，//未匹配到路由时重定向redirect: '/'，meta: { //auth: true，//keepAlive: true } } ]})//全局路由钩子函数对全局有效router.beforeEach((to，from，next)={ let auth=to。梅塔。auth let令牌=store。geters[' log in/token ']；if (auth) { //需要登录if(token){ next()} else { next({ name : ' log in }，查询： {重定向：到。path })} } else { next()})在自指的中设置是否需要登录以及是否缓存当前组件，

在router.beforeEac路由钩子函数中对登录权限判断，没有登录的跳到登录页面，并且把当前页面传过去，登录后跳回这个页面。

对于页面缓存的在app.vue里进行处理

保持活动路由器-查看v-if=' $ route。梅塔。保持活动状态/路由器视图/保持活动状态外部视图v-if='！$路线。梅塔。keepalive路由器-查看axios、api设计

对于爱可信的设计主要是请求拦截器，回应拦截器，以及获取，发布的二次封装

axios.defaults.timeout=12000 //请求超时时间axios。默认值。baseURl=进程。环境。vue _ APP _ BASE _ apiaxios。默认值。标题。post[' Content-Type ']=' application/x-www-form-URL编码；charset=UTF-8 '/邮政请求头的设置//axios请求拦截器axios。拦截器。请求。使用(配置={//可在此设置要发送的token let token=store。getter[' log in/token ']；标记(config.headers.token=token)指示器。' open('数据加载中)返回配置},错误={返回承诺。错误(error)})//axios响应拦截器axios。拦截器。回应。使用(响应={//如果返回的状态码为200,说明接口请求成功，可以正常拿到数据//否则的话抛出错误结合自身业务和后台返回的接口状态约定写响应拦截器指示器。关闭()。控制台。日志('响应'，响应)；if(响应。状态===200响应。数据。代码====0){返回Promise。resolve(response)} else { Toast({ message : response。数据。msg，位置： '中间'，持续时间： 2000 })；返回Promise.reject(response) }，错误={指示器。close()常量响应代码=错误。回应。状态开关(响应代码){//401:未登录案例401: break //404请求不存在案例404: Toast({ message: '网络请求不存在，位置： '中间'，持续时间： 2000 })；打破默认的： Toast({消息：错误。回应。数据。消息，位置：“中间”，持续时间： 2000 })；}返回承诺。拒绝(错误)})/** *封装得到方法，对应得到请求* @param {String} url [请求的全球资源定位器(统一资源定位符)地址] * @param {Object}参数[请求时携带的参数]*/函数get (url，params={ }){ 0返回新的承诺(解析，拒绝)={ axios .get(url，{ params: params }).然后(res={ resolve(res.data) }).catch(err={ reject(err。数据)})})}/* * *帖子方法，对应邮政请求* @param {String} url [请求的全球资源定位器(统一资源定位符)地址] * @param {Object}参数[请求时携带的参数]*/函数帖子(网址，参数){ 0返回新的承诺(解析，拒绝)={ axios .post(url，qs.stringify(params)).然后(res={ resolve(res.data) }).catch(err={ reject(err . data))})为了方便管理美国石油学会(美国石油协会)路径，这里把所以请求都放在了美国石油学会(美国石油协会)文件夹下，如

从" @/axios/http.js "函数getIndex(params){ return get('/mock/5cb 48 c 7ed 491 CD 741 c 54456 f/base/index '，params)}函数登录(参数){返回帖子('/mock/5cb 48 c 7ed 491 CD 741 c 54456 f/base/log in '，参数)}导入{ getIndex，login}其他

去除控制台。日志

装uglifyjs-web pack-插件插件

//上线压缩去除安慰等信息配置。插件。push(new UglifyJsPlugin({ uglifyooptions 3360 { compression : { warnings : false，drop_console: true，drop_debugger: false，pure _ funcs 3360[' console。日志']//移除console } }，sourceMap: false，parallel: true }))设置别名目录别名

在项目中经常会引用各个地方的文件，配置后可以更加方便的引入了

config.resolve.alias .set('assets '，' @/assets ').set('components '，' @/components ').set('view '，' @/view ').set('style '，' @/style ').set('api '，' @/api ').set('store '，' @/store ')环境变量和模式

在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一个环境可能都会有所差异，比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。env #在所有环境中加载。env.local #在所有环境中都被加载，但被git忽略。环境。[mode] #仅在指定模式下加载。环境。[模式]。local #只在指定模式下加载，但是git忽略了自定义变量VUE_APP_，两个特殊变量：

NODE _ ENV-可以是“开发”、“生产”或“测试”之一。具体值取决于应用程序运行的模式。BASE _ URL-将匹配vue.config.js中的baseUrl选项，即您的应用程序将部署到的基本路径。正如我们所定义的。包封/包围（动词envelop的简写）

NODE _ ENV=' development ' BASE _ URL='/' VUE _ APP _ BASE _ API=' . ENV . production

Node _ env=' production' base _ URL='。/' vue _ APP _ BASE _ API=' https://easy-mock.com/'In这个项目，可以用process.env.VUE_APP_*，比如process.env.VUE_APP_BASE_API来获取定义的值

全局引入过滤器

编写js中许多地方使用的过滤器并重用代码。

//过滤日期格式，传入时间戳，根据参数返回不同的格式。const formatTimer=function(val，hours){ if(val){ var datetime=new Date(val * 1000)var y=datetime . getfullyear()var M=datetime . getmonth()1 var d=datetime . getdate()var h=datetime . gethours()var M=datetime . getminutes()M=M=10？M : '0' M d=d=10？d : '0' d h=h=10？h : '0' h m=m=10？m : ' 0 ' m if(hours){ return y '-' m '-' d ' ' h ' : ' m } else { return y '-' m '-' d } }导出默认{format timer} main.js已引入

从“”导入筛选器。/filters/index//inject全局筛选器对象。按键(过滤器)。foreach (item={vue。过滤器(项目，过滤器[项目]))})

{{1555851774 | formatTimer()}}

在vue中使用mock.js

查看我以前的文章并点击我

Webpack-bundle-analyzer，wepback的可视化资源分析工具插件

它用于分析哪些模块引入了哪些代码，并有目的地优化代码

在打包环境中添加，并使用命令npm运行构建报告

if(process . env . NPM _ config _ report){ config . plugins . push(new bundlealyzer plugin())}

代码地址项目地址： vue-cli3-H5

演示地址：https://zhouyupeng.github.io/vuecli3H5/#/:

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。