vite+vue3+js+axios+mock+elementPlus环境搭建

1. vite+vue3+js+axios+mock环境搭建可以参考我的另一篇文章

vite5+vue3+js+axios+mock环境搭建

2. 使用element-plus

1. 安装依赖

pnpm install element-plus --save

2. 引入element-plus

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

3. 修改home.vue

<template>
  <div>
    <el-button type="primary">按钮</el-button>
  </div>
</template>

3. 国际化

// app.vue
<template>
  <el-config-provider :locale="zhCn">
    <app />
  </el-config-provider>
</template>

<script setup>
import { ElConfigProvider } from 'element-plus';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'; // 引入中文语言包
</script>

3. 按需导入

1. 安装依赖

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

2. 修改vite.config.js

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';
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

3. 修改home.vue

<script setup>
// 去掉ElButton引入
// import { ElButton } from 'element-plus';
</script>

4. 去掉man.js中的样式引入

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

4. 完善axios，添加loading和弹出接口错误信息

参考axios的个人封装

5. 项目地址