Vue开发整理：打包，移动端适配，scss安装
- 在vue-cli3.0中。去掉了build和config文件夹。所有的配置都放到了vue.config.js中（默认为空，如果没有这个文件在根目录自己新建一个）。
一、打包时路径和静态资源路径配置
1.router.js中更改base
const router = new VueRouter({
mode: 'history', //history需要后端配置路由路径，host带#号，用于本地开发
base: '/wx/', //两边都需要加/
routes: []
})
2.vue.config.js中增加
module.exports = {
publicPath: '/wx/static' //静态资源打包路径
productionSourceMap: false // 打包不生成Map文件
}
二.vue移动端适配
px：像素，1rem = 16px
rem：基于html（根元素）的字体大小
em：基于父级元素的字体大小
vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
%： 依赖于元素的祖先元素
解决方案：lib-flexible + postcss-plugin-px2rem
lib-flexible 用于设置 rem 基准值。由淘宝手机前端开发团队编写的。
postcss-plugin-px2rem是一款 postcss 插件，用于将css单位转化为 rem。
npm i lib-flexible --save
npm i postcss-plugin-px2rem --save
在main.js中导入依赖
import 'lib-flexible/flexible'
lib-flexible/flexible默认width>540时不适配，如果想继续适配，在/node_modules/lib-flexible/flexible.js中隐藏掉代码
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
// if (width / dpr > 540) { //隐藏的代码，width>540继续适配
// width = 540 * dpr;
// }
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
如果想适配的大屏幕尺寸是基于3840的设计稿，而要求最小范围是1980，最大为5760，那么我们要修改的则变为：
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr < 1980) {
width = 1980 * dpr;
} else if (width / dpr > 5760) {
width = 5760 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + ‘px’;
flexible.rem = win.rem = rem;
}
配置px2rem-loader
vue2.0中：在build文件中找到util.js，将px2rem-loader添加到cssLoaders中
vue3.0：在vue.config.js中配置
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 75, //换算基数 ，我在与lib-flexible配合使用时，设置75是750设计稿的基数，也就是设计稿宽度的1/10；默认100 ，网上说这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
//propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
},
less: {
javascriptEnabled: true,
}
}
}
}
上述文件设置之后需重启项目才能有效
如果不使用lib-flexible,可自定义配置
在main.js中配置font-size
// 基准大小 1rem为37.5px ，rootValue也设置为37.5，为750设计稿基数
const baseSize = 37.5
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
//或者设置屏幕宽度高于720时固定fontSize
// var oHtml = document.documentElement
// var aWidth = oHtml.getBoundingClientRect().width
// if (aWidth < 720) {
// oHtml.style.fontSize = aWidth / 15 + "px"
// } else {
// oHtml.style.fontSize = 720 / 15 + "px"
// }
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
在app.vue中配置全局样式
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #333;
}
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: 0 0;
text-rendering: auto;
font-family: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
/* 兼容ie10 img标签 */
img {
width: auto;
height: auto;
border: 0;
}
/* 兼容IE11的专用css代码 */
@media screen and(-ms-high-contrast:active), (-ms-high-contrast:none) {
.scrollbar{
/* 兼容火狐滚动条 */
scrollbar-width: none;
/* 兼容IE滚动条 */
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 100%;
-ms-content-zoom-limit-max: 500%;
-ms-scroll-snap-type: proximity;
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-ms-overflow-style: none;
overflow: auto;
}
}
全部配置完成后，px已经转化为rem单位，根据设计图尺寸设计好转化基数，然后即可使用px开发项目，如果有不想转换的px单位，用PX即可
三、vue脚手架使用scss
1.什么是CSS 预处理器？ SCSS是一种CSS预处理语言
定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS
2.SCSS和SASS 的区别
- 文件扩展名不同，文件后缀分别是“.scss”和“.sass”
- sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似；sass的安装和使用不细说了
- scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的鸿沟
3.脚手架npm安装
1)安装依赖
npm install sass-loader --save-dev
npm install node-sass --save-dev
(sass-loader依赖于node-sass，所以node-sass必须要安装)
2)全局使用scss变量
在asstes/css中新建base.scss
$color: red;
引用变量使用@import，直接书写代码
错误整理：
error in ./src/App.vue?vue&type=style&index=0&lang=scss&
Syntax Error: TypeError: this.getOptions is not a function
该错误是node-sass版本过高，建议下载安装低版本即可，npm直接安装为最新版本，在github上版本号也不是连续的，如有安装问题建议进入资源页面查看tag版本进行安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm uninstall sass-loader（卸载当前版本）
npm install [email protected] --save-dev
npm uninstall node-sass（卸载当前版本）
npm install [email protected]
四、vue启动报错
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则
五、vue创建项目3.0
直接在cmd中使用 vue init webpack + 项目名 方式为2.0项目
3.0项目使用vue ui 可视化脚手架创建项目，更简洁
六、vue axios设置请求头
在请求调用的方法之前执行
// axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
axios.interceptors.request.use(
function (config) {
config.headers.contentType = "application/x-www-form-urlencoded";
config.headers.openID = "oSO-84iJbdJZb6wUyu9H6YjCrLYQ";//自定义设置header字段
return config;
},
function (err) {
return Promise.reject(err);
}
);
如果是XMLHttpRequest，则在配置文件中自己设置
const XHR = new XMLHttpRequest()
XHR.setRequestHeader('wmsCookie','1')
axios同时请求两个接口
axios.all([
axios.get('https://api.github.com/xxx/1'),
axios.get('https://api.github.com/xxx/2')
])
.then(axios.spread(function (userResp, reposResp) {
// 上面两个请求都完成后，才执行这个回调方法
console.log('User', userResp.data);
console.log('Repositories', reposResp.data);
}));