教程的开始 各位同学请先安装node、npm、vuecli4 巴拉巴拉...
废话不多说立即开始
随便找个地方 cmd，powerShell也可以 命令行走起
1. 创建vue项目 随便起个名字就叫my-vue吧，傻瓜式回车键就行，也可以根据自己的喜好选择eslint。
vue create my-vue
2. vue项目创建成功，看到Successfully就可以run了。
⚓ Running completion hooks...� Generating README.md...� Successfully created project my-vue.� Get started with the following commands:$ cd my-vue$ npm run serve
3.安装vue-router vuex vant 这里讲两种安装方法，手动cmd安装、vue项目管理器安装
手动安装
npm install vue-router
创建router文件夹加入index.js引入vue-router，然后在main.js引入路由index.js文件。
import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)
vue项目管理器安装
vue项目管理器是可视化安装方法 鼠标随便点选几下就可以安装自己想要的插件 不需要cmd输入命令行 非常舒服。
cd 到my-vue根目录命令行输入vue ui弹出localhost窗口。在窗口找vant、router、vue、vuex安装即可。
安装完成以后你的目录会变成这个样子。
教程到这里就开始配置vant 移动端适配吧。当然不需要vant的同学就不要安装vantUI了，此教程是针对移动端适配，pc端需要其他组件库的话请自行安装 eg: ElementUI、iViewUi等。
4.移动端适配
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem；
lib-flexible 用于设置 rem 基准值；
npm安装postcss-pxtorem 、lib-flexible 。
项目根目录创建postcss.config.js文件即可 引入以下代码。这个地方可不能随便。
module.exports = {plugins: {autoprefixer: {browsers: ['Android >= 4.0', 'iOS >= 8'],},'postcss-pxtorem': {rootValue: 37.5,propList: ['*'],},},};
main.js引入lib-flexible。
import 'lib-flexible';
大功告成！！！
随便找个地方，随便写个div，随便加个width，height，background给个骚色儿。F12调整手机型号查看效果吧
随便切换，随便随便随便....
文章转自Yao
Yblog
