这几年经济形势不好,国外对程序员的要求一直都是全栈,国内也慢慢要求通才,作为一名后端算法工程师,最近在学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就行了

import { createApp } from "vue";import App from "./App.vue";import router from "./router";import ElementPlus from "element-plus";import "element-plus/dist/index.css";const app = createApp(App);app.use(ElementPlus);app.use(router);app.mount("#app");

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

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script><template><RouterView />
</template><style scoped>
</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

import axios from 'axios';// 创建 axios 实例
const service = axios.create({baseURL: 'http://127.0.0.1:8000', //  API 基础 URLtimeout: 5000, // 请求超时时间
});// 请求拦截器
service.interceptors.request.use(config => {// 检查是否需要添加 token，排除登录和注册接口if (config.url !== '/login' && config.url !== '/register') {const token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}}return config;},error => {console.error('请求错误:', error);return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use(response => {// 对成功响应的数据进行处理return response.data;},error => {// 对响应错误进行统一处理if (error.response) {const status = error.response.status;if (status === 401) {// 令牌过期，跳转到登录页console.log('令牌过期，跳转到登录页');localStorage.removeItem('token');window.location.href = '/login';} else if (status === 403) {// 无权限访问console.log('无权限访问');} else if (status === 500) {// 服务器内部错误console.log('服务器内部错误');} else {// 其他错误console.log('其他错误:', error.response.data.message);}} else if (error.request) {// 请求已发出，但未收到响应console.log('请求已发出，但未收到响应');} else {// 请求配置错误console.log('请求配置错误:', error.message);}return Promise.reject(error);}
);// 定义登录接口
export function login(data) {return service({url: '/login', // 你的登录接口 URLmethod: 'post',data,}).then(response => {// 打印完整的响应对象console.log('登录响应:', response);// 尝试访问 access_token 之前，先检查 response.data 是否存在if (response) {console.log('响应数据:', response);// 登录成功后，将 token 存储到 localStorageconst token = response.access_token;const userId = response.user_id;if (token) {localStorage.setItem('token', token);localStorage.setItem('userId', userId);} else {console.warn('响应中没有 access_token');}} else {console.error('响应数据是 undefined');}return response; // 返回响应数据}).catch(error => {// 如果请求失败，也打印错误信息if (error.response) {// 请求已发出，但服务器响应的状态码不在 2xx 范围内console.error('登录失败，服务器返回错误信息:', error.response.data);console.error('登录失败，服务器返回状态码:', error.response.status);} else if (error.request) {// 请求已发出，但没有收到任何响应console.error('登录失败，请求已发出但没有收到响应:', error.request);} else {// 发送请求时发生了某些问题console.error('登录失败，发送请求时发生错误:', error.message);}return Promise.reject(error);});
}// 定义注册接口
export function register(data) {return service({url: '/register', // 你的注册接口 URLmethod: 'post',data,}).catch(error => {console.error('注册失败:', error);return Promise.reject(error);});
}

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

import { createRouter, createWebHistory } from "vue-router";
import LoginView from "../views/login/index.vue";
import RegisterView from "../views/register/index.vue";
import HomeView from "../views/home/index.vue";const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: "/login",name: "login",component: LoginView,},{path: "/",redirect: "/login", // 重定向到登录页面},{path: "/register",name: "register",component: RegisterView,},{path: "/home",name: "home",component: HomeView,},],
});export default router;

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