实战52_elementplus_快速入门

使用步骤

1.安装

安装前重新创建一个vue项目

管理员打开cmd，进入到自己要创建的文件夹下输入指令

npm init vue@latest

命名自己的项目名后按Enter

  cd vue-project1   //vue-project1是你自己的创建的项目名
   npm install
   npm run dev

安装element plus,可以去官网找，安装会等待一段时间https://element-plus.org/zh-CNhttps://element-plus.org/zh-CN

npm install element-plus --save

2.引入

main.js文件中

import { createApp } from 'vue' //导入vue
import ElementPlus from 'element-plus'  //导入elment-plus
import 'element-plus/dist/index.css'   //导入plus的样式
import App from './App.vue'//导入app.vue

const app = createApp(App) //创建应用实例

app.use(ElementPlus) //使用element-plus
app.mount('#app')  //挂载，控制html

3.组件：访问官方文档中的组件，调整成我们需要的样子

Button.vue

<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>


<template>
  <div class="mb-4">
    <el-button type="primary">编辑</el-button>
    <el-button type="success">删除</el-button>
  </div>



</template>

4.App.vue导入Button.vue并使用

5.启动项目

npm run dev

6.结果