教程的开始 各位同学请先安装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