在vue中如何引入element-ui
来源:互联网 发布:单片机的编程语言 编辑:程序博客网 时间:2024/05/15 12:12
Element-ui是饿了么团队为vue提供的ui组件,下面介绍如何在项目中引入与使用
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,更改.babelrc文件,这个文件是es6语法的编译器
1.
vue-cli脚手架的.babelrc文件
2.
{
// 此项指明,转码的规则
"presets": [
// env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
["env", { "modules": false }],
// 下面这个是不同阶段出现的es语法,包含不同的转码插件
"stage-2"
],
// 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中,不产生注释
"comments": false,
// 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置
"env": {
// test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
"test": {
"presets": ["env","stage-2"],
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}
在plugins中加入代码:
["component", [ {"libraryName": "element-ui","styleLibraryName": "theme-chalk" } ]]
接下来,如果只想引入部分内容,就在main.js中添加代码
import element from 'element-ui'
import {button,select}from 'element-ui'
Vue.use(element,{size:'small'})
Vue.use(button)
Vue.use(select)
Element提供全局的样式这边size选择了small,也可以选择别的尺寸
ui组件具体的使用方式可以查看官方文档
http://element-cn.eleme.io
- 在vue中如何引入element-ui
- vue-cli中引入element
- 【Vue】 element ui 引入第三方图标
- 如何在 Vue-cli 创建的项目中引入 iView组件UI
- vue引入element-ui 2.0 后报错问题解决措施
- 在vue中引入vuex
- 在vue中引入jquery
- 在vue项目中使用element-ui的Upload上传组件
- 在vue项目中引入高德地图及其UI组件
- vue引入Mint-UI
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
- Vue中如何引入远程JS文件?
- vue项目中如何引入jquery
- 在vue中引入jQuery的方法
- 在Vue项目中引入D3.js
- webpack+vue 在使用element-ui时import 'element-ui/lib/theme-chalk/index.css‘失败
- axios模块在vue开发中如何使用引入,如何注册全局方法
- 新建VUE 2.0 项目及引入Element UI 步骤及常见问题
- 炼数成金 Streams流计算引航公开课附讲义
- Ubuntu14.04调教手册(安装中文输入法等)
- 单链表(C++模板类)
- 算法架构系列活动—大数据风控技术应用
- 自动寻路方案
- 在vue中如何引入element-ui
- python串口通信,pyserial安装
- IntelliJ IDEA2017.3激活
- 大数据24小时:网传万达云多个部门面临解散,阿里云与众安科技发布新金融营销平台“芭蕉扇”
- Android 集成微信支付
- win10 显示 “在此处打开命令窗口”菜单选项
- pom.xml文件报错:com.thoughtworks.xstream.io.HierarchicalStreamDriver
- C++ STL中迭代器失效问题
- 测试博文