本內(nèi)容為系列內(nèi)容辩恼,全部內(nèi)容請看我的vue教程分類
Vue CLI 是一個基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)
終于就是到了這一節(jié),前面多次提到的腳手架來啦谣沸!
什么是腳手架
其實就是一個配置好了的使用webpack完成打包構(gòu)建的初始化工程,和我們前面講的webpack打包沒啥區(qū)別粥鞋,只是更為全面冰更,在實際開發(fā)中也是常用的工具
當(dāng)前最新版本為 vue-cli4 但是和 cli3區(qū)別不大所以兩個版本都是可以使用的
全局安裝cli,確保你已經(jīng)安裝了node了哦胞四,命令行執(zhí)行
npm i @vue/cli -g
使用命令行創(chuàng)建項目
使用create創(chuàng)建項目,命令行執(zhí)行伶椿,后面緊跟的是項目名辜伟,這里我起名 vueclidemo
vue create vueclidemo
開始創(chuàng)建會有一些安裝提示,選擇默認(rèn)即可
然后進(jìn)入這個項目文件夾脊另,命令行執(zhí)行
npm run serve
項目就運(yùn)行起來了
命令行執(zhí)行导狡,可以完成對項目的打包
npm run build
使用可視化工具創(chuàng)建項目
命令行執(zhí)行,打開可視化工具,這樣也能完成項目的創(chuàng)建
vue ui
當(dāng)然還可以在可視化管理工具里面導(dǎo)入我們的項目
導(dǎo)入完成后可以進(jìn)入項目的管理界面偎痛,我們點(diǎn)擊插件旱捧,安裝一個vuerouter的插件,也就是相當(dāng)于給當(dāng)前項目導(dǎo)入vuerouter
點(diǎn)擊安裝即可踩麦,完成安裝后會詢問我們當(dāng)前路由使用的模式枚赡,默認(rèn)即可,這就完成引入了谓谦,是不是非常方便呢
并且我們打開項目可以發(fā)現(xiàn)系統(tǒng)已經(jīng)默認(rèn)給我們引入并注冊了router
打開 main.js,發(fā)現(xiàn)引入了 router這個文件贫橙,并傳給了實例化的vue
然后我們打開這個 router 文件,講解一下
然后我們來到這個任務(wù)界面反粥,運(yùn)行項目
項目就啟動以后料皇,點(diǎn)擊后面的 啟動 app谓松,就來到項目界面
這就完成了腳手架的基本使用
可能遇到的問題
npm速度過慢
使用powershell提示無權(quán)限
powershell輸入
Set-ExecutionPolicy -Scope CurrentUser
然后系統(tǒng)提示輸入
RemoteSigned
一直創(chuàng)建項目失敗
卸載清除緩存重裝
npm uninstall -g vue-cli
npm uninstall -g @vue/cli
npm cache clean --force
npm install -g @vue/cli
創(chuàng)建時報錯找不到y(tǒng)arn
在你的用戶名盤下面C:\Users\Administrator,比如我是lookroot這個文件夾践剂,里面找到這個 .vuerc 文件
然后修改如下
{
"useTaobaoRegistry": true,
"packageManager": "npm",
"latestVersion": "4.3.1",
"lastChecked": 1587955070777
}