vite+vue3.0+element-ui3.0 vite初始化vue3.0项目使用element3组件库

张小白@菜鸟

于 2021-06-24 11:19:26 发布

阅读量1.1k

点赞数

分类专栏： vue element-UI 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/zhangxianshena/article/details/118181100

版权

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

element-UI

3 篇文章

订阅专栏

本文指导如何在Vue项目中安装并使用Element UI 3.0，包括引入步骤、错误修复，以及在组件中实例化不同类型的ElButton。适合初学者了解Element UI的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步

首先要先安装element3.0插件

yarn add element3
或
npm i element -S

第二步

在main.js中引入，并注册

import { createApp } from 'vue';
import Elementui from 'element3';
import '../node_modules/element3/lib/theme-chalk/index.css';
import App from './App.vue';
import './index.css';

createApp(App).use(Elementui).mount('#app');

注：如果还用之前的引入方法import ‘element3/lib/theme-chalk/index.css’; 这样引入的话会报错，错误如下
在这里插入图片描述

第三步

组件中使用

<template>
  <div>
    <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>
   
  </div>
</template>

在这里插入图片描述