Takina

书里总爱写到喜出望外的傍晚

浏览量：-，访问次数：-

时光⌛

☀️ 今天已经过去 0 / 24 小时

📆 本周已经过去 0 / 7 天

🌙 本月已经过去 0 / 0 天

⭐ 今年已经过去 0 / 0 天

📢 公告

谢谢你的浏览，我确实很拿得出手。

650 字

3 分钟

Vue3项目开发实用文档

2024-07-20

前端开发

Vue

/

前端

/

文档

浏览量：加载中...，访问次数：加载中...

📝 Vue 3 项目开发实用文档#

本文档总结了 Vue 3 项目开发中的常用实践与代码模板，包括项目结构建议、组件开发、路由与状态管理、请求封装等，适合中小型前端项目使用。

📂 1. 推荐项目结构#

建议使用 Vite 搭建项目，并采用如下目录结构：

1
src/
2
├── assets/            # 🖼 静态资源（图片、样式等）
3
├── components/        # 🔧 通用组件
4
├── views/             # 🖥 页面组件
5
├── layouts/           # 📐 页面布局组件
6
├── router/            # 🛣 Vue Router 配置
7
├── store/             # 🏪 状态管理（Pinia）
8
├── api/               # 📡 接口请求封装
9
├── utils/             # ⚙️ 工具函数
10
├── composables/       # 🔄 可复用逻辑（组合式函数）
11
├── App.vue            # 🌟 根组件
12
├── main.ts            # 🚀 入口文件

⚡ 2. 初始化项目#

1
npm create vite@latest my-app --template vue-ts
2
cd my-app
3
npm install

推荐使用 TypeScript 模板，并安装以下依赖：

1
npm install vue-router@4 pinia axios

🧩 3. 组件开发示例（组合式 API）#

1
<script setup lang="ts">
2
import { ref } from 'vue'
3

4
const count = ref(0)
5
function increment() {
6
  count.value++
7
}
8
</script>
9

10
<template>
11
  <button @click="increment">点击了 {{ count }} 次</button>
12
</template>

🌐 4. 路由配置（router/index.ts）#

1
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
2
import Home from '@/views/Home.vue'
3

4
const routes: RouteRecordRaw[] = [
5
  { path: '/', component: Home },
6
  { path: '/about', component: () => import('@/views/About.vue') },
7
]
8

9
const router = createRouter({
10
  history: createWebHistory(),
11
  routes,
12
})
13

14
export default router

在 main.ts 中注册：

1
import { createApp } from 'vue'
2
import App from './App.vue'
3
import router from './router'
4

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

🏪 5. 状态管理（store/index.ts）#

使用 Pinia 管理状态：

1
import { defineStore } from 'pinia'
2

3
export const useCounterStore = defineStore('counter', {
4
  state: () => ({ count: 0 }),
5
  actions: {
6
    increment() {
7
      this.count++
8
    }
9
  }
10
})

使用方式：

1
import { useCounterStore } from '@/store'
2
const counter = useCounterStore()
3
counter.increment()

在 main.ts 中注册 Pinia：

1
import { createPinia } from 'pinia'
2
createApp(App).use(createPinia())

📡 6. 请求封装（api/request.ts）#

1
import axios from 'axios'
2

3
const request = axios.create({
4
  baseURL: '/api',
5
  timeout: 5000,
6
})
7

8
request.interceptors.response.use(
9
  response => response.data,
10
  error => Promise.reject(error)
11
)
12

13
export default request

封装接口：

1
export function getUserInfo() {
2
  return request.get('/user/info')
3
}

⚙️ 7. 环境变量与路径别名#

Vite 中配置路径别名 vite.config.ts：

1
import { defineConfig } from 'vite'
2
import vue from '@vitejs/plugin-vue'
3
import path from 'path'
4

5
export default defineConfig({
6
  plugins: [vue()],
7
  resolve: {
8
    alias: {
9
      '@': path.resolve(__dirname, './src'),
10
    },
11
  },
12
})

使用环境变量 .env 文件：

1
VITE_API_BASE_URL=https://api.example.com

使用方式：

1
const baseURL = import.meta.env.VITE_API_BASE_URL

🎨 8. 样式建议#

全局样式写在 src/assets/styles/ 目录中。
推荐使用预处理器 SCSS：npm install -D sass
变量抽离到 variables.scss，在 main.ts 全局导入或按需使用

💡 9. 实用建议#

使用组合式 API（script setup）开发组件
页面间复用逻辑可拆分为 composables/ 目录
所有接口统一封装，便于管理和错误处理
推荐使用 ESLint + Prettier 保持代码规范

🔗 附录资源#