初学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就行了

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 基础 URL
    timeout: 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', // 你的登录接口 URL
        method: 'post',
        data,
    }).then(response => {
        // 打印完整的响应对象
        console.log('登录响应:', response);

        // 尝试访问 access_token 之前，先检查 response.data 是否存在
        if (response) {
            console.log('响应数据:', response);
            // 登录成功后，将 token 存储到 localStorage
            const 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', // 你的注册接口 URL
        method: '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>
即可跳转