当前位置：首页 > VUE

vue实现指引

2026-01-14 00:35:21VUE

Vue 实现指引

安装 Vue

使用 npm 或 yarn 安装 Vue 的最新版本：

npm install vue

或

yarn add vue

创建 Vue 实例

在 HTML 文件中引入 Vue，并创建一个 Vue 实例：

<div id="app">
  {{ message }}
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

使用单文件组件

Vue 单文件组件（.vue）将模板、逻辑和样式封装在一个文件中：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue Component',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

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

使用 Vue CLI 或 Vite 搭建项目

Vue CLI 是官方提供的脚手架工具：

npm install -g @vue/cli
vue create my-project

Vite 是一个现代化的构建工具，支持 Vue：

npm create vite@latest my-vue-app --template vue

常用指令

Vue 提供了一系列指令用于绑定数据和操作 DOM：

v-bind：动态绑定属性
v-model：双向数据绑定
v-for：列表渲染
v-if / v-else：条件渲染
v-on：事件监听

示例：

<template>
  <div>
    <input v-model="inputText" placeholder="Type something">
    <p>{{ inputText }}</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button v-on:click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    handleClick() {
      alert('Button clicked!')
    }
  }
}
</script>

状态管理（Vuex/Pinia）

对于大型应用，可以使用 Vuex 或 Pinia 管理全局状态：

vue实现指引

npm install pinia

示例（Pinia）：

// stores/counter.js
import { defineStore } from 'pinia'

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

在组件中使用：

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

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

export default {
  setup() {
    const counter = useCounterStore()
    return { counter }
  }
}
</script>

路由（Vue Router）

使用 Vue Router 实现页面导航：

npm install vue-router

示例：

// router/index.js
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 中引入：

vue实现指引

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

组合式 API

Vue 3 引入了组合式 API，提供更灵活的代码组织方式：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

生命周期钩子

Vue 组件提供了一系列生命周期钩子：

<script>
export default {
  created() {
    console.log('Component created')
  },
  mounted() {
    console.log('Component mounted')
  },
  updated() {
    console.log('Component updated')
  },
  unmounted() {
    console.log('Component unmounted')
  }
}
</script>

组合式 API 中的生命周期钩子：

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

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

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

测试

使用 Vue Test Utils 进行组件测试：

npm install @vue/test-utils jest

示例测试：

import { mount } from '@vue/test-utils'
import Counter from '@/components/Counter.vue'

describe('Counter.vue', () => {
  it('increments count when button is clicked', async () => {
    const wrapper = mount(Counter)
    await wrapper.find('button').trigger('click')
    expect(wrapper.text()).toContain('1')
  })
})