element
Element -ui是一套為開辟者、設計師和產物司理籌辦的基于 Vue 2.0 的桌面端組件庫，利用它能讓你快速搭建頁面，下面是利用vue-cli腳手架搭建前端項目，然后利用element-ui組件的教程。具體的步調如下。
東西/原料
- 電腦一臺，vue,element-ui
方式/步調
- 1
第一步，我們利用vue-cli腳手架東西搭建一個前端項目（若是沒有安裝我們可以先安裝node【上官網下載安裝就可以】-然后安裝vue-cli【號令是npm install vue-cli -g】），然后我們操縱號令【vue init webpack newtest】（newtest是項目標名稱，可以本身取名字），然后搭建好vue項目，具體如下圖
- 2
第二步，搭建好vue前端項目今后，我們安裝element到項目中，我們操縱號令行東西指心猿意馬到項目根目次中，然后輸入號令【npm i element-ui -S】，具體如下圖
- 3
第三步，安裝element到項目中今后，我們將完整引入整個element，下面是官網供給的方式，具體如下圖
- 4
第四步，按照官網的教程，我們起頭引入element-ui，我們在建立好的項目中打開【src文件夾】-【main.js】下引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
具體如下圖
- 5
第五步，仍是在【main.js】上插手
Vue.use(ElementUI);
這樣就引用element完當作了，具體如下圖
- 6
第六步，我們引用element今后，我們可以利用組件吧，我們上官網隨便找一個組件，例如單選框，下面是組件具體的樣式和利用方式，具體如下圖
- 7
第七步，我們在vue項目中復制代碼，我們找到【src】-【components】-【HelloWorld.vue】，中插手方才第五步，復制的代碼進入，具體的代碼如下圖
- 8
第八步，我們運行項目（操縱號令行東西指心猿意馬到項目標根地址，然后運行【npm run dev】），然后就可以在網頁上查看結果了，發現和element官網上的一樣，大功樂成，具體如下圖
注重事項
- 有什么不懂的可以留言，我有空會幫你解決下。
- 但愿對你有幫忙
- 發表于 2019-06-24 17:02
- 閱讀 ( 855 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章