在Vue專案中應用elementUI踩過的坑

2021-08-26 02:19:18 字數 2019 閱讀 4385

最近自己鼓搗vue專案的時候想著應用elementui玩玩,於是就開始動手玩起來了。

一、新建專案

1.開啟cmd,執行:vue init webpack vue-demo

2.執行:cd vue-demo進入這一級

3.執行:npm install

4.執行:npm run dev

如果瀏覽器開啟之後,沒有載入出頁面,說明本地的8080 埠被占用,需要修改一下配置檔案 config/index.js

解釋:1.將 build 的路徑字首修改為 ' ./ '(原本為 ' / '),是因為打包之後,外部引入 js 和 css 檔案時,如果路

徑以 ' / ' 開頭,那麼在本地是無法找到對應檔案。所以如果需要在本地開啟打包後的檔案,

就得修改檔案路徑。

2.將埠號改為不常用的埠。

顯示頁面如下:

專案新建完成。

二、引入element

1.開啟cmd,在當前目錄中執行:npm i element-ui -s

2.src/main.js(紅色的)

ps:之前引用的時候忘了import 'element-ui/lib/theme-default/index.css',導致每次都不能應用到elementui樣式,

還在網上找了很多資料,包括配置webpack.base.conf.js裡的style.loader和css.loader等等情況。最後才發現是自己忘了

而是theme-chalk資料夾,所以還需要更改下路徑。

3.然後在.vue檔案裡就直接可以用了

例如:在src/components/hello.vue做一下修改

預設按鈕

主要按鈕

文字按鈕

執行:npm run dev

你將看到如下頁面:

成功的引入了element!!

更多樣式請參考:

ps:看了一些資料,有的引入之後會出現

報錯:error when rendering component

原因如下:

vue 2.1.5 將 _h 重新命名為 _c,而 element 目前發的版本都是用以前的 compiler 編譯的,

導致新版 runtime 無法執行 element。目前的解決方案是鎖定 vue 的版本為 2.1.4

鎖定vue相關版本

npm remove vue #解除安裝相關的版本

重新安裝一下版本

"vue-template-compiler": "2.1.4"

"vue-loader": "10.0.0"

"vue": "2.1.4"

共勉~

在vue專案中, mock資料

1.在根目錄下建立 test 目錄,用來存放模擬的 json 資料,在 test 目錄下建立模擬的資料 data.json 檔案 2.在build目錄下的 dev server.js的檔案作如下更改 3.在.vue做請求,就可以成功獲取data.json的資料了,下面使用 axios 進行請求axi...

gradle在專案中的應用

compilesdkversion 代表是使用的sdk版本buildtoolsversion 代表構建工具的版本,一般都是sdk相配套的。在專案建立的時候就會自動生成signingconfigs 簽名配置,主要有 develop,release develop 開發時候的配置keyalias apk...

Kibana在專案中的應用

雖然本文主要闡釋kibana 在專案中的應用 但是我們需要了解乙個常識,那就是一般情況下elk都是組合應用的,在我們的專案中我們也是一起使用的,但是由於對kibana 的頗具熱情,所以本文是對kibana的初始 先說下專案背景,我是datawarehouse 的 免不了會對些個datastage j...