一、环境准备
# Node.js >= 16 node -v # 创建项目 npm create vite@latest my-vue3-app -- --template vue cd my-vue3-app npm install npm run dev回到顶部
二、项目目录结构
src/ ├── api/ # API接口 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── composables/ # 组合式函数 ├── layouts/ # 布局组件 ├── router/ # 路由配置 ├── stores/ # Pinia状态管理 ├── utils/ # 工具函数 ├── views/ # 页面组件 ├── App.vue └── main.js回到顶部
三、安装必要依赖
npm install vue-router@4 pinia axios element-plus npm install -D unplugin-auto-import unplugin-vue-components回到顶部
四、配置路由
// router/index.js import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', component: () => import('@/layouts/MainLayout.vue'), children: [ { path: '', name: 'Home', component: () => import('@/views/Home.vue') }, { path: '/about', name: 'About', component: () => import('@/views/About.vue') }, ] }, { path: '/login', name: 'Login', component: () => import('@/views/Login.vue') } ] const router = createRouter({ history: createWebHistory(), routes }) export default router回到顶部
五、状态管理（Pinia）
// stores/user.js import { defineStore } from 'pinia' import { ref, computed } from 'vue' export const useUserStore = defineStore('user', () => { const token = ref(localStorage.getItem('token') || '') const userInfo = ref(null) const isLoggedIn = computed(() => !!token.value) function login(credentials) { // 登录逻辑 token.value = 'mock-token' localStorage.setItem('token', token.value) } function logout() { token.value = '' userInfo.value = null localStorage.removeItem('token') } return { token, userInfo, isLoggedIn, login, logout } })回到顶部
六、API封装
// utils/request.js import axios from 'axios' const service = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000 }) // 请求拦截器 service.interceptors.request.use( config => { const token = localStorage.getItem('token') if (token) config.headers.Authorization = `Bearer ${token}` return config }, error => Promise.reject(error) ) // 响应拦截器 service.interceptors.response.use( response => response.data, error => { if (error.response?.status === 401) { // token过期，跳转登录 } return Promise.reject(error) } ) export default service回到顶部
七、Setup语法糖使用
<script setup> import { ref, computed, onMounted } from 'vue' import { useUserStore } from '@/stores/user' const userStore = useUserStore() const count = ref(0) const doubled = computed(() => count.value * 2) function increment() { count.value++ } onMounted(() => { console.log('组件挂载完成') }) </script> <template> <div> <p>Count: {{ count }}, Doubled: {{ doubled }}</p> <button @click="increment">增加</button> </div> </template>回到顶部
八、常用组件示例
<!-- TableList.vue --> <script setup> defineProps({ data: { type: Array, default: () => [] }, loading: { type: Boolean, default: false } }) defineEmits(['row-click', 'delete']) </script> <template> <el-table :data="data" v-loading="loading" @row-click="$emit('row-click', $event)"> <slot /> </el-table> </template>回到顶部
九、性能优化技巧
- 路由懒加载：使用`() => import()`按需加载
- 组件懒加载：`defineAsyncComponent`
- KeepAlive：缓存组件状态
