一、环境准备# Node.js 16 node -v # 创建项目 npm create vitelatest 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-router4 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 pCount: {{ count }}, Doubled: {{ doubled }}/p button clickincrement增加/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 :datadata v-loadingloading row-click$emit(row-click, $event) slot / /el-table /template回到顶部九、性能优化技巧路由懒加载使用() import()按需加载组件懒加载defineAsyncComponentKeepAlive缓存组件状态
