一、Vue 簡介
Vue（讀作 /vju?/，類似于“view”）是一款用于構建用戶界面的漸進式 JavaScript 框架。它易于上手，輕量高效，適合快速構建前端界面，廣泛應用于各類 Web 項目中。
二、Vue 安裝方式
2.1 直接通過 CDN 使用（適合入門學習）
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
或 Vue 3：
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
示例代碼：
<div id="app">{{ message }}</div>
<script>new Vue({el: '#app',data: {message: '你好，Vue！'}});
</script>
2.2 使用 Vue CLI（推薦生產項目）
安裝 Node.js
前往官網 https://nodejs.org/ 下載并安裝。
安裝 Vue CLI
npm install -g @vue/cli
驗證安裝：
vue --version
創建 Vue 項目
vue create my-project
cd my-project
npm run serve
訪問瀏覽器：http://localhost:8080
2.3 使用 Vite（快速開發推薦）
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev
三、Vue 項目結構說明（Vue CLI）
my-project/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ └── main.js
├── package.json
└── vue.config.js
四、基礎語法示例（Vue 2 / Vue 3）
<div id="app"><p>{{ message }}</p><input v-model="message">
</div><script>const app = new Vue({el: '#app',data: {message: '你好，Vue！'}});
</script>
五、常用指令
| 指令 | 功能說明 |
|---|---|
v-model | 雙向綁定 |
v-bind | 綁定屬性 |
v-if / v-else | 條件渲染 |
v-for | 列表循環 |
v-on / @ | 事件綁定 |
六、組件開發示例
<!-- HelloWorld.vue -->
<template><h2>{{ msg }}</h2>
</template><script>
export default {props: ['msg']
}
</script>
// App.vue
<template><HelloWorld msg="歡迎使用組件！"/>
</template><script>
import HelloWorld from './components/HelloWorld.vue'
export default {components: { HelloWorld }
}
</script>
七、常見問題
Q1: vue 命令未找到？
- 確保已安裝 Vue CLI，并且 npm 安裝路徑加入環境變量
Q2: 項目無法運行？
- 使用
npm install安裝依賴 - 檢查端口是否被占用，或使用
npm run dev -- --port=3000
八、學習資源推薦
- Vue 官網
- Vue CLI 文檔
- Vue 3 文檔
- 菜鳥教程 Vue 教程
本文由“小奇Java面試”原創發布，轉載請注明出處。
可以搜索【小奇JAVA面試】第一時間閱讀，回復【資料】獲取福利，回復【項目】獲取項目源碼，回復【簡歷模板】獲取簡歷模板，回復【學習路線圖】獲取學習路線圖。
