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 = {










