vue.js的UI元件庫,在git上有多個項目,我見的使用者比較多的是iView和Element.兩個元件庫,元件都很豐富。本文主要為大家介紹了利用vue+elementUI實作部分引入元件的相關資料,以及介紹了vue引入elementUI報錯的解決方法,文中透過範例程式碼介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧。
官網的介紹
iView: 一套基於Vue.js 的高品質UI 元件庫
npm install -g vue-cli2、建立專案projectName是你專案的名稱
npm install webpack projectName3、進入專案目錄
cd projectName4、初始化專案安裝依賴
npm install5、安裝elementui
npm install element-ui --save -dev6、先確定項目有沒有style-loader和babel-plugin-component 若沒有npm一個
npm install xxx --save -dev7、簡單粗暴點,找到.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" ,重新安裝即可,這就可以啟動了相關推薦:
以上是利用vue+elementUI部分引入元件的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!