前端项目练习——Element-Plus引入使用

一、Element-Plus官方文档

一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

进入指南查看安装方法

二、打开TERMINAL终端，进入项目文件夹，引入Element-Plus库

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

三、测试安装是否成功

（1）在指南中查看快速开始

（2）打开main.js，引入下面两行

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

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

//修改代码
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

（3）点击组件

（4）选择<Button>，查看第一个样式的源代码，引入到App.vue的<template></template>标签中 

<template>
  <el-row 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>
  </el-row>
</template>

<script>


export default {
  name: 'App',
  components: {
  }
}
</script>

四、加载成功

可以看到以下按钮出现