vue項目創(chuàng)建并引入餓了么elementUI組件的步驟
1:安裝node
前端開發(fā)框架和環(huán)境都是需要 Node.js ,先安裝node.js開發(fā)環(huán)境,vue的運行是要依賴于node的npm的管理工具來實現(xiàn),下載,安裝完成之后,打開cmd開始輸入命令。(我用的是win10系統(tǒng),所以需要管理員權(quán)限,右鍵點擊以管理員身份運行cmd),不然會出現(xiàn)很多報錯。
2:查看node的版本號
輸入命令:node -v;
3:安裝淘寶npm鏡像
由于npm是國外的,使用起來比較慢,我們這里使用淘寶的cnpm鏡像來安裝vue. 淘寶的cnpm命令管理工具可以代替默認的npm管理工具。
輸入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
4:安裝全局vue-cli腳手架
淘寶鏡像安裝成功之后,我們就可以全局vue-cli腳手架,輸入命令:cnpm install --global vue-cli 回車;驗證是否安裝成功,在命令輸入vue,出來vue的信息,及說明安裝成功;因為本人翻墻,習(xí)慣用npm所以后面的命令依然用npm運行;
輸入命令:npm install --global vue-cli
5:開始進入主題,初始化一個vue項目
輸入命令,itemname是你的項目名稱
輸入命令:vue init webpack itemname
其中vue build 一般選擇Runtime-only,如果需要編譯則選擇Runtime + Compiler,但會影響性能;
ESlint是檢查代碼,一般選擇安裝,選Standard;
Pick a test runner 選擇Jest
如果出現(xiàn)以下截圖,說明已經(jīng)成功了,輸入命令,運行項目
6:安裝 elementUI
輸入命令:npm i element-ui -S
這里解釋以下 -S指生產(chǎn)環(huán)境,-D指開發(fā)環(huán)境
element-ui安裝在了這里
7:測試一下ElementUI是否可用;
在項目的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:"這是測試數(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)運行了npm run dev)如果看到一下界面說明已經(jīng)成功了
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue如何在for循環(huán)中設(shè)置ref并獲取$refs
眾所周知在寫循環(huán)的時候給循環(huán)中的數(shù)據(jù)定義ref以便再下面直接通過this.$ref.來訪問,下面這篇文章主要給大家介紹了關(guān)于vue如何在for循環(huán)中設(shè)置ref并獲取$refs的相關(guān)資料,需要的朋友可以參考下2022-12-12Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject
provide和inject可以實現(xiàn)嵌套組件之間進行傳遞數(shù)據(jù),這兩個函數(shù)都是在setup函數(shù)中使用的,下面這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)筆記之依賴注入Provide?/?Inject的相關(guān)資料,需要的朋友可以參考下2023-05-05