登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›vue3+vite+pinia+cass最新版本编写流程，无报红 ...

vue3+vite+pinia+cass最新版本编写流程，无报红

圄旧剖 2025-5-30 13:19:11
Vue Router，pinia插件安装和使用
npm install vue-router@4 pinia
新增src/router/index.ts
  1. // 引入Vue Router的核心方法与类型
  2. import { createRouter, createWebHistory } from 'vue-router'
  3. import type { RouteRecordRaw } from 'vue-router'
  6. // 定义所有路由规则，便于权限控制、自动化管理
  7. const routes: RouteRecordRaw[] = [
  8. <template>
  9.   <router-view />
  10. </template>{
  11. <template>
  12.   <router-view />
  13. </template><template>
  14.   <router-view />
  15. </template>path: '/',<template>
  16.   <router-view />
  17. </template><template>
  18.   <router-view />
  19. </template><template>
  20.   <router-view />
  21. </template><template>
  22.   <router-view />
  23. </template><template>
  24.   <router-view />
  25. </template><template>
  26.   <router-view />
  27. </template><template>
  28.   <router-view />
  29. </template><template>
  30.   <router-view />
  31. </template>// 首页路由
  32. <template>
  33.   <router-view />
  34. </template><template>
  35.   <router-view />
  36. </template>name: 'Home',
  37. <template>
  38.   <router-view />
  39. </template><template>
  40.   <router-view />
  41. </template>component: () => import('@/views/Home.vue'), // 懒加载，提升首屏性能
  42. <template>
  43.   <router-view />
  44. </template>},
  45. <template>
  46.   <router-view />
  47. </template>{
  48. <template>
  49.   <router-view />
  50. </template><template>
  51.   <router-view />
  52. </template>path: '/about',<template>
  53.   <router-view />
  54. </template><template>
  55.   <router-view />
  56. </template><template>
  57.   <router-view />
  58. </template><template>
  59.   <router-view />
  60. </template><template>
  61.   <router-view />
  62. </template> // 关于页路由
  63. <template>
  64.   <router-view />
  65. </template><template>
  66.   <router-view />
  67. </template>name: 'About',
  68. <template>
  69.   <router-view />
  70. </template><template>
  71.   <router-view />
  72. </template>component: () => import('@/views/About.vue'),
  73. <template>
  74.   <router-view />
  75. </template>},
  76. ]
  78. // 创建并导出router实例，统一在main.ts注册
  79. export const router = createRouter({
  80. <template>
  81.   <router-view />
  82. </template>history: createWebHistory(), // 使用HTML5 history模式，支持SEO与回退
  83. <template>
  84.   <router-view />
  85. </template>routes,
  86. })
复制代码
新增src/store/index.ts<template>
  <router-view />
</template> (mkdir -p src/store && touch src/store/index.ts)
  1. // 引入并创建Pinia实例，便于主入口集成
  2. import { createPinia } from 'pinia'
  4. // 导出Pinia实例
  5. export const pinia = createPinia()
复制代码
新增src/store/useUserStore.ts<template>
  <router-view />
</template><template>
  <router-view />
</template>(mkdir -p src/store && touch src/store/useUserStore.ts)
  1. // src/store/useUserStore.ts
  2. import { defineStore } from 'pinia'
  3. import http from '@/utils/http'
  4. import type { UserInfo } from '@/types/user'
  6. export const useUserStore = defineStore('user', {
  7. <template>
  8.   <router-view />
  9. </template>state: () => ({
  10. <template>
  11.   <router-view />
  12. </template><template>
  13.   <router-view />
  14. </template>name: '未登录用户' as string,
  15. <template>
  16.   <router-view />
  17. </template><template>
  18.   <router-view />
  19. </template>isLoggedIn: false as boolean,
  20. <template>
  21.   <router-view />
  22. </template>}),
  23. <template>
  24.   <router-view />
  25. </template>actions: {
  26. <template>
  27.   <router-view />
  28. </template><template>
  29.   <router-view />
  30. </template>async login(name: string) {
  31. <template>
  32.   <router-view />
  33. </template><template>
  34.   <router-view />
  35. </template><template>
  36.   <router-view />
  37. </template>// 演示写死，实际可以用 http.post 登录
  38. <template>
  39.   <router-view />
  40. </template><template>
  41.   <router-view />
  42. </template><template>
  43.   <router-view />
  44. </template>this.name = name
  45. <template>
  46.   <router-view />
  47. </template><template>
  48.   <router-view />
  49. </template><template>
  50.   <router-view />
  51. </template>this.isLoggedIn = true
  52. <template>
  53.   <router-view />
  54. </template><template>
  55.   <router-view />
  56. </template>},
  57. <template>
  58.   <router-view />
  59. </template><template>
  60.   <router-view />
  61. </template>logout() {
  62. <template>
  63.   <router-view />
  64. </template><template>
  65.   <router-view />
  66. </template><template>
  67.   <router-view />
  68. </template>this.name = '未登录用户'
  69. <template>
  70.   <router-view />
  71. </template><template>
  72.   <router-view />
  73. </template><template>
  74.   <router-view />
  75. </template>this.isLoggedIn = false
  76. <template>
  77.   <router-view />
  78. </template><template>
  79.   <router-view />
  80. </template>},
  81. <template>
  82.   <router-view />
  83. </template><template>
  84.   <router-view />
  85. </template>async fetchUser() {
  86. <template>
  87.   <router-view />
  88. </template><template>
  89.   <router-view />
  90. </template><template>
  91.   <router-view />
  92. </template>// 泛型声明：确保 data 是 UserInfo 类型
  93. <template>
  94.   <router-view />
  95. </template><template>
  96.   <router-view />
  97. </template><template>
  98.   <router-view />
  99. </template>const data = await http.get<UserInfo>('/user/info')
  100. <template>
  101.   <router-view />
  102. </template><template>
  103.   <router-view />
  104. </template><template>
  105.   <router-view />
  106. </template>this.name = data.name
  107. <template>
  108.   <router-view />
  109. </template><template>
  110.   <router-view />
  111. </template><template>
  112.   <router-view />
  113. </template>this.isLoggedIn = data.isLoggedIn
  114. <template>
  115.   <router-view />
  116. </template><template>
  117.   <router-view />
  118. </template>}
  119. <template>
  120.   <router-view />
  121. </template>}
  122. })
复制代码
新增<template>
  <router-view />
</template>src/views/AppHome.vue<template>
  <router-view />
</template><template>
  <router-view />
</template>(mkdir -p src/views && touch src/views/AppHome.vue)
  1. <template>
  2. <template>
  3.   <router-view />
  4. </template>
  5. <template>
  6.   <router-view />
  7. </template><template>
  8.   <router-view />
  9. </template><h1>首页</h1>
  10. <template>
  11.   <router-view />
  12. </template><template>
  13.   <router-view />
  14. </template><p>欢迎：{{ user.name }}</p>
  15. <template>
  16.   <router-view />
  17. </template><template>
  18.   <router-view />
  19. </template><button v-if="!user.isLoggedIn" @click="user.login('张三')">登录</button>
  20. <template>
  21.   <router-view />
  22. </template><template>
  23.   <router-view />
  24. </template><button v-else @click="user.logout()">登出</button>
  25. <template>
  26.   <router-view />
  27. </template><template>
  28.   <router-view />
  29. </template><button @click="refreshUser">刷新用户信息</button>
  30. <template>
  31.   <router-view />
  32. </template><template>
  33.   <router-view />
  34. </template><router-link to="/about">关于我们</router-link>
  35. <template>
  36.   <router-view />
  37. </template>
  38. </template>
复制代码
新增tsconfig.app.json
  1. {
  2. <template>
  3.   <router-view />
  4. </template>"compilerOptions": {
  5. <template>
  6.   <router-view />
  7. </template><template>
  8.   <router-view />
  9. </template>"baseUrl": ".",
  10. <template>
  11.   <router-view />
  12. </template><template>
  13.   <router-view />
  14. </template>"paths": {
  15. <template>
  16.   <router-view />
  17. </template><template>
  18.   <router-view />
  19. </template><template>
  20.   <router-view />
  21. </template>"@/*": ["src/*"]
  22. <template>
  23.   <router-view />
  24. </template><template>
  25.   <router-view />
  26. </template>}
  27. <template>
  28.   <router-view />
  29. </template>}
  30. }
复制代码
新增src/views/AppAbout.vue<template>
  <router-view />
</template><template>
  <router-view />
</template>(touch src/views/AppAbout.vue)
  1. <template>
  2. <template>
  3.   <router-view />
  4. </template>
  5. <template>
  6.   <router-view />
  7. </template><template>
  8.   <router-view />
  9. </template><h1>关于我们</h1>
  10. <template>
  11.   <router-view />
  12. </template><template>
  13.   <router-view />
  14. </template><p>本网站是由 Vue 3 + Vite + TypeScript 构建的现代前端项目。</p>
  15. <template>
  16.   <router-view />
  17. </template><template>
  18.   <router-view />
  19. </template><router-link<template>
  20.   <router-view />
  21. </template>to="/">返回首页</router-link>
  22. <template>
  23.   <router-view />
  24. </template>
  25. </template>
复制代码
新增vite.config.ts
  1. import path from 'path'<template>
  2.   <router-view />
  3. </template>// ← 这一行很重要！
  5. export default defineConfig({
  6. <template>
  7.   <router-view />
  8. </template>plugins: [vue()],
  9. <template>
  10.   <router-view />
  11. </template>resolve: {
  12. <template>
  13.   <router-view />
  14. </template><template>
  15.   <router-view />
  16. </template>alias: {
  17. <template>
  18.   <router-view />
  19. </template><template>
  20.   <router-view />
  21. </template><template>
  22.   <router-view />
  23. </template>'@': path.resolve(__dirname, 'src'),<template>
  24.   <router-view />
  25. </template>// 确保 __dirname 和 'src' 用对
  26. <template>
  27.   <router-view />
  28. </template><template>
  29.   <router-view />
  30. </template>},
  31. <template>
  32.   <router-view />
  33. </template>},
  34. })
复制代码
修改App.vue
  1. <template>
  2.   <router-view />
  3. </template>
复制代码
sass,axios插件的安装和使用,环境变量配置，跨域
安装
  1. npm install -D sass<template>
  2.   <router-view />
  3. </template><template>
  4.   <router-view />
  5. </template><template>
  6.   <router-view />
  7. </template><template>
  8.   <router-view />
  9. </template><template>
  10.   <router-view />
  11. </template># 只需安装 sass，Vite 已自动支持 .scss/.sassnpm install axios
复制代码
新建src/styles/_variables.scss<template>
  <router-view />
</template> (touch src/styles/_variables.scss)
  1. $primary-color: #42b983;
  2. $font-size-base: 16px;
复制代码
src/styles/global.scss<template>
  <router-view />
</template><template>
  <router-view />
</template><template>
  <router-view />
</template>(touch src/styles/global.scss<template>
  <router-view />
</template>)
  1. @use './variables' as *;body {<template>
  2.   <router-view />
  3. </template>font-size: $font-size-base;<template>
  4.   <router-view />
  5. </template>color: $primary-color;<template>
  6.   <router-view />
  7. </template>font-family: 'Roboto', Arial, sans-serif;<template>
  8.   <router-view />
  9. </template>margin: 0;}
复制代码
main.ts新增
  1. import './styles/global.scss'
复制代码
vite.config.ts新增
  1. <template>
  2.   <router-view />
  3. </template>css: {<template>
  4.   <router-view />
  5. </template><template>
  6.   <router-view />
  7. </template>preprocessorOptions: {<template>
  8.   <router-view />
  9. </template><template>
  10.   <router-view />
  11. </template><template>
  12.   <router-view />
  13. </template>scss: {<template>
  14.   <router-view />
  15. </template><template>
  16.   <router-view />
  17. </template><template>
  18.   <router-view />
  19. </template>additionalData: `@use "@/styles/variables.scss" as *;`<template>
  20.   <router-view />
  21. </template><template>
  22.   <router-view />
  23. </template><template>
  24.   <router-view />
  25. </template>}<template>
  26.   <router-view />
  27. </template><template>
  28.   <router-view />
  29. </template>}<template>
  30.   <router-view />
  31. </template>},
复制代码
新建src/utils/http.ts<template>
  <router-view />
</template><template>
  <router-view />
</template>(touch src/utils/http.ts),处理不当会报错("roperty 'isLoggedIn' does not exist on type 'AxiosResponse'.ts(2339)")
  1. import axios<template>
  2.   <router-view />
  3. </template>from 'axios'import type { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'const http = axios.create({<template>
  4.   <router-view />
  5. </template>baseURL: import.meta.env.VITE_API_BASE_URL,<template>
  6.   <router-view />
  7. </template>timeout: 10000,<template>
  8.   <router-view />
  9. </template>headers: { 'Content-Type': 'application/json' }})http.interceptors.request.use(<template>
  10.   <router-view />
  11. </template>config => config,<template>
  12.   <router-view />
  13. </template>error => Promise.reject(error))http.interceptors.response.use(<template>
  14.   <router-view />
  15. </template>(response: AxiosResponse) => {<template>
  16.   <router-view />
  17. </template><template>
  18.   <router-view />
  19. </template>if (response.data && typeof response.data === 'object' && 'data' in response.data) {<template>
  20.   <router-view />
  21. </template><template>
  22.   <router-view />
  23. </template><template>
  24.   <router-view />
  25. </template>return response.data.data<template>
  26.   <router-view />
  27. </template><template>
  28.   <router-view />
  29. </template>}<template>
  30.   <router-view />
  31. </template><template>
  32.   <router-view />
  33. </template>return response.data<template>
  34.   <router-view />
  35. </template>},<template>
  36.   <router-view />
  37. </template>(error: AxiosError) => Promise.reject(error))// 重点是这一行的泛型const get = (url: string, config?: AxiosRequestConfig): Promise => {<template>
  38.   <router-view />
  39. </template>return http.get(url, config)}const post = (url: string, data?: unknown, config?: AxiosRequestConfig): Promise => {<template>
  40.   <router-view />
  41. </template>return http.post(url, data, config)}export default { get, post }
复制代码
新建.env<template>
  <router-view />
</template>.env.production<template>
  <router-view />
</template><template>
  <router-view />
</template>(touch .env<template>
  <router-view />
</template> &&<template>
  <router-view />
</template> touch .env.production )
  1. VITE_API_BASE_URL=https://dev-api.example.com
  2. VITE_APP_TITLE=My Vite App
复制代码
  1. VITE_API_BASE_URL=https://prod-api.example.com
  2. VITE_APP_TITLE=My Vite App [PROD]
复制代码
修改vite.config.ts，新增
  1. <template>
  2.   <router-view />
  3. </template>server: {<template>
  4.   <router-view />
  5. </template><template>
  6.   <router-view />
  7. </template>proxy: {<template>
  8.   <router-view />
  9. </template><template>
  10.   <router-view />
  11. </template><template>
  12.   <router-view />
  13. </template>// 只要是 /api 开头的请求，代理到后端<template>
  14.   <router-view />
  15. </template><template>
  16.   <router-view />
  17. </template><template>
  18.   <router-view />
  19. </template>'/api': {<template>
  20.   <router-view />
  21. </template><template>
  22.   <router-view />
  23. </template><template>
  24.   <router-view />
  25. </template><template>
  26.   <router-view />
  27. </template>target: 'https://dev-api.example.com',<template>
  28.   <router-view />
  29. </template> // 后端接口地址<template>
  30.   <router-view />
  31. </template><template>
  32.   <router-view />
  33. </template><template>
  34.   <router-view />
  35. </template><template>
  36.   <router-view />
  37. </template>changeOrigin: true,<template>
  38.   <router-view />
  39. </template><template>
  40.   <router-view />
  41. </template><template>
  42.   <router-view />
  43. </template><template>
  44.   <router-view />
  45. </template>rewrite: path => path.replace(/^\/api/, ''),<template>
  46.   <router-view />
  47. </template><template>
  48.   <router-view />
  49. </template><template>
  50.   <router-view />
  51. </template>}<template>
  52.   <router-view />
  53. </template><template>
  54.   <router-view />
  55. </template>}<template>
  56.   <router-view />
  57. </template>},
复制代码
新建src/types/user.ts<template>
  <router-view />
</template><template>
  <router-view />
</template><template>
  <router-view />
</template>(mkdir -p src/types &&<template>
  <router-view />
</template>touch src/types/user.ts<template>
  <router-view />
</template>)
  1. // src/types/user.tsexport interface UserInfo {<template>
  2.   <router-view />
  3. </template>name: string<template>
  4.   <router-view />
  5. </template>isLoggedIn: boolean}
复制代码
总结:
数据流写法，先写http自定义请求，再写pinia连接口拿数据，之后写view层代码，写router层，（注册插件，代码结构，一般是会提前搞好）

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
圄旧剖
2025-5-30 13:19:11

0

粉丝关注

14

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫