vue3+vite+ts使用Element+Plus_vue3 vite ts element-plus-CSDN博客

本文链接：https://blog.csdn.net/zouxin_88/article/details/134308027

1.安装Element+Plus

npm install element-plus --save

2.在index.html中加入

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

3.修改main.ts

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

4.参照文档，添加按钮。在App.vue的template标签下添加按钮

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

5.在App.vue的<script lang="ts">标签下添加

import {ElRow,ElButton} from "element-plus"

6.在export default中添加

components:{ElButton, ElRow},

7.保存运行，就可以看到按钮了。但是按钮显示不正确，这是index.css导致的。

8.去掉index.css中的相关内容，现在显示正常了