Vue 使用 element-ui

时间:2022-07-26
本文章向大家介绍Vue 使用 element-ui,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.1 命令行安装

1.1.1 命令

npm i element-ui -S

1.1.2 导入相关依赖(main.js)

// 导入组件库
import ElementUI from "element-ui"
// 导入样式
import "element-ui/lib/theme-chalk/index.css"
// 注册为全局组件
Vue.use(ElementUI)

1.1.3 使用 element-ui 提供的组件

直接去 element-ui 组件 拷贝放到想要的位置即可。

1.1.4 按需导入

// 创建 plugins/element.js
import Vue from "vue"
// 按需引入 element-ui 的组件
import { Button, Table } from "element-ui"

// 将组件注册为全局组件
Vue.use(Button)
Vue.use(Table)



// 在 main.js 导入
import "./plugins/element.js"

1.2 图形化界面

在 cmd 中执行 vue ui 可以打开 vue 图形化界面,但是这种方式多没逼格,建议放弃!!!