当前位置：首页 > VUE

vue项目实现方法

2026-02-18 15:33:34VUE

Vue 项目实现方法

初始化项目

使用 Vue CLI 或 Vite 创建项目。Vue CLI 适用于传统项目，Vite 适合现代轻量级项目。

# 使用 Vue CLI
npm install -g @vue/cli
vue create project-name

# 使用 Vite
npm create vite@latest project-name --template vue

项目结构

典型 Vue 项目结构包含以下目录和文件：

src/：源代码目录
- main.js 或 main.ts：入口文件
- App.vue：根组件
- components/：存放可复用组件
- views/ 或 pages/：存放页面级组件
- router/：路由配置
- store/：状态管理（如 Vuex 或 Pinia）
- assets/：静态资源
- styles/：全局样式

路由配置

使用 Vue Router 实现页面导航。安装并配置路由：

npm install vue-router

在 src/router/index.js 中配置路由：

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

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: () => import('../views/About.vue') }
]

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

export default router

状态管理

使用 Pinia（推荐）或 Vuex 管理全局状态。以 Pinia 为例：

npm install pinia

在 src/main.js 中引入 Pinia：

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

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

创建 Store 文件（如 src/store/counterStore.js）：

import { defineStore } from 'pinia'

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

组件开发

单文件组件（SFC）结构包含 <template>、<script> 和 <style> 三部分：

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

<script setup>
import { ref } from 'vue'
import { useCounterStore } from '@/store/counterStore'

const message = ref('Hello Vue!')
const counterStore = useCounterStore()
const { count } = storeToRefs(counterStore)
const { increment } = counterStore
</script>

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

API 调用

使用 Axios 或 Fetch 进行 HTTP 请求。以 Axios 为例：

npm install axios

封装 API 请求（如 src/api/index.js）：

import axios from 'axios'

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
})

export const fetchData = () => api.get('/data')