使用vscode + vite + vue3+ vant 搭建vue3腳手架

開發工具：VSCode
代碼管理：Git
前端框架：Vue3
構建工具：Vite
路由：vue-router 4x
狀態管理：vuex 4x
AJAX：axios
UI庫：vant
數據模擬：mockjs
css預處理：sass

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');