教程的開始 各位同學(xué)請先安裝node、npm、vuecli4 巴拉巴拉...

廢話不多說立即開始

隨便找個地方 cmd，powerShell也可以 命令行走起

1. 創(chuàng)建vue項目 隨便起個名字就叫my-vue吧，傻瓜式回車鍵就行，也可以根據(jù)自己的喜好選擇eslint。

vue create my-vue

2. vue項目創(chuàng)建成功，看到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

創(chuàng)建router文件夾加入index.js引入vue-router，然后在main.js引入路由index.js文件。

import Vue from 'vue' import VueRouter from 'vue-router'Vue.use(VueRouter)

• vue項目管理器安裝

vue項目管理器是可視化安裝方法 鼠標(biāo)隨便點選幾下就可以安裝自己想要的插件 不需要cmd輸入命令行 非常舒服。

cd 到my-vue根目錄命令行輸入vue ui彈出localhost窗口。在窗口找vant、router、vue、vuex安裝即可。

安裝完成以后你的目錄會變成這個樣子。

教程到這里就開始配置vant 移動端適配吧。當(dāng)然不需要vant的同學(xué)就不要安裝vantUI了，此教程是針對移動端適配，pc端需要其他組件庫的話請自行安裝 eg: ElementUI、iViewUi等。

4.移動端適配

postcss-pxtorem 是一款 postcss 插件，用于將單位轉(zhuǎn)化為 rem；

lib-flexible 用于設(shè)置 rem 基準(zhǔn)值；

npm安裝postcss-pxtorem 、lib-flexible 。

項目根目錄創(chuàng)建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調(diào)整手機型號查看效果吧

隨便切換，隨便隨便隨便....

文章轉(zhuǎn)自Yao

Yblog?www.samefamily.cn

總結(jié)

以上是生活随笔為你收集整理的vant 项目_vueCli4+vant+router+vuex+移动端适配的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。