1:安裝node
前端開發框架和環境都是需要 Node.js ,先安裝node.js開發環境,vue的運行是要依賴于node的npm的管理工具來實現,下載,安裝完成之后,打開cmd開始輸入命令。(我用的是win10系統,所以需要管理員權限,右鍵點擊以管理員身份運行cmd),不然會出現很多報錯。
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的信息,及說明安裝成功;因為本人翻墻,習慣用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
如果出現以下截圖,說明已經成功了,輸入命令,運行項目
6:安裝 elementUI
輸入命令:npm i element-ui -S
這里解釋以下 -S指生產環境,-D指開發環境
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:"這是測試數據", } } } </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,(前提已經運行了npm run dev)如果看到一下界面說明已經成功了
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。