Element UI

一、简介

Element UI是饿了么团队提供的一套基于vue2.0的组件库，可以快速搭建网站。

  • Element UI 　　PC端UI库
  • Mint UI　　移动端UI库

官网：https://element.eleme.cn/#/zh-CN

二、快速上手

2.1 创建项目

1、运行vue init webpack-simple element-demo （创建项目，命名为element-demo，使用webpack-simple模板）

2、运行cd element-demo （转到element-demo路径下）

　  运行cnpm install （安装项目中的所有需要的模块）

2.2 安装element-ui

3、运行cnpm install element-ui -S （安装element-ui模块，生产依赖）

 4、运行cnpm run dev （打开页面看创建项目是否成功）

运行成功，自动弹出浏览器页面。

2.3 在main.js中引入并使用组件（全部引用）

  • import ElementUI from 'element-ui'　　//1.引入element-ui（js文件）
  • import 'element-ui/lib/theme-chalk/index.css'  //2.引入element-ui（css文件） 该样式文件需要单独引入
  • Vue.use(ElementUI);　　//3.使用ElementUI

这种方式引入了ElementUI中的所有组件。

  引用css文件的路径为：

此时页面显示报错信息。

2.4 在webpack.config.js中添加loader

新增字体的解析style-loader，然后重新运行npm run dev（说明：webpack.config.js修改后必须重启才生效）

此时不再报错。

三、如何使用ElementUI组件

直接在App.vue中写对应官网上的组件即可。

 效果展示

 

 

说明：如果需要按需引入：

1、安装babel-plugin-component

运行npm install babel-plugin-component -D

2、将 .babelrc 修改为：

 1 {
 2   "presets": [["es2015", { "modules": false }]],
 3   "plugins": [
 4     [
 5       "component",
 6       {
 7         "libraryName": "element-ui",
 8         "styleLibraryName": "theme-chalk"
 9       }
10     ]
11   ]
12 }

3、只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

 1 import Vue from 'vue';
 2 import { Button, Select } from 'element-ui';
 3 import App from './App.vue';
 4 
 5 Vue.component(Button.name, Button);
 6 Vue.component(Select.name, Select);
 7 /* 或写为
 8  * Vue.use(Button)
 9  * Vue.use(Select)
10  */
11 
12 new Vue({
13   el: '#app',
14   render: h => h(App)
15 });

 

说明：如果需要解析less文件，则需要安装less和less-loader

第一步：安装less和less-loader

运行 cnpm install less less-loader -D

第二步：在webpack.config.js中添加less-loader配置

{
  test:/\.less$/ ,
  loader:'less-loader' 
},

 

posted @ 2021-09-14 16:20  AnnLing  阅读(1215)  评论(0)    收藏  举报