ToB企服应用市场:ToB评测及商务社交产业平台

标题: 初学vue3心得 [打印本页]

---

作者: 火影    时间: 2025-1-7 21:00
标题: 初学vue3心得
这几年经济形势不好,国外对程序员的要求不绝都是全栈,国内也逐步要求通才,作为一名后端算法工程师,最近在学vue3,以下是最近学习的一点心得:
所有的npm install命令前面一定要改成cnpm install,提高速度
在main.js中引入了import "element-plus/dist/index.css";这个全局样式之后,其他这个项目的所有的.vue文件都不需要再写style了,除非有自己自界说的style,

import "element-plus/dist/index.css";可以同时顺应手机端和电脑端

<style scoped>
/* 如果需要覆盖全局样式，可以在这里添加 */
</style>
这里scoped的意思是样式仅仅在当前.vue里生效,如果要改,就在这里改
如果没有 scoped，在 <style> 中界说的样式将会应用到整个项目中的所有组件，而不但仅是当前组件。
1.vueDevTools的关闭题目:
新建的vue项目,总是会出现及其烦人的DevTools,新手不知道怎么关,

这个东西一点开照旧一个弹窗,非常凡人,其实关闭方法很简单,在vite.config.js里把ueDevTools(),注释掉就行

2.vue3的项目,main.js是入口,使用element-plus组件,详细参考官网:
快速开始 | Element Plus
main.js里前11行代码都是写死的:src\main.js
注意:这里引入了:import "element-plus/dist/index.css";
这意味着其他所有地方的.vue文件不需要再写style了,只需要templatehe和script就行了

1. import { createApp } from "vue";
3. import App from "./App.vue";
5. import router from "./router";
7. import ElementPlus from "element-plus";
9. import "element-plus/dist/index.css";
13. const app = createApp(App);
17. app.use(ElementPlus);
19. app.use(router);
21. app.mount("#app");

复制代码

一定要在app.vue里面写好import { RouterLink, RouterView } from 'vue-router'
参考我的:src\App.vue

1. <script setup>
2. import { RouterLink, RouterView } from 'vue-router'
3. </script>
5. <template>
6.   <RouterView />
7. </template>
9. <style scoped>
10. </style>

复制代码

3.关于@的题目,在vue项目中,

这两个文件都配置了@就是src,然而它们的作用差别,

• jsconfig.json：仅在 IDE（如 VSCode）中生效，用于提升开辟体验和代码智能提示。
  
• vite.config.js：在现实运行和构建项目时生效，确保路径别名 @ 在运行时能够正确映射到 src 目录。
  

为什么需要同时配置？

• jsconfig.json：为了在 IDE 中提供更好的开辟体验。如果你不配置 jsconfig.json，VSCode 可能无法辨认 @ 别名，导致代码补全、错误检查等功能失效。
  
• vite.config.js：为了确保在现实运行和构建项目时，Vite 能够正确剖析 @ 别名，制止路径剖析错误。
  

4.一定要在src下新建api文件夹,然后里面写api,:

这里写的是后端的接口,还有axios拦截器也在这里写,参考我的src\api\index.js

1. import axios from 'axios';
3. // 创建 axios 实例
4. const service = axios.create({
5.     baseURL: 'http://127.0.0.1:8000', //  API 基础 URL
6.     timeout: 5000, // 请求超时时间
7. });
9. // 请求拦截器
10. service.interceptors.request.use(
11.     config => {
12.         // 检查是否需要添加 token，排除登录和注册接口
13.         if (config.url !== '/login' && config.url !== '/register') {
14.             const token = localStorage.getItem('token');
15.             if (token) {
16.                 config.headers['Authorization'] = `Bearer ${token}`;
17.             }
18.         }
19.         return config;
20.     },
21.     error => {
22.         console.error('请求错误:', error);
23.         return Promise.reject(error);
24.     }
25. );
27. // 响应拦截器
28. service.interceptors.response.use(
29.     response => {
30.         // 对成功响应的数据进行处理
31.         return response.data;
32.     },
33.     error => {
34.         // 对响应错误进行统一处理
35.         if (error.response) {
36.             const status = error.response.status;
37.             if (status === 401) {
38.                 // 令牌过期，跳转到登录页
39.                 console.log('令牌过期，跳转到登录页');
40.                 localStorage.removeItem('token');
41.                 window.location.href = '/login';
42.             } else if (status === 403) {
43.                 // 无权限访问
44.                 console.log('无权限访问');
45.             } else if (status === 500) {
46.                 // 服务器内部错误
47.                 console.log('服务器内部错误');
48.             } else {
49.                 // 其他错误
50.                 console.log('其他错误:', error.response.data.message);
51.             }
52.         } else if (error.request) {
53.             // 请求已发出，但未收到响应
54.             console.log('请求已发出，但未收到响应');
55.         } else {
56.             // 请求配置错误
57.             console.log('请求配置错误:', error.message);
58.         }
59.         return Promise.reject(error);
60.     }
61. );
63. // 定义登录接口
64. export function login(data) {
65.     return service({
66.         url: '/login', // 你的登录接口 URL
67.         method: 'post',
68.         data,
69.     }).then(response => {
70.         // 打印完整的响应对象
71.         console.log('登录响应:', response);
73.         // 尝试访问 access_token 之前，先检查 response.data 是否存在
74.         if (response) {
75.             console.log('响应数据:', response);
76.             // 登录成功后，将 token 存储到 localStorage
77.             const token = response.access_token;
78.             const userId = response.user_id;
79.             if (token) {
80.                 localStorage.setItem('token', token);
81.                 localStorage.setItem('userId', userId);
82.             } else {
83.                 console.warn('响应中没有 access_token');
84.             }
85.         } else {
86.             console.error('响应数据是 undefined');
87.         }
89.         return response; // 返回响应数据
90.     }).catch(error => {
91.         // 如果请求失败，也打印错误信息
92.         if (error.response) {
93.             // 请求已发出，但服务器响应的状态码不在 2xx 范围内
94.             console.error('登录失败，服务器返回错误信息:', error.response.data);
95.             console.error('登录失败，服务器返回状态码:', error.response.status);
96.         } else if (error.request) {
97.             // 请求已发出，但没有收到任何响应
98.             console.error('登录失败，请求已发出但没有收到响应:', error.request);
99.         } else {
100.             // 发送请求时发生了某些问题
101.             console.error('登录失败，发送请求时发生错误:', error.message);
102.         }
104.         return Promise.reject(error);
105.     });
106. }
108. // 定义注册接口
109. export function register(data) {
110.     return service({
111.         url: '/register', // 你的注册接口 URL
112.         method: 'post',
113.         data,
114.     }).catch(error => {
115.         console.error('注册失败:', error);
116.         return Promise.reject(error);
117.     });
118. }

复制代码

5.router里面引用各个界面的地址:src\router\index.js

1. import { createRouter, createWebHistory } from "vue-router";
2. import LoginView from "../views/login/index.vue";
3. import RegisterView from "../views/register/index.vue";
4. import HomeView from "../views/home/index.vue";
6. const router = createRouter({
7.   history: createWebHistory(import.meta.env.BASE_URL),
8.   routes: [
9.     {
10.       path: "/login",
11.       name: "login",
12.       component: LoginView,
13.     },
14.     {
15.       path: "/",
16.       redirect: "/login", // 重定向到登录页面
17.     },
18.     {
19.       path: "/register",
20.       name: "register",
21.       component: RegisterView,
22.     },
23.     {
24.       path: "/home",
25.       name: "home",
26.       component: HomeView,
27.     },
28.   ],
29. });
31. export default router;

复制代码

6.只要在router里面注册过的页面,如/register,在任何地方,直接写:
<router-link to='/register'>注册账号</router-link>
即可跳转

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4