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 组件由三部分组成：

2. 组件注册方式

• 局部注册：在父组件中引入并注册

• 全局注册：在 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')
  

  
  在任意组件中可直接使用：

3. 组件样式隔离

通过scoped属性实现组件样式私有化：

若需使用 CSS Modules：

在模板中使用：

按钮

四、组件间通信机制

1. 父传子（Props）

• 父组件传递数据：

• 子组件接收 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)
    }
  }
  

• 父组件监听事件：

  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 元素或子组件实例：

注意：$refs在组件挂载后（mounted 钩子）才能正确获取，动态生成的 ref（如 v-for）会返回数组。