本次IDE使用Codebuddy，為方便前端學(xué)習(xí)使用live server插件方便web瀏覽
image.png
Vue3獲取
1、官方地址
https://unpkg.com/vue@3.5.20/dist/vue.global.js
2、CDN
* **Staticfile CDN（國內(nèi)）** : [https://cdn.staticfile.net/vue/3.0.5/vue.global.js](https://cdn.staticfile.net/vue/3.0.5/vue.global.js)
* **字節(jié)跳動 CDN（國內(nèi)）** : [https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js](https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js)
* **unpkg**：[https://unpkg.com/vue@3/dist/vue.global.js](https://unpkg.com/vue@3/dist/vue.global.js), 會保持和 npm 發(fā)布的最新的版本一致。
* **cdnjs** : [https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js](https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js)
demo0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例</title>
<script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
{{ message }}
</div>
<script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>
image.png
3、NPM 方法
需要nodejs環(huán)境
-
使用 create-vue（Vue3 官方工具）
npm init vue@latest
# 等同于
npm create vue@latest
image.png
其中，不同選項對應(yīng)如下
?? TypeScript
作用: 為 JavaScript 添加靜態(tài)類型檢查
優(yōu)勢: 提供更好的代碼提示、錯誤檢測、重構(gòu)支持
適用: 大型項目、團隊開發(fā)、需要更嚴格類型約束的項目
示例: let message: string = "Hello Vue"
?? JSX Support
作用: 支持在 Vue 中使用 JSX 語法（類似 React）
區(qū)別: Vue 默認使用模板語法，JSX 是另一種組件編寫方式
適用: 熟悉 React 的開發(fā)者，或偏好 JSX 語法的場景
?? Router (SPA development)
作用: Vue Router，用于單頁應(yīng)用的路由管理
功能: 頁面跳轉(zhuǎn)、路由守衛(wèi)、動態(tài)路由等
適用: 多頁面的單頁應(yīng)用
示例: /home, /about, /user/:id
?? Pinia (state management)
作用: Vue3 官方推薦的狀態(tài)管理庫（替代 Vuex）
功能: 全局狀態(tài)管理、數(shù)據(jù)共享
適用: 組件間需要共享復(fù)雜狀態(tài)的應(yīng)用
優(yōu)勢: 更簡單的 API，更好的 TypeScript 支持
?? Vitest (unit testing)
作用: 單元測試框架，專為 Vite 優(yōu)化
功能: 測試組件、函數(shù)的功能是否正確
適用: 需要保證代碼質(zhì)量的項目
特點: 快速、現(xiàn)代化的測試體驗
?? End-to-End Testing
作用: 端到端測試（通常是 Cypress 或 Playwright）
功能: 模擬用戶操作，測試完整的用戶流程
適用: 需要測試完整用戶體驗的項目
區(qū)別: 比單元測試更接近真實用戶使用場景
?? ESLint (error prevention)
作用: 代碼質(zhì)量檢查工具
功能: 發(fā)現(xiàn)潛在錯誤、統(tǒng)一代碼風(fēng)格
適用: 幾乎所有項目都建議使用
示例: 檢查未使用的變量、語法錯誤等
?? Prettier (code formatting)
作用: 代碼格式化工具
功能: 自動格式化代碼，保持一致的代碼風(fēng)格
適用: 團隊開發(fā)，保持代碼風(fēng)格統(tǒng)一
配合: 通常與 ESLint 一起使用
cd vue-project
npm install
npm run dev
當準備將應(yīng)用發(fā)布到生產(chǎn)環(huán)境時，運行：
npm run build
此命令會在 ./dist 文件夾中為你的應(yīng)用創(chuàng)建一個生產(chǎn)環(huán)境的構(gòu)建版本。關(guān)于將應(yīng)用上線生產(chǎn)環(huán)境的更多內(nèi)容
image.png
-
安裝 Vue CLI（傳統(tǒng)方式）圖形化界面
# 全局安裝 Vue CLI
npm install -g @vue/cli
# 安裝完成后就可以使用
vue ui
image.png
image.png
Vite（最現(xiàn)代的方式）
現(xiàn)在 Vue3 官方更推薦使用 create-vue 或 Vite。Vite 是一個 web 開發(fā)構(gòu)建工具，由于其原生 ES 模塊導(dǎo)入方式，可以實現(xiàn)閃電般的冷服務(wù)器啟動。
npm init vite-app <project-name>
cd vue-vite-project
npm install
npm run dev
當準備將應(yīng)用發(fā)布到生產(chǎn)環(huán)境時，運行：
npm run build
此命令會在 ./dist 文件夾中為你的應(yīng)用創(chuàng)建一個生產(chǎn)環(huán)境的構(gòu)建版本。關(guān)于將應(yīng)用上線生產(chǎn)環(huán)境的更多內(nèi)容
image.png
