演示所使用到的工具:谷歌瀏覽器、HBuilder、cmd命令窗口、nodejs(自帶npm)。
1、先使用 vue create 命令創建一個項目,等待創建完成。
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、現在讓我們啟動項目服務器。
10、現在可以訪問主頁面了。
11、接下來使用HBuilder 打開 此 項目。
12、開始編寫代碼。
12.1、編輯我們的第一個Vue組件。(點擊HelloWorld.vue)
12.2、將里面默認的東西,通通干掉。
12.3、去到Element UI 直接拿它做好的組件。
12.4、打開App.vue文件,將里面一些不必要的東西刪除掉。
12.5、然后回到瀏覽器就會發現(它會自動刷新)之前的界面已經變成了,我們去Element UI官網 復制下來的示例組件。
注:這個界面不能關掉。不然瀏覽不了網址的(本地服務器),當想停止使用時按 Ctrl+C 就可以停止使用。
詳細使用請查看官網>>> http://element-cn.eleme.io/#/zh-CN/component/container