创建一个vue项目

一，新建一个项目
1，npm init vue@latest
2,vue create “name”
3,vue ui (图形化的创建项目)
4,创建一下文件夹
src/apis API接口文件夹
src/composables 组合函数文件夹
src/directives 全局指令文件夹
src/styles 全局样式文件夹
src/utils 工具函数文件夹

二，仓库初始化
1，git init
2,git add
3,git commit -m ‘init’

三,新建一个jsconfig.json文件，路径自动提示（在根目录中）
配置：
{
“compilerOptions”: {
“baseUrl”: “./”,
“paths”: {
“@/": [
"src/”
]
}
}
}

四，安装elementplus
链接

五，改变全局主题颜色，主题色的定制
学习
1，安装sass，npm i sass -D
2,在styles中创建element/index.scss,配置内容

六，安装axios
1，npm i axios
a,接口地址
b，接口超时时间
c,请求拦截
d,响应拦截

//utils/https.js的配置
import axios from "axios";
// 创建实例时配置默认值
const instance = axios.create({
  baseURL: "http://pcapi-xiaotuxian-front-devtest.itheima.net",
  timeout:5000
});

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default instance;

七，静态资源引入，image comme.css

八，配置全局样式 styles/var.scss，在vite.config.js中配置

$priceColor:#cf4444

/*
 * @Author: cyy
 * @version:
 * @Date: 2023-06-16 13:24:05
 * @LastEditTime: 2023-06-21 11:58:49
 * @LastEditors: cyy
 * @Description:
 * @FilePath: \学习\vue3Study\vite.config.js
 */
import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          // 自动引入修改主题色添加这一行，使用预处理样式
          importStyle: "sass",
        }),
      ],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
        // 自定义的主题色
       @use "@/styles/element/index.scss" as *; 
       @use "@/styles/var.scss" as *;
       `,
      },
    },
  },
});