目錄
前言
一、搭建環境
1.1、安裝Node.js
1.2、安裝Vite
二、項目創建
三、運行項目
四、集成Pinia
4.1、Pinia介紹
4.2、Pinia安裝
五、集成VueUse
5.1、vueuse簡介
5.2、vueuse安裝
六、集成Vant
6.1、Vant簡介
6.2、Vant安裝
前言
本專欄主要介紹如何使用Vue3+Vite+TS+Pinia+VueUse+Vant的技術棧來入門前端開發，由于今天是第一篇，咱們來點輕松的內容——搭建開發環境。
Vue3是一款前端開發框架，關于Vue3的學習可以參考文檔：Vue3文檔
Vite是一種前端構建工具，關于Vite的學習可以參考文檔：Vite文檔
TypeScript是一種編程語言，它是JavaScript的一個超集，學習TS可以參考：TypeScript文檔
一、搭建環境
1.1、安裝Node.js
首先，你需要安裝node.js，可以直接去官網下載：Node.js，根據自己所需的平臺按需下載：
如果你是Mac平臺，可以通過HomeBrew這個工具安裝，非常方便。安裝完了之后，可以通過以下命令查看node和npm的版本：
接著可以通過以下命令切換一下npm默認的源：
// 切換
npm config set registry https://registry.npmmirror.com
// 查看
npm config get registry
1.2、安裝Vite
安裝Vite可以參考官網的安裝說明：https://cn.vitejs.dev/guide/
下面咱們通過手動安裝的形式來操作，通過以下命令進行安裝：
// 安裝
npm install -g vite
npm install create-vite -g
// 查看
npm list -g
二、項目創建
上面的環境搭建好之后，咱們繼續來創建一個項目試試水。
首先進入到你想要創建項目的目錄下，然后使用npm init vite或者create-vite命令創建項目：
接著會出現一步一步的指令，我們只需要根據指令提示進行相應的操作即可，比如這里會讓你輸入項目名Project name、Package name，讓你選擇一個前端框架，讓你選擇一種開發語言等等，之后工具會自動創建項目直到創建完成：
然后我們進入到剛剛創建完成的項目目錄下，使用npm install命令來安裝依賴包：
三、運行項目
運行項目也很簡單，這里咱們通過執行npm run dev這個命令把項目運行起來：
這樣咱們的項目就運行起來了，那怎么查看效果呢？很簡單，把上面紅色框出來的這個地址放到瀏覽器中就可以看到效果啦：
好了，到這里你是不是以為今天的內容就結束了？No，咱們為了后續直接開發，所以再來為項目引入幾個后面需要用的庫，先別走，繼續往下看吧。
四、集成Pinia
4.1、Pinia介紹
Pinia是最新一代輕量級狀態管理插件，功能類似于Vuex。作為Vue.js生態中的狀態管理解決方案，其核心定位是提供響應式數據存儲和跨組件狀態共享能力。
Pinia的優點：
| 對比維度 | Pinia特性 | Vuex特性 |
| API設計 | Composition API風格 | Options API風格 |
| 類型支持 | 完善的TypeScript推斷 | 需額外配置 |
| 體積 | 很小 | 相對較大 |
| 模塊化 | 自動代碼拆分 | 需手動處理 |
| 擴展性 | 支持本地存儲/事務擴展 | 插件機制復雜 |
核心優勢包括：
- 簡化存儲定義：采用類組件式聲明語法
- 開發工具支持：完美兼容Vue DevTools
- 服務端渲染：原生SSR支持
- 性能優化：基于Vue3響應式系統構建
4.2、Pinia安裝
在項目中安裝Pinia：
- 執行安裝命令：在項目根目錄運行npm install pinia --save
- 驗證依賴：檢查package.json中是否新增對應版本號
- 存儲路徑：狀態管理文件應存放在src/store目錄下
咱們使用VSCode打開項目工程，在package.json文件中可以看到已經添加了pinia的依賴：
接著在src目錄下創建store文件夾，在store下創建index.ts文件，在文件中執行以下操作：
- 導入創建方法：從pinia引入defineStore函數
- 聲明狀態倉庫：通過defineStore創建并命名存儲實例
- 導出實例：將創建的狀態實例進行模塊化導出
代碼如下：
然后打開main.ts文件，在main.ts中引入上面創建的index.ts文件，并且執行以下操作：
- 實例化Vue應用：創建createApp返回的實例對象
- 掛載Pinia：通過.use(pinia)注入狀態管理插件
- 應用初始化：執行mount('#app')完成掛載
- 清理冗余代碼：移除舊版狀態管理相關引用
代碼如下：
五、集成VueUse
5.1、vueuse簡介
- VueUse是為Vue2和Vue3服務的一套Composition API常用工具集，是目前世界上star最高的同類庫之一。
- 主要功能是將原本不支持響應式的JavaScript API變得支持響應式，避免程序員重復編寫相關代碼。
- 本質是基于Composition API的函數集合工具包，支持更好的邏輯分離，可快速實現常見功能。
- 具體功能可通過VueUse官網查看。
5.2、vueuse安裝
- 安裝步驟：在項目工程目錄下執行npm install @vueuse/core命令
- 驗證安裝：package.json文件的dependencies中會新增@vueuse/core依賴項
六、集成Vant
6.1、Vant簡介
Vant是一個輕量可靠的移動端組件庫，于2017年開源。官方提供Vue2版本、Vue3版本及微信小程序版本，由設計團隊維護。
文檔參考：https://vant.pro/vant/#/zh-CN
6.2、Vant安裝
集成Vant需在項目根目錄下執行npm install vant?--save：
安裝后package.json的dependencies中會顯示Vant版本：
OK，今天的內容就到這里了，整體看下來還是很輕松的，下期再會！
