1、演示所使用到的工具:谷歌瀏覽器、HBuilder、cmd命令窗口、nodejs(自帶npm)
2、切換到項目中
3、使用 vue 命令添加 elementUI的插件(element)
4、選擇Fully import(全部導入), 也可以選擇 import on demand(按需導入) 回車鍵確認。
5、do you wish to overwrite element's SCSS variable (是否希望改寫元素的SCSS變量)
6、choose the locale you want to load( 選擇要加載的區域) 選擇zh-CN回車。
7、element插件下載完成。
8、現在我們在項目中的src文件夾中有一個plugins文件,它里面有一個element.js腳本。
9、現在讓我們啟動項目服務器。
11、接下來使用HBuilder 打開 此 項目。
12、開始編寫代碼。
12.1、編輯我們的第一個Vue組件。(點擊HelloWorld.vue)
12.2、將里面默認的東西,通通干掉。
12.3、去到Element UI 直接拿它做好的組件。
12.5、然后回到瀏覽器就會發現(它會自動刷新)之前的界面已經變成了,我們去Element UI官網 復制下來的實力組件。
注:這個界面不能關掉。不然瀏覽不了網址的(本地服務器),當想停止使用時按 Ctrl+C 就可以停止使用。
下載地址:https://github.com/nongzihong/vue_nodejs_element.git