Vue开发整理:打包,移动端适配,scss安装

本文详细介绍了Vue CLI3中项目的配置,包括打包时路径和静态资源路径的设置,移动端适配方案,如px转rem的配置,以及SCSS的使用步骤。此外,还提到了axios如何设置请求头,并解决了启动项目时可能出现的问题。通过这些配置,可以优化前端项目的开发流程和响应式设计。
摘要由CSDN通过智能技术生成
  • 在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);

  }));
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值