vue项目实现方法
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')构建与部署
开发模式运行：
npm run dev生产环境构建：
npm run build部署时可将 dist/ 目录内容上传至静态服务器或配置服务器路由（如 Nginx）。
插件与工具
常用 Vue 生态工具：
- UI 库：Element Plus、Vuetify、Quasar
- 表单验证：VeeValidate
- 动画：VueUse Motion
- 测试：Vitest + Vue Test Utils
- 国际化：vue-i18n
性能优化
- 代码分割：路由懒加载
- 按需导入组件/库
- 使用
v-once和v-memo减少渲染开销 - 服务端渲染（SSR）如需 SEO：Nuxt.js
