vue項(xiàng)目創(chuàng)建并引入餓了么elementUI組件的步驟
1:安裝node
前端開發(fā)框架和環(huán)境都是需要 Node.js ,先安裝node.js開發(fā)環(huán)境,vue的運(yùn)行是要依賴于node的npm的管理工具來實(shí)現(xiàn),下載,安裝完成之后,打開cmd開始輸入命令。(我用的是win10系統(tǒng),所以需要管理員權(quán)限,右鍵點(diǎn)擊以管理員身份運(yùn)行cmd),不然會(huì)出現(xiàn)很多報(bào)錯(cuò)。
2:查看node的版本號(hào)
輸入命令:node -v;
3:安裝淘寶npm鏡像
由于npm是國(guó)外的,使用起來比較慢,我們這里使用淘寶的cnpm鏡像來安裝vue. 淘寶的cnpm命令管理工具可以代替默認(rèn)的npm管理工具。
輸入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
4:安裝全局vue-cli腳手架
淘寶鏡像安裝成功之后,我們就可以全局vue-cli腳手架,輸入命令:cnpm install --global vue-cli 回車;驗(yàn)證是否安裝成功,在命令輸入vue,出來vue的信息,及說明安裝成功;因?yàn)楸救朔瓑?,?xí)慣用npm所以后面的命令依然用npm運(yùn)行;
輸入命令:npm install --global vue-cli
5:開始進(jìn)入主題,初始化一個(gè)vue項(xiàng)目
輸入命令,itemname是你的項(xiàng)目名稱
輸入命令:vue init webpack itemname
其中vue build 一般選擇Runtime-only,如果需要編譯則選擇Runtime + Compiler,但會(huì)影響性能;
ESlint是檢查代碼,一般選擇安裝,選Standard;
Pick a test runner 選擇Jest
如果出現(xiàn)以下截圖,說明已經(jīng)成功了,輸入命令,運(yùn)行項(xiàng)目
6:安裝 elementUI
輸入命令:npm i element-ui -S
這里解釋以下 -S指生產(chǎn)環(huán)境,-D指開發(fā)環(huán)境
element-ui安裝在了這里
7:測(cè)試一下ElementUI是否可用;
在項(xiàng)目的src/components目錄下新建test.vue,具體代碼如下:
<template> <div> <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> </el-row> <el-row> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> </el-row> </div> </template> <script> export default{ name:"test", data(){ return{ data:"這是測(cè)試數(shù)據(jù)", } } } </script> <style lang="css"> .el-row { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; } </style>
然后在路由中引入test.vue,路由位置:src/router/index.js,代碼如下:
然后在瀏覽器地址欄輸入http://localhost:8080/#/test,(前提已經(jīng)運(yùn)行了npm run dev)如果看到一下界面說明已經(jīng)成功了
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue如何在for循環(huán)中設(shè)置ref并獲取$refs
眾所周知在寫循環(huán)的時(shí)候給循環(huán)中的數(shù)據(jù)定義ref以便再下面直接通過this.$ref.來訪問,下面這篇文章主要給大家介紹了關(guān)于vue如何在for循環(huán)中設(shè)置ref并獲取$refs的相關(guān)資料,需要的朋友可以參考下2022-12-12vue-editor-bridge報(bào)錯(cuò)的解決方案
這篇文章主要介紹了vue-editor-bridge報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue實(shí)現(xiàn)移動(dòng)端適方案的完整步驟
現(xiàn)在的手機(jī)五花八門,造就了移動(dòng)端窗口分辨率繁多的局面,在不同分辨率的屏幕下保持與UI圖一致的效果,就成了讓前端不得不頭疼的問題,下面這篇文章主要給大家介紹了vue實(shí)現(xiàn)移動(dòng)端適方案的相關(guān)資料,需要的朋友可以參考下2022-10-10vue+高德地圖實(shí)現(xiàn)地圖搜索及點(diǎn)擊定位操作
這篇文章主要介紹了vue+高德地圖實(shí)現(xiàn)地圖搜索及點(diǎn)擊定位操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09Vant的Tabbar標(biāo)簽欄引入自定義圖標(biāo)方式
這篇文章主要介紹了Vant的Tabbar標(biāo)簽欄引入自定義圖標(biāo)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04使用Webstorm調(diào)試Vue代碼詳細(xì)圖文教程
WebStorm是一款優(yōu)秀的前端開發(fā)IDE,之前一直可以調(diào)試Vue項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于使用Webstorm調(diào)試Vue代碼的詳細(xì)圖文教程,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject
provide和inject可以實(shí)現(xiàn)嵌套組件之間進(jìn)行傳遞數(shù)據(jù),這兩個(gè)函數(shù)都是在setup函數(shù)中使用的,下面這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)筆記之依賴注入Provide?/?Inject的相關(guān)資料,需要的朋友可以參考下2023-05-05