vueCli4+vant+router+vuex+移动端适配

教程的开始 各位同学请先安装node、npm、vuecli4 巴拉巴拉…

废话不多说立即开始

随便找个地方 cmd，powerShell也可以 命令行走起cool

  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输入命令行 非常舒服cool。

  cd 到my-vue根目录命令行输入vue ui弹出localhost窗口。在窗口找vant、router、vue、vuex安装即可

vue ui

  安装完成以后你的目录会变成这个样子。



   教程到这里就开始配置vant 移动端适配吧。当然不需要vant的同学就不要安装vantUI了，此教程是针对移动端适配，pc端需要其他组件库的话请自行安装 eg: ElementUI、iViewUi等。

4.移动端适配

    postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem；

    lib-flexible `在这里插入代码片`用于设置 rem 基准值；

npm安装postcss-pxtorem 、lib-flexible 。

项目根目录创建postcss.config.js文件即可 引入以下代码。这个地方可不能随便innocent

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调整手机型号查看效果吧cool

随便切换，随便随便随便…

如果不行欢迎致电
个人博客