安装cnpm的命令是:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i @vue/cli -g
安装成功后可以执行 vue -V (注意:-V 是大写) 查看vue版本号 来检测是否成功
vue init webpack vue_one(名字)
axios:npm install axios
vue-router:npm install vue-router --save
element-ui:npm i element-ui --save
VCharts:npm install v-echarts echarts --save
px和rem的转换 不想转换的px可以大写PX
安装postcss-pxtorem----------------------------------------------------
1)使用lib-flexible动态设置REM基准值(html标签的字体大小)
npm i amfe-flexible
然后在main.js中引入加载执行该模块
import 'amfe-flexible'
2)使用postcss-pxtorem将px转为rem
npm i postcss-pxtorem -D
没效果的话可以直接降级
npm i postcss-pxtorem@5.1.1
1)然后在项目根目录的package.json文件中添加(这样的话引入的外部css转换不了)
"postcss": {
"plugins": {
"autoprefixer": {
"browsers": [
"Android >= 4.0",
"iOS >= 7"
]
},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
]
}
}
},
2)或者在.postcssrc.js里添加(这样的话引入的外部文件可以转换)
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
]
}
2.utils文件夹下(没有就新建一个),新建一个rem.js
const baseSize = 37.5 //跟根目录postcsssrc.js中rootValue的值是一致的
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 375 宽的缩放比例,可根据自己需要修改。 vantUI使用的是375px页面宽,这里使用375px
const scale = document.documentElement.clientWidth / 375
// 设置页面根节点字体大小 最高为两倍图 即设计稿为750
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
main.js引入rem.js文件
import “utils/rem.js”
到此postcss-pxtorem设置结束(注意行内的style样式转换不了)