最近自己鼓搗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...