首頁 >web前端 >js教程 >利用vue+elementUI部分引入元件的實作方法

利用vue+elementUI部分引入元件的實作方法

小云云
小云云原創
2018-01-16 09:16:072858瀏覽

vue.js的UI元件庫,在git上有多個項目,我見的使用者比較多的是iView和Element.兩個元件庫,元件都很豐富。本文主要為大家介紹了利用vue+elementUI實作部分引入元件的相關資料,以及介紹了vue引入elementUI報錯的解決方法,文中透過範例程式碼介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧。

官網的介紹

  • iView: 一套基於Vue.js 的高品質UI 元件庫

  • ##Element,一套為開發者、設計師和產品經理準備的基於Vue 2.0 的元件庫,提供了配套設計資源,幫助你的網站快速成型。

兩者各有優缺點,不多評論,根據自己的需求,我最後使用了Element。因為最近公司開發一個很小的後台項目,所以考慮部分引入element的組件,因為第一次單獨引入沒有經驗,網上上看了很多都有這樣那樣的問題,個人感覺官網也沒把我說明白(也許自己程度太低了),所以自己研究了一下親測有效,如有錯誤歡迎指出。

實作方法

1、安裝vue-cli


npm install -g vue-cli
2、建立專案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 把原檔案內容全部刪除,貼上下面程式碼


 { "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,假设没效果看看官网又把默认的主题改 成那个了 跟着改一下应该就可以了
     }
     ]]
     ],
  "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" ,重新安裝即可,這就可以啟動了

相關推薦:

Vue2.0 、ElementUI實作表格翻頁

vue Element-ui input 遠端搜尋實例詳解

使用VUE element-ui 寫個複用Table元件

以上是利用vue+elementUI部分引入元件的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn