利用vue+elementUI實現(xiàn)部分引入組件的方法詳解
前言
vue.js的UI組件庫，在git上有多個項目，我見的使用者比較多的是iView和Element.兩個組件庫，組件都很豐富。
官網(wǎng)的介紹
- iView: 一套基于 Vue.js 的高質(zhì)量 UI 組件庫
- Element，一套為開發(fā)者、設計師和產(chǎn)品經(jīng)理準備的基于 Vue 2.0 的組件庫，提供了配套設計資源，幫助你的網(wǎng)站快速成型。
兩者各有優(yōu)缺點，不多評論，根據(jù)自己的需求，我最后使用了Element。因為最近公司開發(fā)一個很小的后臺項目，所以考慮部分引入element的組件，因為第一次單獨引入沒有經(jīng)驗，網(wǎng)上看了很多都有這樣那樣的問題，個人感覺官網(wǎng)也沒把我說明白（也許自己水平太低了），所以自己研究了一下親測有效，如有錯誤歡迎指出。
實現(xiàn)方法
1、安裝vue-cli
npm install -g vue-cli
2、創(chuàng)建項目projectName是你項目的名字
npm install webpack projectName
3、進入項目目錄
cd projectName
4、初始化項目安裝依賴
npm install
5、安裝elementui
npm install element-ui --save -dev
6、首先確定項目是否有style-loader和babel-plugin-component 若沒有npm一個
npm install xxx --save -dev
7、簡單粗暴點，找到.babelrc 把原文件內(nèi)容全部刪除，粘貼下面代碼
{ "presets": [["env", {
"modules": false,
"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}
}],
"stage-2"],
"plugins": [
"transform-runtime",
["component",[
{
"libraryName":"element-ui",
"styleLibraryName":"theme-default" //1.4的老項目用這個，2.0的用theme-chalk，假設沒效果看看官網(wǎng)又把默認的主題改 成那個了 跟著改一下應該就可以了
}
]]
],
"comments":false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
8、在webpack.base.conf.js加入下面一句
{
test: /\.css$/,
loader: 'style-loader'
},
9、在mian.js中引入
import { Button,Input } from 'element-ui'
Vue.use(Button)
Vue.use(Input)
10、然后就可以使用Button和Input了
vue引入elementUI 報錯
在main.js里面引入import 'element-ui/lib/theme-default/index.css'中報錯，無法啟動項目，這是把package.json里面的webpack改成"webpack": "beta" ,重新安裝即可，這就可以啟動了
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
Vue.js實現(xiàn)簡單ToDoList 前期準備（一）
這篇文章主要介紹了Vue.js實現(xiàn)簡單ToDoList的前期準備,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue列表如何自動滾動到制定位置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文是小編精心給大家收藏整理的關于Vue2.2.0+新特性,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue如何通過某個字段獲取詳細信息，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue使用websocket實現(xiàn)實時數(shù)據(jù)推送功能
這篇文章主要為大家詳細介紹了vue如何使用websocket實現(xiàn)實時數(shù)據(jù)推送,發(fā)布訂閱重連單點登錄功能,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
WebStorm作為一款功能強大的IDE,提供了豐富的調(diào)試功能和技巧,可以幫助你更高效地開發(fā)和調(diào)試Vue應用,這篇文章主要給大家介紹了關于webStorm?debug?vue項目的兩種方案,需要的朋友可以參考下2024-07-07
本文主要介紹了vue封裝jquery修改自身及兄弟元素的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了vue使用微信JS-SDK實現(xiàn)分享功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
Vue?ElementUI?table實現(xiàn)雙擊修改編輯某個內(nèi)容的方法
在實現(xiàn)表格單元格雙擊編輯功能時,需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認編輯,同時,需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善2024-09-09
antd vue table跨行合并單元格,并且自定義內(nèi)容實例
這篇文章主要介紹了antd vue table跨行合并單元格,并且自定義內(nèi)容實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10