最近不忙，一直寫React，所以打算重溫一下Vue的東西，從創(chuàng)建項(xiàng)目開始，有興趣的可以了解一下。
先說(shuō)下前置條件：
node版本在18.3以上（vue2可能不需要這么高的版本）
輸入： node –v，查看node版本
一、基于vue-cli搭建
@vue/cli版本在4.5.0以上，vue2不需要，但是盡量使用高版本吧。
未安裝或版本過(guò)低，安裝或者升級(jí)你的@vue/cli
2ff85caf678f311b2f8d8d898b8acdb6.jpeg
輸入：npm install -g @vue/cli
1. 項(xiàng)目創(chuàng)建
vue create vue3_test
選擇 Vue3，babel, eslint，包管理器(pnpm，npm，yarn)。ps：鍵盤上下鍵控制選擇
E:\Workspace\FrontEndProject\Vue3Project>vue create vue3_test
Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: PNPM
Vue CLI v5.0.8
? Creating project in E:\Workspace\FrontEndProject\Vue3Project\vue3_test.
?? Initializing git repository...
?? Installing CLI plugins. This might take a while...
?? Invoking generators...
?? Installing additional dependencies...
? Running completion hooks...
?? Generating README.md...
?? Successfully created project vue3_test.
?? Get started with the following commands:
$ cd vue3_test
$ pnpm run serve
2、項(xiàng)目啟動(dòng)
輸入：cd vue3_test 到達(dá)項(xiàng)目根目錄 輸入：`pnpm run serve` 啟動(dòng)項(xiàng)目
7c1146f753e96fff62098095d4391044.jpeg
二、基于vite搭建（推薦）
vite 是新一代前端構(gòu)建工具，vite的優(yōu)勢(shì)如下：
- 輕量快速的熱重載（HMR），能實(shí)現(xiàn)極速的服務(wù)啟動(dòng)。
- 對(duì) TypeScript、JSX、CSS 等支持開箱即用。
- 真正的按需編譯，不再等待整個(gè)應(yīng)用編譯完成。
1. 項(xiàng)目創(chuàng)建
輸入項(xiàng)目創(chuàng)建命令 pnpm create vite
輸入項(xiàng)目名字，選擇vue框架，TypeScript
E:\Workspace\FrontEndProject\Vue3Project>pnpm create vite
.../19130b8c8bd-60b8 | +1 +
.../19130b8c8bd-60b8 | Progress: resolved 1, reused 0, downloaded 1, added 1, done
√ Project name: ... vue3-test
√ Select a framework: ? Vue
√ Select a variant: ? TypeScript
Scaffolding project in E:\Workspace\FrontEndProject\Vue3Project\vue3-test...
Done. Now run:
cd vue3-test
pnpm install
pnpm run dev
2. 項(xiàng)目啟動(dòng)
輸入：cd vue3_test 到達(dá)項(xiàng)目根目錄
輸入：pnpm install 安裝項(xiàng)目所需依賴
輸入：pnpm run dev 啟動(dòng)項(xiàng)目
啟動(dòng)成功后出現(xiàn)地址 http://localhost:5173/ 復(fù)制到瀏覽器打開，或按住Ctrl鍵點(diǎn)擊命令行里的地址打開。
059104618a1963908a94d4cff8d2de8a.jpeg
三、通過(guò)create-vue搭建
1. 項(xiàng)目創(chuàng)建
輸入項(xiàng)目創(chuàng)建命令 pnpm create vue@latest
輸入項(xiàng)目名字，根據(jù)需求安裝插件，沒(méi)安裝的插件后面在項(xiàng)目中也可以手動(dòng)安裝
ps：鍵盤左右選擇 是/否
E:\Workspace\FrontEndProject\Vue3Project>pnpm create vue@latest
.../19130c78fdf-37c8 | +1 +
.../19130c78fdf-37c8 | Progress: resolved 1, reused 0, downloaded 1, added 1, done
Vue.js - The Progressive JavaScript Framework
√ 請(qǐng)輸入項(xiàng)目名稱： ... vue3-test
√ 是否使用 TypeScript 語(yǔ)法？ ... 否 / 是
√ 是否啟用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 進(jìn)行單頁(yè)面應(yīng)用開發(fā)？ ... 否 / 是
√ 是否引入 Pinia 用于狀態(tài)管理？ ... 否 / 是
√ 是否引入 Vitest 用于單元測(cè)試？ ... 否 / 是
√ 是否要引入一款端到端（End to End）測(cè)試工具？ ? 不需要
√ 是否引入 ESLint 用于代碼質(zhì)量檢測(cè)？ ... 否 / 是
√ 是否引入 Prettier 用于代碼格式化？ ... 否 / 是
√ 是否引入 Vue DevTools 7 擴(kuò)展用于調(diào)試? (試驗(yàn)階段) ... 否 / 是
正在初始化項(xiàng)目 E:\Workspace\FrontEndProject\Vue3Project\vue3-test...
項(xiàng)目初始化完成，可執(zhí)行以下命令：
cd vue3-test
pnpm install
pnpm dev
2. 項(xiàng)目啟動(dòng)
輸入：cd vue3_test 到達(dá)項(xiàng)目根目錄
輸入：pnpm install 安裝項(xiàng)目所需依賴
輸入：pnpm run dev 啟動(dòng)項(xiàng)目
啟動(dòng)成功后出現(xiàn)地址 http://localhost:5173/， 復(fù)制到瀏覽器打開，或按住Ctrl鍵點(diǎn)擊命令行里的地址打開
6a5f8d7b7443b8f0d682aedcb2060476.jpeg
