当前位置：首页 > VUE

vue框架实现

2026-01-08 01:42:52VUE

Vue 框架实现方法

Vue 是一个渐进式 JavaScript 框架，适用于构建用户界面。以下是一些核心实现方法，涵盖基本使用、组件化、状态管理和优化技巧。

基本项目搭建

使用 Vue CLI 或 Vite 快速初始化项目：

npm init vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

或使用 Vite：

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

组件化开发

Vue 的核心思想是组件化，单文件组件（SFC）结构如下：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue!'
    }
  },
  methods: {
    handleClick() {
      alert('Button clicked!')
    }
  }
}
</script>

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

状态管理（Pinia/Vuex）

Pinia 是 Vue 官方推荐的状态管理库：

npm install pinia

在 main.js 中配置：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

定义 Store：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

在组件中使用：

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

<template>
  <button @click="counter.increment">
    Count: {{ counter.count }}
  </button>
</template>

路由管理（Vue Router）

安装 Vue Router：

npm install vue-router

配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在 main.js 中注册：

import router from './router'
app.use(router)

在组件中使用：

<template>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view />
</template>

响应式数据

Vue 3 使用 ref 和 reactive 管理响应式数据：

<script setup>
import { ref, reactive } from 'vue'

const count = ref(0)
const user = reactive({ name: 'Alice', age: 25 })

function increment() {
  count.value++
}
</script>

<template>
  <p>{{ count }}</p>
  <p>{{ user.name }}</p>
  <button @click="increment">Increment</button>
</template>

生命周期钩子

Vue 组件提供生命周期钩子：

<script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('Component mounted')
})

onUnmounted(() => {
  console.log('Component unmounted')
})
</script>