一、Vue2 項目環境搭建
1. 環境準備
- 安裝 Node.js:推薦使用 nvm 管理多版本 Node
# 安裝Node 16.20.2 nvm install 16.20.2 # 切換至指定版本 nvm use 16.20.2 # 驗證安裝 node -v && npm -v
- 安裝 Vue CLI 腳手架:
# 國內鏡像源安裝 npm install --registry=https://registry.npmmirror.com @vue/cli -g # 驗證安裝 vue -V
2. 創建項目
- 命令行方式:
vue create my-vue2-project # 選擇"Default (Vue 2)"模板或手動配置
- UI 界面方式:
vue ui
在瀏覽器打開的 UI 界面中,點擊 "創建項目",選擇路徑并配置選項。
3. 項目基本配置
在項目根目錄創建vue.config.js
:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({// 關閉代碼格式校驗lintOnSave: false,// 配置跨域代理devServer: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,pathRewrite: {'^/api': ''}}}},// 打包配置configureWebpack: {optimization: {splitChunks: {chunks: 'all'}}}
})
二、項目目錄結構解析
典型的 Vue2 項目結構如下:
my-vue2-project/
├── public/ # 靜態資源(HTML模板、圖標等)
├── src/
│ ├── assets/ # 樣式、圖片等資源
│ ├── components/ # 組件文件夾
│ ├── router/ # 路由配置
│ ├── store/ # Vuex狀態管理
│ ├── utils/ # 工具函數
│ ├── views/ # 頁面級組件
│ ├── App.vue # 根組件
│ └── main.js # 入口文件
├── .gitignore # Git忽略文件
├── babel.config.js # Babel配置
├── package.json # 依賴管理
└── README.md # 項目說明
三、組件化開發核心
1. 組件基本結構
一個 Vue 組件由三部分組成:
<template><div class="component-container"><!-- 模板層,只能有一個根元素 --><h3>{{ title }}</h3><p>內容:{{ content }}</p></div>
</template><script>
export default {name: 'ComponentName', // 組件名(首字母大寫)props: {title: {type: String,default: '默認標題'},content: {type: String,required: true}},data() {return {internalData: '組件內部數據'}},methods: {handleClick() {console.log('組件方法被調用')}},mounted() {console.log('組件掛載完成')}
}
</script><style scoped>
/* 樣式層,scoped確保樣式僅作用于當前組件 */
.component-container {padding: 16px;border: 1px solid #eee;
}
</style>
2. 組件注冊方式
- 局部注冊:在父組件中引入并注冊
<!-- 父組件 --> <template><div><HeaderComponent /><MainContent /></div> </template><script> // 1. 引入組件 import HeaderComponent from './components/Header.vue' import MainContent from './components/MainContent.vue'export default {components: {// 2. 注冊組件(可自定義標簽名)HeaderComponent, // 等價于 HeaderComponent: HeaderComponentMainContent} } </script>
- 全局注冊:在 main.js 中注冊
// main.js import Vue from 'vue' import App from './App.vue' import FooterComponent from './components/Footer.vue'// 全局注冊組件 Vue.component('FooterComponent', FooterComponent)new Vue({render: h => h(App) }).$mount('#app')
在任意組件中可直接使用:<FooterComponent />
3. 組件樣式隔離
通過scoped
屬性實現組件樣式私有化:
<style scoped>
/* 該樣式僅作用于當前組件 */
.button {background-color: #42b983;
}
</style>
若需使用 CSS Modules:
<style module>
/* 生成類名如 .button_1d823ab */
.button {color: white;
}
</style>
在模板中使用:
<button :class="$style.button">按鈕</button>
四、組件間通信機制
1. 父傳子(Props)
- 父組件傳遞數據:
<ChildComponent :title="pageTitle" :is-active="true" />
- 子組件接收 Props:
export default {props: {title: String,isActive: {type: Boolean,default: false},// 數組/對象類型的默認值需返回函數initialData: {type: Object,default() {return { count: 0 }}}} }
2. 子傳父(自定義事件)
- 子組件觸發事件:
methods: {sendDataToParent() {const data = { message: '子組件數據' }this.$emit('child-event', data)} }
- 父組件監聽事件:
<ChildComponent @child-event="handleChildData" />
methods: {handleChildData(data) {console.log('接收到子組件數據:', data)} }
3. 非父子組件通信(事件總線)
- 創建事件總線(EventBus.js):
import Vue from 'vue' export default new Vue()
- 發送數據組件:
import EventBus from '@/utils/EventBus'methods: {sendToOtherComponent() {EventBus.$emit('custom-event', { data: '跨組件數據' })} }
- 接收數據組件:
import EventBus from '@/utils/EventBus'created() {this.eventHandler = (data) => {console.log('接收到跨組件數據:', data)}EventBus.$on('custom-event', this.eventHandler) }, beforeDestroy() {// 銷毀時移除監聽,避免內存泄漏EventBus.$off('custom-event', this.eventHandler) }
五、組件引用與 Ref
通過ref
獲取 DOM 元素或子組件實例:
<template><div><!-- 引用DOM元素 --><input ref="inputElement" type="text"><!-- 引用子組件 --><ChildComponent ref="childComponent" /><button @click="focusInput">聚焦輸入框</button></div>
</template><script>
export default {methods: {focusInput() {// 獲取DOM元素并調用方法this.$refs.inputElement.focus()// 調用子組件方法this.$refs.childComponent.doSomething()}}
}
</script>
注意:$refs
在組件掛載后(mounted 鉤子)才能正確獲取,動態生成的 ref(如 v-for)會返回數組。