如何基于vue-cli3.0构建功能完善的移动端架子

2020-06-14 06:08:52易采站长站整理

html {
font-size: 85.33PX;
font-size: 13.33333vw
}
}

@media screen and (min-width: 641px) and (max-width:720px) {
html {
font-size: 96PX;
font-size: 13.33333vw
}
}

@media screen and (min-width: 721px) and (max-width:768px) {
html {
font-size: 102.4PX;
font-size: 13.33333vw
}
}

@media screen and (min-width: 769px) {
html {
font-size: 102.4PX;
font-size: 13.33333vw
}
}

@media screen and (min-width: 769px) {
html {
font-size: 102.4PX;

#app {
margin: 0 auto
}
}

vue.config.js配置


loaderOptions: {
postcss: {
// 这是rem适配的配置
plugins: [
require('postcss-px2rem')({
remUnit: 100
})
] }
}

开发时跨域设置


devServer: {
open: true, // 启动服务后是否打开浏览器
host: '127.0.0.1',
port: 8088, // 服务端口
https: false,
hotOnly: false,
proxy: 'https://easy-mock.com/' // 设置代理
}

配置完后,本地开发环境的axios的baseUrl要写为 ” ,即空字符串。

发布到线上时如果前端代码不是和后台api放在 同源 下的,后台还需做跨域处理,

eslint standard设置

使用的是 JavaScript standard 代码规范,一个好的编码风格它可以帮助减少团队之间的摩擦,代码阅读起来也更加清爽,更加可读性,不要觉得烦,用了都说好。

这是 JavaScript standard 代码规范的全文

自定义配置,在.eslintrc.js里修改,这里是我给出的配置,4个空格缩进,不检查结尾分号,关闭单var 声明,可自行配置


rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
indent: [
'error',
4,
{
SwitchCase: 1
}
],
semi: 0, // 不检查结尾分号,
// 强制使用单引号
quotes: ['error', 'single'],
// 关闭函数名与后面括号间必须空格规则
'space-before-function-paren': 0,
// 关闭var 声明,每个声明占一行规则。
'one-var': 0
}

cdn引入

对于 vue、vue-router、vuex、axios等等这些不经常改动的库、我们让webpack不对他们进行打包,通过cdn引入,可以减少代码的大小、也可以减少服务器的带宽

这里使用的是360的cdn,附上一份公共cdn评测文章 点我

vue.config.js配置


const externals = {