pxtorem

安装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样式转换不了)