Vue 引入 Element-UI 组件库

Element-UI 官网地址:https://element.eleme.cn/#/zh-CN

完整引入:会将全部组件打包到项目中,导致项目过大,首次加载时间过长。

下载 Element-UI

一、打开项目,安装 Element-UI 组件库。

使用命令:

npm i element-ui -S

完整引入:

一、在 main.js 文件中,引入组件库和组件样式。

javascript 复制代码
import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 1.引入 Element-UI 组件库
import ElementUI from 'element-ui';
// 2.引入 Element-UI 组件样式
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

// 3.使用 Element-UI 组件库
Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

二、在官网中找到需要的组件,复制对应的代码。

三、创建 Home.vue 页面,将代码粘贴到页面中。

html 复制代码
<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>
</template>

<script>
export default {
    name: "Home",
}
</script>

四、最终效果

原创作者:吴小糖

创作时间:2023.8.14

相关推荐
haogexiaole13 分钟前
vue知识点总结
前端·javascript·vue.js
哆啦A梦15882 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
小周同学@5 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok5 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~5 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号5 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌5 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康6 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海6 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs