Vue 3 项目开发实用文档#

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            # 入口文件

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>

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

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

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

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()

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

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
}