Vue 3零基礎入門：從環境搭建到第一個組件

一、Vue 3簡介

Vue.js是一款漸進式JavaScript框架，用于構建用戶界面。Vue 3是Vue的最新主要版本，于2020年9月發布，帶來了許多改進和新特性：

• 更快的渲染速度
• 更小的包體積
• Composition API（組合式API）
• 更好的TypeScript支持
• 新的響應式系統

二、環境搭建

1. 安裝Node.js

Vue開發需要Node.js環境，請先安裝Node.js（建議LTS版本）：

• 訪問 Node.js官網 下載安裝包
• 安裝完成后，在終端運行以下命令檢查是否安裝成功：

node -v
npm -v

2. 安裝Vue CLI

Vue CLI是Vue官方提供的腳手架工具，用于快速創建Vue項目：

npm install -g @vue/cli

安裝完成后檢查版本：

vue --version

3. 創建第一個Vue項目

使用Vue CLI創建新項目：

vue create my-first-vue-app

選擇Vue 3預設：

• 使用方向鍵選擇"Manually select features"
• 確保選中"Choose Vue version"和"Babel"
• 選擇Vue 3.x
• 其他選項按需選擇或保持默認

進入項目目錄并啟動開發服務器：

cd my-first-vue-app
npm run serve

訪問 http://localhost:8080 查看運行中的Vue應用。

三、項目結構解析

新創建的Vue項目主要目錄結構如下：

my-first-vue-app/
├── node_modules/    # 項目依賴
├── public/          # 靜態資源
│   ├── index.html   # 主HTML文件
│   └── favicon.ico  # 網站圖標
├── src/             # 源代碼目錄
│   ├── assets/      # 靜態資源(圖片、樣式等)
│   ├── components/  # Vue組件
│   ├── App.vue      # 根組件
│   └── main.js      # 應用入口文件
├── package.json     # 項目配置和依賴
└── README.md        # 項目說明

四、創建第一個組件

1. 組件基礎概念

在Vue中，組件是可復用的Vue實例，具有自己的模板、邏輯和樣式。組件可以嵌套使用，構成整個應用。

2. 創建HelloWorld組件

在src/components目錄下創建HelloWorld.vue文件：

<template><div class="hello"><h1>{{ greeting }}</h1><button @click="changeGreeting">改變問候語</button></div>
</template><script>
export default {name: 'HelloWorld',data() {return {greeting: '你好，Vue 3!'}},methods: {changeGreeting() {this.greeting = '歡迎來到Vue 3世界!'}}
}
</script><style scoped>
.hello {color: #42b983;text-align: center;margin-top: 20px;
}
button {padding: 8px 16px;background-color: #42b983;color: white;border: none;border-radius: 4px;cursor: pointer;
}
</style>

3. 在App.vue中使用組件

修改src/App.vue文件：

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld /></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

4. 運行效果

保存文件后，開發服務器會自動重新加載，你將看到：

• Vue logo圖片
• "你好，Vue 3!"的標題
• 一個按鈕，點擊后會改變問候語

五、Vue 3核心概念

1. 模板語法

Vue使用基于HTML的模板語法，允許開發者聲明式地將數據綁定到DOM：

<template><div><!-- 文本插值 --><p>{{ message }}</p><!-- 屬性綁定 --><a :href="url">鏈接</a><!-- 事件綁定 --><button @click="handleClick">點擊</button><!-- 雙向綁定 --><input v-model="inputText"></div>
</template>

2. 響應式數據

Vue 3使用Proxy實現響應式系統：

<script>
export default {data() {return {count: 0}},methods: {increment() {this.count++}}
}
</script>

3. 生命周期鉤子

Vue組件有一系列生命周期鉤子函數：

<script>
export default {beforeCreate() {console.log('組件實例剛被創建')},created() {console.log('組件實例創建完成')},mounted() {console.log('組件被掛載到DOM')},updated() {console.log('組件更新')},unmounted() {console.log('組件卸載')}
}
</script>

六、Composition API簡介

Vue 3引入了Composition API，這是一種新的編寫組件邏輯的方式：

<template><div><p>計數: {{ count }}</p><button @click="increment">增加</button></div>
</template><script>
import { ref } from 'vue'export default {setup() {const count = ref(0)function increment() {count.value++}return {count,increment}}
}
</script>

七、下一步學習建議

1. 深入學習Vue組件通信（props/emit）
2. 了解Vue路由（vue-router）
3. 學習狀態管理（Vuex或Pinia）
4. 探索更多Vue 3特性如Teleport、Suspense等
5. 實踐構建一個完整的Vue應用

通過這篇入門指南，你已經掌握了Vue 3的基本使用方法。繼續實踐和探索，Vue的世界還有更多精彩等待你去發現！