项目名称（Project name）：默认是 vite-project，可自定义，我这里就用默认的了
框架选择（Select a framework）：支持Vue、React等等，咋们选择Vue
语言选择（Select a variant）：选择TypeScript
是否使用测试版（Use Vite 8 beta (Experinental)?）：选择No，当然也可以体验一下
是否安装pnpm并且运行项目（Install with pnpm and start now）：Yes

2、进入项目并且按照依赖

# 进入项目目录
cd vite-project

# 安装基础依赖
pnpm install

3、启动开发服务器

pnpm dev

三、安装配置pinia

Pinia 是 Vue 官方推荐的状态管理库，替代了 Vuex，用法更简洁。

1、安装Pinia

pnpm add pinia

2、配置Pinia（全局注册）

在 src 下创建 stores 目录，新建index.ts

代码如下：

// 导入 Pinia
import { createPinia } from "pinia";
// 创建Pinia实例
const pinia  = createPinia()
// 将创建好的实例导出
export default pinia

在项目的 src 目录下，找到 main.ts

修改代码如下：

//src/main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// Pinia
const pinia = './store' //导入Pinia


const app =  createApp(App)
app.use(pinia)//注册Pinia
app.mount('#app')

3、创建第一个Pinia Store

store文件下创建，userInfo.ts（以用户信息为例）

// 导入 defineStore函数
import { defineStore } from "pinia";

// 定义导出Store，命名规则usexxxxx
export const useUserInfo = defineStore("userinfo", {
  state: () => ({
    userName: "",
    sex: 0,
    age: 0,
  }),
  //   计算属性
  getters: {
    augmentAge: (state) => (age: number) => state.age + 1,
  },
  //   修改 state 的逻辑，支持同步/异步，类似 Vue 的 methods
  actions: {
    // 同步
    setSex() {
      this.sex = 1;
    },
    // 批量修改state
    resetInfo() {
      this.$patch({
        sex: 0,
        age: 0,
      });
    },
  },
});

4、在组件中使用Pinia

<template>
  <div>我是App.vue</div>
  <div>我的名字{{ userName }}</div>
  <div>我的性别{{ age }}</div>
  <div>我的年龄{{ sex }}</div>
 <button @click="setSex">切换我的性别</button>
 <button @click="addAge">年龄加1</button>
 <button @click="Reset">重置性别年龄</button>
</template>

<script setup lang="ts">
// 导入定义的Store
import { useUserInfo } from "./store/userInfo";
// 导入 pinia 的辅助函数（按需）
import { storeToRefs } from "pinia";
// 获取 Store 实例
const userInfo = useUserInfo();
// 方法1：使用 storeToRefs 解构
const { userName, age, sex } = storeToRefs(userInfo);

// 方法2：直接访问
// 调用 actions 中的方法
const setSex = () => {
  userInfo.setSex(1)
};


const addAge=()=>{
  userInfo.age +=1
  console.log(userInfo.augmentAge(userInfo.age));
}


const Reset =()=>{
  userInfo.resetInfo()
}

</script>

<style scoped></style>

四、路由配置

1、安装Vue-Router

pnpm install vue-router@4

2、创建路由

在项目src目录下，创建view和router文件夹

view：页面组件仓库（创建login.vue登录页)
router：路由配置中心(创建index.tx)

<!-- router/index.ts -->
import { createRouter, createWebHistory } from "vue-router";

import LOGIN from "../view/login.vue";

const routes = [
  {
    path: "/Login",
    name: "login",
    component: LOGIN,
  },
];

const router = createRouter({
    history:createWebHistory(),
    routes
})

export default router

3、全局注册路由

在项目src目录下main.ts中修改，修改如下

<!-- main.ts -->
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// Pinia
import  pinia from './store'//导入Pinia
// router
import router from './router'//导入router

const app =  createApp(App)
app.use(pinia)//注册Pinia
app.use(router)//注册router
app.mount('#app')

五、配置别名@/

用来替代冗长的相对路径（比如 ../），让代码中的导入路径更简洁规范

首先在项目根目录找到 vite.config.ts，引入 path 模块并配置 resolve.alias

然后在 tsconfig.json 中同步配置，否则 TS 会提示路径找不到

然后就可以在项目中使用@/来指向src目录

六、安装scss

我一直用scss，所以就用这个了

pnpm add scss

七、安装Axios

pnpm add axios

1、封装Axios

在项目sec目录下面新建api文件夹，并且在api文件夹下创建request.ts用来封装Axios

// 导入 axios 库
import axios from "axios";

/**
 * 创建 axios 实例并配置基础参数
 * axios.create() 会返回一个新的 axios 实例
 */
const request = axios.create({
  // 基础请求地址
  baseURL: "",
  // timeout: 5000, // 请求超时时间（毫秒）
  // headers: { 'Content-Type': 'application/json' } // 默认请求头
});

/**
 * 请求拦截器（请求发送前执行）
 * 作用：统一处理请求配置（如添加 token、设置请求头、加载动画等）
 */
request.interceptors.request.use(
  // 成功拦截：修改/补充请求配置
  (config) => {
    // 示例：请求发送前添加 token 到请求头（实际开发中可从本地存储获取）
    // const token = localStorage.getItem('token');
    // if (token) {
    //   config.headers.Authorization = `Bearer ${token}`;
    // }
    return config; // 必须返回配置对象，否则请求会中断
  },
  // 失败拦截：处理请求发送前的错误（如配置错误）
  (error) => {
    console.error("请求拦截器错误：", error);
    return Promise.reject(error); // 抛出错误，供后续 catch 处理
  },
);

/**
 * 响应拦截器（服务器返回响应后执行）
 * 作用：统一处理响应数据、统一捕获错误（如 401 未授权、500 服务器错误等）
 */
request.interceptors.response.use(
  // 成功拦截：处理正常响应（状态码 2xx）
  (response) => {
    // 示例：只返回响应体中的 data 部分，简化业务层调用
    // return response.data;
    return response; // 返回完整响应对象，供业务层使用
  },
  // 失败拦截：处理响应错误（如 4xx/5xx 状态码、网络错误等）
  (error) => {
    // 示例：根据不同错误类型给出统一提示
    if (error.response) {
      // 服务器返回了响应，但状态码不是 2xx
      const status = error.response.status;
      switch (status) {
        case 401:
          console.error("未授权，请重新登录");
          // 可添加跳转到登录页的逻辑
          break;
        case 403:
          console.error("权限不足，无法访问");
          break;
        case 404:
          console.error("请求地址不存在");
          break;
        case 500:
          console.error("服务器内部错误");
          break;
        default:
          console.error(`请求失败，状态码：${status}`);
      }
    } else if (error.request) {
      // 请求已发送，但未收到响应（如网络错误、超时）
      console.error("网络异常，请检查网络连接");
    } else {
      // 请求配置阶段出错
      console.error("请求配置错误：", error.message);
    }
    return Promise.reject(error); // 抛出错误，供业务层 catch 处理
  },
);

/**
 * 封装 GET/POST 请求方法
 * 目的：简化业务层调用，统一请求参数格式，无需重复处理 Promise
 */
export default {
  /**
   * GET 请求封装
   * @param path 请求路径（拼接在 baseURL 后，如 "/user/list"）
   * @param data 请求参数（会自动拼接到 URL 后，如 ?id=1&name=test）
   * @returns Promise 对象，业务层可通过 .then/.catch 处理结果
   */
  get: function (path: string, data: object) {
    return new Promise((resolve, reject) => {
      request
        .get(path, {
          params: data, // GET 请求的参数通过 params 传递
        })
        .then((response) => {
          resolve(response); // 请求成功，将结果返回给业务层
        })
        .catch((error) => {
          reject(error); // 请求失败，将错误返回给业务层
        });
    });
  },

  /**
   * POST 请求封装
   * @param path 请求路径（拼接在 baseURL 后，如 "/user/add"）
   * @param data 请求体参数（会以 JSON 格式发送到服务器）
   * @returns Promise 对象，业务层可通过 .then/.catch 处理结果
   */
  post: function (path: string, data: object) {
    return new Promise((resolve, reject) => {
      request
        .post(path, data) // POST 请求的参数直接作为第二个参数（请求体）
        .then((response) => {
          resolve(response); // 请求成功，将结果返回给业务层
        })
        .catch((error) => {
          reject(error); // 请求失败，将错误返回给业务层
        });
    });
  },
};

2、管理接口

例：在api文件下创建loginApi.ts(登录相关接口)，之后登录相关的接口写在这里，

import request from './request'

// 使用枚举管理接口

enum API {
  USER_LOGIN = '',
}
// 登录
export const login = (data:any) => request.get(API.USER_LOGIN, data)

3、启用 “erasableSyntaxOnly” 时，不允许使用此语法。

这个错误可以在tsconfig.node.json和tsconfig.app.json文件中将erasableSyntaxOnly改为false就可以了

4、使用接口

// 方法一
import { login,logout } from "@/api/loginApi";
const goLogin = async () => {
  let data = {};
  const result = await login(data);
};
// 方法二
import * as loginAppi from '@/api/loginApi'
const goLogin2 = async () => {
  let data = {};
  const result = await loginAppi.login(data);
};

八、Element-puls安装

pnpm install element-plus

1、完整引入

2、按需引入-自动导入（推荐）

element-puls官网，指南模块-快速这块有详细教程

pnpm install -D unplugin-vue-components unplugin-auto-import

收录于

笔记

标签

#笔记 #vite搭建 #vue3项目搭建 #Axios

vue3：vue3+vite+ts+pinia 输入名字后，这里出现了几个选项，不清楚都是干啥的，下来研究。经过测试不需要安装sass-loader，安装了会报错。查看url已经有参数了，，查看查询结果，生效，ok。参数要一致，不一致就会报错。问题得到处理，不报错了。阅读详情