Element-ui 安装

原文链接:https://note.noxussj.top/?source=sifo

image.png


通过 YARN 命令安装

yarn add element-ui


完整引入

代表一次性引入所有组件,比较省心省事,但是项目的打包体积也会跟着变大。

// main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

image.png


按需引入

在实际项目开发中建议使用按需引入,也就是用多少组件,就引入多少组件。可以大大节省打包的体积。

// main.js

import Vue from 'vue'
import { Button } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/button.css'

Vue.use(Button)

image.png


基础案例

<!-- App.vue -->

<template>
    <div id="app">
        <el-button>Button</el-button>
    </div>
</template>

image.png


原文链接:https://note.noxussj.top/?source=sifo


菜园前端
19 声望2 粉丝