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