前言

創(chuàng)新互聯(lián)建站2013年開(kāi)創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元潮南做網(wǎng)站,已為上家服務(wù),為潮南各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

vue.js的UI組件庫(kù)，在git上有多個(gè)項(xiàng)目，我見(jiàn)的使用者比較多的是iView和Element.兩個(gè)組件庫(kù)，組件都很豐富。

官網(wǎng)的介紹

• iView: 一套基于 Vue.js 的高質(zhì)量 UI 組件庫(kù)
• Element，一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的組件庫(kù)，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型。

兩者各有優(yōu)缺點(diǎn)，不多評(píng)論，根據(jù)自己的需求，我最后使用了Element。因?yàn)樽罱鹃_(kāi)發(fā)一個(gè)很小的后臺(tái)項(xiàng)目，所以考慮部分引入element的組件，因?yàn)榈谝淮螁为?dú)引入沒(méi)有經(jīng)驗(yàn)，網(wǎng)上看了很多都有這樣那樣的問(wèn)題，個(gè)人感覺(jué)官網(wǎng)也沒(méi)把我說(shuō)明白（也許自己水平太低了），所以自己研究了一下親測(cè)有效，如有錯(cuò)誤歡迎指出。

實(shí)現(xiàn)方法

1、安裝vue-cli

npm install -g vue-cli

2、創(chuàng)建項(xiàng)目projectName是你項(xiàng)目的名字

npm install webpack projectName

3、進(jìn)入項(xiàng)目目錄

cd projectName

4、初始化項(xiàng)目安裝依賴

npm install

5、安裝elementui

npm install element-ui --save -dev

6、首先確定項(xiàng)目是否有style-loader和babel-plugin-component 若沒(méi)有npm一個(gè)

npm install xxx --save -dev

7、簡(jiǎn)單粗暴點(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的老項(xiàng)目用這個(gè)，2.0的用theme-chalk，假設(shè)沒(méi)效果看看官網(wǎng)又把默認(rèn)的主題改 成那個(gè)了 跟著改一下應(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 報(bào)錯(cuò)

在main.js里面引入import 'element-ui/lib/theme-default/index.css'中報(bào)錯(cuò)，無(wú)法啟動(dòng)項(xiàng)目，這是把package.json里面的webpack改成"webpack": "beta" ,重新安裝即可，這就可以啟動(dòng)了

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

網(wǎng)站欄目：利用vue+elementUI實(shí)現(xiàn)部分引入組件的方法詳解
網(wǎng)頁(yè)路徑：http://chinadenli.net/article2/ihioic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站收錄、網(wǎng)站營(yíng)銷(xiāo)、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)