安装UI框架：Element Plus

  1. 安装依赖
    Element Plus https://element-plus.org/zh-CN

安装步骤

  • 下载依赖 pnpm install element-plus
  • 完整引入，参考官网文档-快速开始-完整引入
  • 按需引入（推荐，打包体积更小）
    • 执行命令
      cnpm install -D unplugin-vue-components unplugin-auto-import
  1. 按需引入配置

vite配置修改vue-vite-demo1\vite.config.js
注意：修改配置后需要重启项目

// vite.config.ts   
import { defineConfig } from 'vite'
// 引自ElementPlus
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: [
    //   // 引自ElementPlus
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

  1. 使用组件

    <template>
 <div>login</div>
 <div class="mb-4">
 <el-button>Default</el-button>
 <el-button type="primary">Primary</el-button>
 <el-button type="success">Success</el-button>
 <el-button type="info">Info</el-button>
 <el-button type="warning">Warning</el-button>
 <el-button type="danger">Danger</el-button>
</div>
</template>
<script setup></script>

  2. 重启服务

停止服务：ctrl + c
启动服务：vite

  1. 访问登录页面
    http://localhost:5173/#/login

  2. 视频地址：