先檢視本機有沒有安裝nodejs
win +r 進入控制台如果有版本號，則說明已安裝，否則需安裝 nodejs輸入 node -v 檢視 node版本資訊
再安裝vue cli（如果有就不用再安裝了）
npm install -g @vue/cli通過傳統方式建立專案
步驟一：
方式一：在專案資料夾下按shift + 滑鼠右鍵選擇在此處開啟 powershell 視窗（不同系統可能名字不同，我的是 win10 ，win7顯示的是在此處開啟命令視窗）
方式二：可以先通過vscode開啟專案資料夾，然後再按 ctrl + ~ 鍵開啟控制器，然後按後面步驟走
步驟二：
在新開的控制視窗輸入vue create 專案名，比如：vue create vueclidemo
哦豁~報錯了，這裡報錯的原因是專案名不能走駝峰，你可以用vue create vueclidemo或者vue create vuecli_demo建立專案，這裡我選擇vue create vuecli_demo
出現此頁面的時候說明咱們專案名沒問題了，正式進入相關配置選項了
步驟三：
步驟四：
安裝相關依賴，出現下圖，則說明專案已經建立完成
步驟五：
進入專案目錄cd vuecli_demo，啟動專案npm run serve，開啟網頁檢視專案，專案正常執行
在vscode中，通過 ctrl + ~組合鍵開啟 終端首先安裝模組外掛程式：輸入npm i vant -s
安裝vant
npm i babel-plugin-import -dps：babel-plugin-import 是一款 babel 外掛程式，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式
方式一： 在main.js檔案中引入，全域性使用
import from 'vant'vue.use(toast).use(button)方式二： 在頁面單獨引用，僅作用於此頁面預設按鈕
此方法引入的toast元件，使用方式：
this
.$toast();
預設按鈕
npm run serve成功啟動後如下圖：
安裝對應外掛程式
npm i postcss-pxtorem -s安裝了postcss-pxtorem 最新版，執行時如果報錯 「vant postcss 8 for end users」，請安裝 [email protected] 版本，暫時可行npm i amfe-flexible -s
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports =),
pxtorem()]}
}},};
import 'amfe-flexible'完成，可在瀏覽器測試
vue vant移動端適配vw rem
我的目錄結構是 assets scripts ulitsconst ulits if u.indexof iphone 1 if u.indexof windows phone 1 if deviceid return deviceid export default ulitsimport ulit...
vue vant開發之移動端rem適配螢幕方案
簡單介紹一下rem和px的換算關係 1rem html的font size。在專案中，我採用postcss pxtorem amfe flexible，vant是基於375px的。安裝 npm i amfe flexible npm i postcss pxtorem d amfe flexible...
Vue vant移動端處理彈窗不能滑動問題
自己在做專案開發時，使用vantui元件，在專案中遇到了彈窗元件裡面當內容過多時，會出現滾動卡頓或者不能滾動問題，開始一直以為是自己的樣式寫的有問題，檢查下來才發現並不是，而是彈窗元件的問題，於是找到了一下解放方式。分析原因 可能就是vantui元件版本太低了，低版本元件的問題。解決方法 公升級版本...