利用vue+elementUI實(shí)現(xiàn)部分引入組件的方法詳解
前言
vue.js的UI組件庫,在git上有多個項目,我見的使用者比較多的是iView和Element.兩個組件庫,組件都很豐富。
官網(wǎng)的介紹
- iView: 一套基于 Vue.js 的高質(zhì)量 UI 組件庫
- Element,一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的組件庫,提供了配套設(shè)計資源,幫助你的網(wǎng)站快速成型。
兩者各有優(yōu)缺點(diǎn),不多評論,根據(jù)自己的需求,我最后使用了Element。因?yàn)樽罱鹃_發(fā)一個很小的后臺項目,所以考慮部分引入element的組件,因?yàn)榈谝淮螁为?dú)引入沒有經(jīng)驗(yàn),網(wǎng)上看了很多都有這樣那樣的問題,個人感覺官網(wǎng)也沒把我說明白(也許自己水平太低了),所以自己研究了一下親測有效,如有錯誤歡迎指出。
實(shí)現(xiàn)方法
1、安裝vue-cli
npm install -g vue-cli
2、創(chuàng)建項目projectName是你項目的名字
npm install webpack projectName
3、進(jìn)入項目目錄
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、簡單粗暴點(diǎn),找到.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,假設(shè)沒效果看看官網(wǎng)又把默認(rèn)的主題改 成那個了 跟著改一下應(yī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)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作
這篇文章主要介紹了如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue使用$emit實(shí)現(xiàn)同步調(diào)用
這篇文章主要介紹了vue使用$emit實(shí)現(xiàn)同步調(diào)用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue?響應(yīng)式系統(tǒng)依賴收集過程原理解析
Vue 初始化時就會通過 Object.defineProperty 攔截屬性的 getter 和 setter ,為對象的每個值創(chuàng)建一個 dep 并用 Dep.addSub() 來存儲該屬性值的 watcher 列表,這篇文章主要介紹了Vue?響應(yīng)式系統(tǒng)依賴收集過程分析,需要的朋友可以參考下2022-06-06
Vue2實(shí)現(xiàn)數(shù)字滾動翻頁效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue2如何實(shí)現(xiàn)數(shù)字滾動翻頁效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-03-03
vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題
這篇文章主要介紹了vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
Vue二次封裝el-select實(shí)現(xiàn)下拉滾動加載效果(el-select無限滾動)
el-select默認(rèn)是不支持虛擬滾動的,需要使用第三方插件來實(shí)現(xiàn)虛擬滾動功能,下面這篇文章主要給大家介紹了關(guān)于Vue二次封裝el-select實(shí)現(xiàn)下拉滾動加載效果的相關(guān)資料,需要的朋友可以參考下2024-04-04

