当前位置：首页 > VUE

用vue怎么实现

2026-02-18 09:48:24VUE

Vue 实现方法

安装与配置 Vue

确保已安装 Node.js 和 npm/yarn。通过以下命令创建 Vue 项目：

npm init vue@latest

选择需要的配置（如 Router、Pinia 等），完成后进入项目目录并安装依赖：

cd your-project-name
npm install

组件开发

在 src/components 目录下创建 .vue 文件。单文件组件结构示例：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
const message = "Hello Vue 3!";
</script>

<style scoped>
div {
  color: blue;
}
</style>

状态管理（Pinia）

安装 Pinia：

npm install pinia

在 main.js 中初始化：

import { createPinia } from 'pinia';
const pinia = createPinia();
app.use(pinia);

创建 store 文件（如 stores/counter.js）：

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">{{ counter.count }}</button>
</template>

路由配置

修改 src/router/index.js：

import { createRouter, createWebHistory } from 'vue-router';
const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/about', component: () => import('@/views/About.vue') }
];
const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router;

导航使用：

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

API 请求

使用 axios 示例：

npm install axios

封装请求：

// src/utils/request.js
import axios from 'axios';
const instance = axios.create({ baseURL: 'https://api.example.com' });
export default instance;

组件调用：

<script setup>
import request from '@/utils/request';
const fetchData = async () => {
  const res = await request.get('/endpoint');
  console.log(res.data);
};
fetchData();
</script>

响应式数据

Composition API 示例：

<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const doubled = computed(() => count.value * 2);
</script>
<template>
  <button @click="count++">{{ doubled }}</button>
</template>

生命周期钩子

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  console.log('Component mounted');
});
</script>

自定义指令

全局注册：

// main.js
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

使用：

<input v-focus />

插件开发

创建插件文件：

// plugins/hello.js
export default {
  install(app) {
    app.config.globalProperties.$hello = () => alert('Hello!');
  }
};

注册插件：

// main.js
import hello from '@/plugins/hello';
app.use(hello);

测试组件

使用 Vitest 示例：

npm install -D vitest @vue/test-utils

测试文件：

// tests/example.spec.js
import { mount } from '@vue/test-utils';
import Component from '@/components/Component.vue';
test('renders message', () => {
  const wrapper = mount(Component);
  expect(wrapper.text()).toContain('Hello');
});

用vue怎么实现