vue-cli3.0按需引入element-ui组件方式
作者:Stavin Li
这篇文章主要介绍了vue-cli3.0按需引入element-ui组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue-cli3.0按需引入element-ui组件
1.引入vue add element
How do you want to import Element? -->选择 Import on demand
(关键)
Choose the locale you want to load–>选择 zh-CN
2.回车后,系统会自动配置引入
- babel.config.js
- main.js
- src\plugins\element.js
- App.vue 自动将
el-button
作为范例
3.cd src\plugins\element.js修改
以Carousel
走马灯为例
import { Carousel, CarouselItem } from 'element-ui' Vue.use(Carousel) Vue.use(CarouselItem)
完整组件列表和引入方式
import Vue from 'vue'; import { Pagination, Dialog, Autocomplete, Dropdown, DropdownMenu, DropdownItem, Menu, Submenu, MenuItem, MenuItemGroup, Input, InputNumber, Radio, RadioGroup, RadioButton, Checkbox, CheckboxButton, CheckboxGroup, Switch, Select, Option, OptionGroup, Button, ButtonGroup, Table, TableColumn, DatePicker, TimeSelect, TimePicker, Popover, Tooltip, Breadcrumb, BreadcrumbItem, Form, FormItem, Tabs, TabPane, Tag, Tree, Alert, Slider, Icon, Row, Col, Upload, Progress, Badge, Card, Rate, Steps, Step, Carousel, CarouselItem, Collapse, CollapseItem, Cascader, ColorPicker, Transfer, Container, Header, Aside, Main, Footer, Loading, MessageBox, Message, Notification } from 'element-ui'; Vue.use(Pagination); Vue.use(Dialog); Vue.use(Autocomplete); Vue.use(Dropdown); Vue.use(DropdownMenu); Vue.use(DropdownItem); Vue.use(Menu); Vue.use(Submenu); Vue.use(MenuItem); Vue.use(MenuItemGroup); Vue.use(Input); Vue.use(InputNumber); Vue.use(Radio); Vue.use(RadioGroup); Vue.use(RadioButton); Vue.use(Checkbox); Vue.use(CheckboxButton); Vue.use(CheckboxGroup); Vue.use(Switch); Vue.use(Select); Vue.use(Option); Vue.use(OptionGroup); Vue.use(Button); Vue.use(ButtonGroup); Vue.use(Table); Vue.use(TableColumn); Vue.use(DatePicker); Vue.use(TimeSelect); Vue.use(TimePicker); Vue.use(Popover); Vue.use(Tooltip); Vue.use(Breadcrumb); Vue.use(BreadcrumbItem); Vue.use(Form); Vue.use(FormItem); Vue.use(Tabs); Vue.use(TabPane); Vue.use(Tag); Vue.use(Tree); Vue.use(Alert); Vue.use(Slider); Vue.use(Icon); Vue.use(Row); Vue.use(Col); Vue.use(Upload); Vue.use(Progress); Vue.use(Badge); Vue.use(Card); Vue.use(Rate); Vue.use(Steps); Vue.use(Step); Vue.use(Carousel); Vue.use(CarouselItem); Vue.use(Collapse); Vue.use(CollapseItem); Vue.use(Cascader); Vue.use(ColorPicker); Vue.use(Transfer); Vue.use(Container); Vue.use(Header); Vue.use(Aside); Vue.use(Main); Vue.use(Footer); Vue.use(Loading.directive); Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message;
vue-cli3.0用cdn引入element-ui
一般项目编写完成,打包的文件都挺大的,所以吧那些常用不会改变的采用cdn引入,减小包的体积,本例子使用的是vue-cli3.0,先在vue.config.js配置externals
config.externals = { Vue: "Vue", Vuex: "Vuex", "element-ui": "ELEMENT", moment: 'moment', echarts: 'echarts' }
在index.html中加入
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <link href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css" rel="external nofollow" rel="stylesheet"> <script src="https://cdn.bootcss.com/element-ui/2.4.5/index.js"></script> <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
将 import xxx from 'xxx’去除,这里的xxx代指你要用cdn引入的,上面已经完成,如果你要使用element-ui的Message模块,使用如下,上面的external一定要按照 “element-ui”: "ELEMENT"的写法,要用模块直接ELEMENT点出来就行
ELEMENT.Message.error('成功'); // ELEMENT成为全局变量 ?一定要按照上面的写法 ?"element-ui": "ELEMENT"
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。