element-ui 使用(1)
记录近期所使用element-ui组件的过程
使用过程中用到的element文档
https://element.eleme.cn/#/zh-CN/component/installation
一.element-ui的团队
Element
是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。
二.安装
npm 安装
官方都推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用
npm i element-ui -S
CDN方式使用
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。
- 在html文件中引入 cdn链接
- 引入样式
- 引入组件库
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
官方建议使用 CDN 引入 Element 的用户在链接地址上锁定版本,以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。
三.引入方式
方式一 : 完整引入
- 在
mian.js
当中书写下面内容 - 以下代码便完成了
Element
的引入。需要注意的是,样式文件需要单独引入。
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
方式二 : 自动按需引入组件
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
使用步骤:
- 安装
babel-plugin-component
:
npm install babel-plugin-component -D
- 将
.babelrc
修改为
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
- 在
main.js
中写入以下内容
import { Button, Select } from 'element-ui'
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
四.使用组件
至此,一个基于Vue
和Element
的开发环境已经搭建完毕,现在就可以编写代码啦。各个组件的使用方法请参阅它们各自的文档。