| 技術堆疊 |
開發工具：VSCode
代碼管理：Git
前端框架：Vue3
構建工具：Vite
路由：vue-router 4x
狀態管理：vuex 4x
AJAX：axios
UI庫：vant
資料模擬：mockjs
css預處理：sass
| 構建vue3專案 |
1,安裝 vite
以管理員身份打開cmd命令視窗，切換到要安裝專案的檔案夾
cd E:\code\web\myvue3
安裝 vite
npm init vite@latest
輸入專案名稱，
輸入包名稱，
選擇Vue（如果上下鍵不能選擇，就手動輸入選項，再回車），
選擇JavaScript，
創建完畢，
創建專案生成的檔案：
2,行vite + vue3專案
打開vscode，輸入兩條命令
cnpm insall #僅第一次運行前需要安裝
npm run dev
如果執行 npm run dev 命令的時候報錯類似 “\node_glotal\vue_sp1，因為在此系統上禁止運行腳本” 這種錯誤，
解決辦法：
以管理員身份打開 Windows PowerShell
輸入 set-ExecutionPolicy RemoteSigned
選擇Y 就可以了，
運行成功會輸出如下資訊：
將 Local：后面的Http地址輸入到瀏覽器地址欄里查看效果，
在 瀏覽器里運行出現上面的資訊，說明vue3 + vite 專案跑起來了，
3，安裝vue3依賴包
cnpm install vue-router@4 #配置路由 cnpm install vuex@next -S #配置狀態管理 cnpm i axios #安裝 axios cnpm install --save-dev sass #css預處理，可以不安裝 cnpm i mockjs -D #安裝mockjs，用于摸擬后端介面除錯，可以不安裝
4，安裝 vant
vue3專案安裝 vant
npm i vant -S #注意，要加 -S引數，否則package.json檔案不會添加依賴
5，vue3專案配置vant
import { createApp } from 'vue'
import App from './App.vue'
import vant from "vant"
import "vant/lib/index.css"
const app =createApp(App);
app.use(vant).mount('#app');
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547024.html
標籤：其他
上一篇：前端設計模式——迭代器模式