element-ui的使用

element-ui的使用

1. 简介

Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速搭建网站，提高开发效率    ElementUI PC    MintUI 移动端

官网地址：

点击

2. 快速上手

2.1 安装elment ui

cnpm install element-ui -S

2.2 在main.js中引入并使用组件

importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css';//该样式文件需要单独引入Vue.use(ElementUI);这种方式引入了ElementUI中所有的组件

2.3 常用组件

布局

表格

表单元素

上传文件

。。。

3. 按需引入组件

3.1 安装babel-plugin-component

cnpm install babel-plugin-component -D

3.2 配置

vuecli2在.babelrc文件文件中添加以下配置：

"plugins": [["component", [        {          "libraryName": "element-ui",          "styleLibraryName": "theme-default"        }    ]]]

vuecli3在babel.config.js中添加以下配置：

module.exports={presets:['@vue/app'],plugins:[// element官方教程['component',{'libraryName':'element-ui','styleLibraryName':'theme-chalk'}]]}

3.3 引入需要的插件

在 main.js 中写入以下内容：

importVuefrom'vue';import{Button,Select}from'element-ui';importAppfrom'./App.vue';Vue.component(Button.name,Button);Vue.component(Select.name,Select);/* 或写为

* Vue.use(Button)

* Vue.use(Select)

*/

4. 自定义主题

4.1 在项目中改变 SCSS 变量

Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。

如果你的项目还没有安装sass-loader、node-sass，请先在项目里安装

cnpm i sass-loader -D//sass-loader依赖于node-sasscnpm i node-sass -D

接下来新建一个样式文件，例如 element-variables.scss，写入以下内容：

/* 改变主题色变量 */$--color-primary:#f00;/* 改变 icon 字体路径变量，必需 */$--font-path:'~element-ui/lib/theme-chalk/fonts'@import"~element-ui/packages/theme-chalk/src/index"

之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：

importVuefrom'vue'importElementfrom'element-ui'//import'element-ui/lib/theme-chalk/index.css';//这里无需引入element-ui的cssimport'@/assets/scss/element-variables.scss'Vue.use(Element)

主题色默认为蓝色：

image.png

这个时候主题色变成了我们设置的红色：

image.png

image.png

5.vue-element-admin（扩展）

https://panjiachen.github.io/vue-element-admin-site/zh/

6.其他

另一个基于 Vue.js的UI 组件库

iview（个人） pc

官网：http://v1.iviewui.com/