本项目技术栈：Vue3+vite5+element-plus+pinia 文章主要记录个人项目完成的记录。

1. 安装vite

1. 安装Vite：

   • 打开命令行工具。
   • 运行以下命令安装Vite：npm install -g vite。

2. 创建新项目：

   • 在命令行中运行npm init vite 。(mac的同学尽量使用npm 安装。否则可能电脑会因为权限不足报错)

3. 进入项目目录：

   • 进入新创建的项目目录：cd project-name。

4. 安装依赖：

   • 运行npm install安装项目依赖。

5. 运行项目：

   • 运行npm run dev启动开发服务器。

2. 项目结构

删除无用文件

2.1 插件安装

npm i axios pinia  -S

2.2 依赖安装

npm install element-plus --save

2.3 按需导入

这种方式不需要导入任何组件，可以直接使用

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

2.4 文件配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
//element按需引入
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(),
    // Element 按需导入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
});

2.5 引入样式

// main.js
import 'element-plus/dist/index.css'

可以直接在组件中使用ui组件，不用做引入操作。