當(dāng)我們?cè)陂_(kāi)發(fā)Vue項(xiàng)目的時(shí)候通常會(huì)選擇Element-UI作為我們的UI框架,其官方中文文檔地址是http://element.eleme.io/#/zh-CN.(我在一次跟朋友聊天中得知他們公司前端在使用Element-UI),我在工作中一直在使用Extjs6.0前端框架,作為一個(gè)老牌重框架,它自帶UI組件,需要什么組件拿來(lái)用就好.比如說(shuō)一個(gè)日期插件,找到它的xtype,編寫(xiě)好配置項(xiàng)就好了.因?yàn)樗墓俜轿臋n中也給出了一個(gè)較為完整的基礎(chǔ)模板(ionic也如此),特別適合后臺(tái)管理系統(tǒng).我也想當(dāng)然的認(rèn)為Element-UI也會(huì)有自帶的默認(rèn)模板.查文檔,上網(wǎng)搜也沒(méi)有發(fā)現(xiàn).想要搭建一個(gè)Vue加Element-UI的項(xiàng)目就得從零開(kāi)始.
假定我們已經(jīng)有一個(gè)npm安裝的Vue基本項(xiàng)目了,那么我們需要在我們的項(xiàng)目中安裝Element-UI,終端進(jìn)入項(xiàng)目目錄,然后輸入以下命令,參數(shù)--save表明在你發(fā)布項(xiàng)目的時(shí)候也需要依賴(lài)此npm包
$ npm install element-ui --save
安裝完畢以后,我們的項(xiàng)目的package.json的dependencies字段就會(huì)多出element-ui這一項(xiàng)和其相應(yīng)的版本
我們需要的依賴(lài)已經(jīng)安裝完畢,接下來(lái)就是在項(xiàng)目中注冊(cè)應(yīng)用它.在項(xiàng)目的main.js下,需要import element-UI,import ElementUI from 'element-ui',接下來(lái)還需要import一個(gè)css文件,import 'element-ui/lib/theme-default/index.css',在Vue中使用element-ui,Vue.use(ElementUI),現(xiàn)在就可以在項(xiàng)目中使用element-ui了
至此,就可以在項(xiàng)目中引用element-ui的組件啦.
引用element-ui以后,我們當(dāng)然要使用sass,接下里我們需要在項(xiàng)目中安裝sass-loader以及node-sass,因?yàn)閟ass是在開(kāi)發(fā)過(guò)程中所依賴(lài)的npm包,所以安裝它們時(shí)需要添加--save-dev參數(shù)
$npm install sass-loader --save-dev
$npm install node-sass --save-dev
安裝成功以后我們?cè)趐ackage.json中就可以看到依賴(lài)項(xiàng),在項(xiàng)目中的component里style標(biāo)簽中添加lang="scss"屬性就可以使用scss語(yǔ)法了.
