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，直接书写代码

<style lang="scss" scoped>
@import "../../src/assets/css/base.scss";
.home{
	p{
		color: $color;
	}
}

</style>

错误整理：

 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 sass-loader@7.3.1 --save-dev
npm uninstall node-sass（卸载当前版本）
npm install node-sass@4.14.1

四、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);

  }));