Vue--2、Vue2 項目配置與組件化開發

一、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)會返回數組。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/88143.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/88143.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/88143.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

虛幻基礎:函數的返回節點

能幫到你的話&#xff0c;就給個贊吧 &#x1f618; 文章目錄函數的返回節點&#xff1a;返回執行后的值返回執行后的值若不執行第一次 返回參數的默認值第二次 返回上一次執行值示例函數的返回節點&#xff1a;返回執行后的值 返回執行后的值 若不執行 第一次 返回參數的默…

FFmpeg 升級指北

近期我參與了部門底層庫依賴的 FFmpeg 從 3.4 升級至 7.0.2 的工作&#xff0c;在此分享一些經驗和遇到的 API 變動。 將 FFmpeg 升級到高版本后&#xff0c;編譯過程中遇到大量報錯是常態。這些錯誤通常源于 API 接口變更或結構體字段調整。此時不必驚慌&#xff0c;核心解決…

RISCV Linux 虛擬內存精講系列三 -- setup_vm()

在 Linux 使用虛擬地址前&#xff0c;需要先配置頁表&#xff0c;這就是 setup_vm() 的作用。然而&#xff0c;Linux 的頁表配置&#xff0c;并不是一次過完成的&#xff0c;分了兩個階段&#xff0c;如下&#xff1a;在 setup_vm() 中&#xff0c;主要初始化了&#xff1a;1. …

創客匠人:解析創始人 IP 打造的底層邏輯與知識變現路徑

在數字經濟時代&#xff0c;創始人 IP 的價值被不斷放大&#xff0c;而知識變現作為 IP 商業閉環的核心環節&#xff0c;正成為無數創業者探索的方向。創客匠人深耕知識付費領域多年&#xff0c;見證了大量創始人從 0 到 1 打造 IP 并實現變現的全過程&#xff0c;其背后的邏輯…

Visual Studio 2022 MFC Dialog 添加Toolbar及Tips提示

主要步驟&#xff1a;在主框架類中添加消息處理函數聲明在 OnCreate 函數中啟用工具欄提示在消息映射中注冊 TTN_NEEDTEXT 消息使用 OnToolTipText 函數實現自定義提示文本1.在主程序的.h文件中加入afx_msg BOOL OnToolTipText(UINT id, NMHDR* pNMHDR, LRESULT* pResult); 2.在…

2025Q2大模型更新匯總(大語言模型篇)

摘要 2025年Q2大語言模型更新匯總&#xff1a; Qwen3&#xff0c;Deepseek-R1-0528&#xff0c;Doubao-Seed-1.6, MiniMax-M1, GPT4.1/O3/O4&#xff0c;Claude4/Gemini2.5 Qwen3 ? 開源MOE模型&#xff0c; ? MOE模型&#xff1a;Qwen3-235B-A22B&#xff0c;Qwen3-30B-…

【STM32】定時器中斷 + 含常用寄存器和庫函數配置(提供完整實例代碼)

通用定時器基礎知識 參考資料:STM32F1xx官方資料:《STM32中文參考手冊V10》-第14章通用定時器 通用定時器工作過程: 時鐘選擇 計數器時鐘可以由下列時鐘源提供: ① 內部時鐘(CK_INT) ② 外部時鐘模式1:外部輸入腳(TIx) ③ 外部時鐘模式2:外部觸發輸入(ETR) ④ 內部觸…

集群Redis

文章目錄前言一、Redis主從復制配置1.1.配置文件redis_master.conf,redis_slave.conf1.2.啟動服務1.3.檢查成果二、Redis集群配置2.1.服務器40.240.34.91集群配置2.2.其它服務器xxx.92,xxx.93集群配置2.3.啟動服務2.3.啟動集群服務2.4.檢查成果三、優劣四、結束前言 提示&…

ORA-600 kokiasg1故障分析---惜分飛

故障總結:客戶正常關閉數據庫,然后啟動報ORA-600 kokiasg1錯誤,通過對啟動分析確認是由于IDGEN1$序列丟失導致,修復該故障之后,數據庫啟動成功,但是后臺大量報ORA-600 12803,ORA-600 15264等錯誤,業務用戶無法登錄.經過深入分析,發現數據庫字典obj$中所有核心字典的序列全部被刪…

[RPA] 影刀RPA基本知識

1.應用的構成一個應用&#xff1a;由多條指令疊加組成一條指令代表了一個操作動作許多條指令按照一定的邏輯關系編排起來&#xff0c;就構成了一個應用(這里的應用可理解為軟件機器人RPA)一個應用 多個自動化指令的集合 2. 指令的一般構成在XXX對象上&#xff0c;對XXX元素執行…

pytest中測試特定接口

在pytest中只測試特定接口有以下幾種常用方法&#xff1a; 1. 通過測試函數名精確匹配 直接指定測試文件和函數名&#xff1a; pytest test_api.py::test_upload_image_with_library這將只運行test_api.py文件中名為test_upload_image_with_library的測試函數。 2. 使用關鍵字匹…

HMI圖形渲染優化:OpenGL ES與Vulkan的性能對比實戰

HMI 圖形渲染優化&#xff1a;OpenGL ES 與 Vulkan 的性能對比實戰**摘要想讓 HMI 界面的圖形渲染又快又流暢&#xff0c;卻在 OpenGL ES 和 Vulkan 之間糾結不已&#xff01;用 OpenGL ES&#xff0c;擔心性能不夠強勁&#xff0c;無法滿足復雜場景需求&#xff1b;選 Vulkan&…

Python數據分析基礎01:描述性統計分析

下一篇&#xff1a; 《Python數據分析基礎04&#xff1a;預測性數據分析》 《Python數據分析基礎03&#xff1a;探索性數據分析》 《python數據分析基礎02&#xff1a;數據可視化分析》 《Python數據分析基礎01&#xff1a;描述性統計分析》 描述性統計分析是統計學中最基…

成員不更新項目進度,如何建立進度更新機制

項目成員不及時更新進度的主要原因包括責任不明確、缺乏更新規則、溝通機制不暢、進度意識薄弱、工具使用不當等。其中尤其需要關注的是建立清晰的進度更新規則。明確規定成員應何時、如何、向誰匯報進度情況&#xff0c;使得項目的每項任務都有責任人和明確的更新頻率及形式&a…

JVM 整體架構詳解:線程私有與線程共享內存區域劃分

Java 虛擬機&#xff08;JVM&#xff09;作為 Java 程序運行的基礎&#xff0c;其內存模型和線程結構設計直接影響著程序的執行效率和穩定性。本文將從 線程是否共享 的角度出發&#xff0c;對 JVM 的整體內存結構進行清晰分類與簡明解析。一、JVM 內存區域劃分概覽 根據是否被…

【Linux庖丁解牛】— 庫的理解與加載!

1. 目標文件編譯和鏈接這兩個步驟&#xff0c;在Windows下被我們的IDE封裝的很完美&#xff0c;我們?般都是?鍵構建?常?便&#xff0c; 但?旦遇到錯誤的時候呢&#xff0c;尤其是鏈接相關的錯誤&#xff0c;很多?就束??策了。在Linux下&#xff0c;我們之前也學 習過如…

QML事件處理:鼠標、拖拽與鍵盤事件

在QML應用開發中&#xff0c;用戶交互是構建動態界面的核心。本文將全面解析QML中的三大交互事件&#xff1a;鼠標事件、拖拽事件和鍵盤事件&#xff0c;通過實際代碼示例展示如何實現豐富的用戶交互體驗。一、鼠標事件處理1. MouseArea基礎MouseArea是QML中處理鼠標交互的核心…

MySQL 8.0 OCP 1Z0-908 題目解析(20)

題目77 Choose the best answer. Which step or set of steps can be used to rotate the error log? ○ A) Execute SET GLOBAL max_error_count . ○ B) Rename the error log file on disk, and then execute FLUSH ERROR LOGS. ○ C) Execute SET GLOBAL log_error ‘’…

八股學習(四)---MySQL

一、MySQL如何進行SQL調優&#xff1f;我的回答&#xff1a;面試官好&#xff01;我想從SQL語句本身和數據庫結構兩方面來做MySQL的SQL調優。首先會優化SQL寫法&#xff0c;比如避免用SELECT *、減少子查詢嵌套&#xff0c;用JOIN代替&#xff0c;還有合理使用索引&#xff0c;…

華中科大首創DNN衍射量子芯片登《Science Advances》:3D打印實現160μm3高維邏輯門

01 前言華中科技大學王健/劉駿團隊在《Science Advances》發表突破性研究&#xff0c;利用飛秒激光三維打印技術&#xff0c;制造出全球首個聚合物基超緊湊高維量子光芯片。該芯片僅160微米見方&#xff08;約頭發絲直徑的1.5倍&#xff09;&#xff0c;卻實現了光子空間模式的…