引入Element

完整引入

在vue項(xiàng)目下的src下的main.js中加入

import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App) });

這樣就完成了Element的引入，樣式文件需要單獨(dú)引入。

按需引入

需要借助babel-plugin-component,我們可以只引入需要的組件。

安裝babel-plugin-component:

在項(xiàng)目目錄下打開cmd，然后輸入：

npm install babel-plugin-component -D 或者 cnpm install babel-plugin-component -D

新建vue項(xiàng)目教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83409981

然后在項(xiàng)目下搜索：.babelrc文件

將其修改為：

{"presets": [["es2015", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]] }

如果想引入部分組件，比如Button和Select,那么需要在main.js中寫入

import Vue from 'vue'; import { Button, Select } from 'element-ui'; import App from './App.vue';Vue.component(Button.name, Button); Vue.component(Select.name, Select); /* 或?qū)憺? Vue.use(Button)* Vue.use(Select)*/new Vue({el: '#app',render: h => h(App) });

完整的組件列表和引入方式：

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;

全局配置

在引入 Element 時，可以傳入一個全局配置對象。該對象目前支持 size 與 zIndex 字段。size 用于改變組件的默認(rèn)尺寸，zIndex 設(shè)置彈框的初始 z-index（默認(rèn)值：2000）。

完整引入 Element：

import Vue from 'vue'; import Element from 'element-ui'; Vue.use(Element, { size: 'small', zIndex: 3000 });

按需引入 Element：

import Vue from 'vue'; import { Button } from 'element-ui';Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }; Vue.use(Button);

按照以上設(shè)置，項(xiàng)目中所有擁有 size 屬性的組件的默認(rèn)尺寸均為 'small'，彈框的初始 z-index 為 3000。

總結(jié)

以上是生活随笔為你收集整理的Vue中怎样引入Element的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。