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
8.去掉index.css中的相关内容,现在显示正常了