新聞中心
上一節(jié)已經(jīng)教大家如何創(chuàng)建一個(gè)vue項(xiàng)目,這一節(jié),我們就溫故下vue項(xiàng)目的創(chuàng)建,順便引入element,實(shí)現(xiàn)一個(gè)簡(jiǎn)答的登陸頁(yè)面。
成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)的關(guān)注點(diǎn)不是能為您做些什么網(wǎng)站,而是怎么做網(wǎng)站,有沒(méi)有做好網(wǎng)站,給創(chuàng)新互聯(lián)一個(gè)展示的機(jī)會(huì)來(lái)證明自己,這并不會(huì)花費(fèi)您太多時(shí)間,或許會(huì)給您帶來(lái)新的靈感和驚喜。面向用戶友好,注重用戶體驗(yàn),一切以用戶為中心。
老規(guī)矩,先看效果圖
一,快速創(chuàng)建vue項(xiàng)目
二,引入element類(lèi)庫(kù)
首先我們進(jìn)入element官網(wǎng):https://element.eleme.cn/#/zh-CN/component/installation
簡(jiǎn)單熟悉下element。然后如下圖所示引入element類(lèi)庫(kù)。
做完上面的操作后,不要忘記安裝依賴(lài)。
三,在main.js里引入使用
如下圖紅色框里所示
四,改造HelloWorld組件如下圖
下面我把HelloWorld.Vue的完整代碼貼出來(lái)給大家
系統(tǒng)登陸
登陸
五,運(yùn)行項(xiàng)目查看效果
運(yùn)行效果如下
到這里就完整的使用vue+element實(shí)現(xiàn)了登陸頁(yè)的ui樣式了。
后面我還會(huì)系統(tǒng)的更新更多vue入門(mén)相關(guān)的文章,還會(huì)錄制對(duì)應(yīng)的視頻出來(lái),敬請(qǐng)關(guān)注。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專(zhuān)為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
文章標(biāo)題:vue入門(mén)003~vue項(xiàng)目引入element并創(chuàng)建一個(gè)登錄頁(yè)面-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于:http://www.dlmjj.cn/article/djches.html