内容：node.js，vue-cli，vuex，axios，postcss-pxtorem，lib-flexible，vant ，babel-plugin-import
1.安装脚手架工具：
npm install -g @vue/cli
版本检测：vue -V
2.创建项目
vue init webpack projectname
3.安装vant
npm install vant -S
4.安装babel-plugin-import，此组件用于实现按需加载
npm i babel-plugin-import -D
babelrc中添加配置 ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true } ]
main.js中按需引入vant组件
import { DatetimePicker, Button, List } from 'vant';
// 挂载到vue实例上，使用vant组件
Vue.use(DatetimePicker)
.use(Button)
.use(List);
//使用组件<van-button type="primary">按钮</van-button>
5、rem像素适配，安装两个插件
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
npm install postcss-pxtorem --save-dev
在.postcssrc.js中的plugins添加配置
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
然后在项目中直接使用PX
.box{
300px;
}
浏览器中自动解析成rem
.box{
8rem
}
postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据<html>标签的font-size值来计算出结果，1rem=html标签的font-size值。
lib-flexible 用于设置 rem 基准值
npm i lib-flexible -S
在main.js中引入
import 'lib-flexible'
flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
注意事项（important）: 由于flexible会动态给页面header中添加<meta name='viewport' >标签，所以务必请把目录 public/index.html 中的这个标签删除！！！
温馨提示： remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
那为什么你在这里写成了37.5呢？？？那我们后面专门来讲！
之所以设为37.5，是为了引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem ，将remUnit的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。
文章部分来源于https://www.cnblogs.com/lml2017/p/9953429.html