当前位置：首页 > VUE

实现一个vue

2026-02-25 03:59:46VUE

创建Vue项目

使用Vue CLI快速初始化项目，确保已安装Node.js和npm/yarn。运行以下命令创建新项目：

npm install -g @vue/cli
vue create my-vue-project
cd my-vue-project
npm run serve

项目结构说明

典型Vue项目包含以下核心目录：

src/：主要开发目录
- main.js：应用入口文件
- App.vue：根组件
- components/：存放可复用组件
public/：静态资源目录
package.json：项目依赖配置

编写基础组件

创建单文件组件（.vue）包含三个部分：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">点击修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Message changed'
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

状态管理（Vuex）

对于复杂状态管理，安装Vuex：

npm install vuex

创建store实例：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

路由配置（Vue Router）

安装路由插件：

npm install vue-router

配置基本路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    }
  ]
})

响应式原理示例

Vue通过数据劫持实现响应式：

const data = { message: 'Hello' }
const vm = new Vue({
  data: data
})

console.log(vm.message === data.message) // true
vm.message = 'Changed'
console.log(data.message) // 'Changed'

生命周期钩子

常用生命周期示例：

export default {
  beforeCreate() {
    console.log('组件初始化前')
  },
  mounted() {
    console.log('DOM挂载完成')
  },
  updated() {
    console.log('数据更新导致DOM重新渲染')
  },
  destroyed() {
    console.log('组件销毁')
  }
}

组件通信方式

父子组件通信示例：

<!-- 父组件 -->
<template>
  <ChildComponent :propData="parentData" @customEvent="handleEvent"/>
</template>

<!-- 子组件 -->
<script>
export default {
  props: ['propData'],
  methods: {
    triggerEvent() {
      this.$emit('customEvent', payload)
    }
  }
}
</script>

计算属性和侦听器

使用计算属性优化模板逻辑：

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  },
  watch: {
    firstName(newVal) {
      console.log('firstName changed to:', newVal)
    }
  }
}