vue項目中如何實現(xiàn)element-ui組件按需引入
element-ui組件按需引入
按需引入
1.借助 babel-plugin-component ,引入我們需要的組件,減少項目體積
npm install babel-plugin-component -D
2.修改 babel.config.js 的內(nèi)容
//babel.config.js 全文內(nèi)容如下 module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ] ] }
3.創(chuàng)建文件 element.js(名字自定義)
// element.js 全文內(nèi)容如下,按自己需要引入就好了 import Vue from 'vue' import { Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Menu, Submenu, MenuItem, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table, TableColumn, Switch, Tooltip, Pagination, Dialog, MessageBox, Tag, Tree, Select, Option, Cascader, Alert, Tabs, TabPane } from 'element-ui' Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input) Vue.use(Container) Vue.use(Header) Vue.use(Aside) Vue.use(Main) Vue.use(Menu) Vue.use(Submenu) Vue.use(MenuItem) Vue.use(Breadcrumb) Vue.use(BreadcrumbItem) Vue.use(Card) Vue.use(Row) Vue.use(Col) Vue.use(Table) Vue.use(TableColumn) Vue.use(Switch) Vue.use(Tooltip) Vue.use(Pagination) Vue.use(Dialog) Vue.use(Tag) Vue.use(Tree) Vue.use(Select) Vue.use(Option) Vue.use(Cascader) Vue.use(Alert) Vue.use(Tabs) Vue.use(TabPane) Vue.prototype.$message = Message Vue.prototype.$confirm = MessageBox.confirm
4.最后在 main.js 中引入這個文件
//main.js 中添加下面這行代碼(路徑和文件名按自己的來) import './plugins/element.js'
完整引入
在 main.js 中添加如下代碼
import ElementUI from 'element-ui'; Vue.use(ElementUI);
vue項目搭建 + 引入element-ui
初始化單頁系統(tǒng)
在學(xué)習(xí)Vue的過程中,官方網(wǎng)站都是給了非常詳細(xì)的介紹,所以初始化大型單頁應(yīng)用,官網(wǎng)給的參考資料地址:https://cn.vuejs.org/v2/guide/installation.html
1、NPM
2、命令行工具 (CLI)
3、具體操作步驟
【第一步】在004目錄下右鍵,然后選擇------在命令提示符中打開
【第二步】輸入npm install vue
【第三步】安裝命令行工具vue-cli:cnpm install vue-cli --global
【第四步】初始化項目的命令:vue init webpack 項目名
【第五步】進(jìn)入項目命令:cd my-project
【第六步】運(yùn)行項目:npm run dev
【第七步】訪問項目,如果一切成功,那么會出現(xiàn)下圖所示頁面,系統(tǒng)初始化成功
系統(tǒng)目錄介紹
1、經(jīng)過操作,項目my-project已經(jīng)初始化成功,目錄結(jié)構(gòu)如下:
修改項目
1、修改App.vue,刪除無關(guān)內(nèi)容
<template> <div id="app"> <router-view/> </div> </template> <script> export default { } </script> <style> </style>
2、修改main.js代碼
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, render: c=> c(App) })
3、修改HelloWorld.vue組件中的代碼
ElementUI整合項目
在項目中,我們采用ElementUI作為系統(tǒng)框架,所以需要安裝ElementUI框架
ElementUI框架官網(wǎng)地址:http://element-cn.eleme.io/#/zh-CN/component/installation
1、安裝ElementUI: cnpm i element-ui -S
i
: 安裝指令,全拼:install-S
:生產(chǎn)環(huán)境,全拼:--save-D
:開發(fā)環(huán)境,全拼:--save--dev-O
:可選依賴,全拼:--save--optional-E
:精確安裝指定模塊版本,全稱:--save--exact-g
:全局安裝,全拼:--global
2、在main.js中引入ElementUI模塊
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: '#app', router, render: c => c(App) })
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
laravel5.3 vue 實現(xiàn)收藏夾功能實例詳解
這篇文章主要介紹了laravel5.3 vue 實現(xiàn)收藏夾功能,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-01-01el-checkbox-group?的v-model無法綁定對象數(shù)組的問題解決
elementUI官方文檔中el-checkbox-group組件綁定的都為一維數(shù)組,本文主要介紹了解決el-checkbox-group?的v-model無法綁定對象數(shù)組,感興趣的可以了解一下2023-05-05element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo
這篇文章主要為大家介紹了element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11Vue中搭配Bootstrap實現(xiàn)Vue的列表增刪功能
日常開發(fā)中,我們可以用?“拿來主義”?借助Bootstarp現(xiàn)成的一些樣式,快速生成我們想要的頁面布局,避免書寫大量的HTML和CSS代碼,省下了許多不必要的時間,可以直接搭配vue使用2022-11-11