單頁面應(yīng)用程序：所有的功能只在index.html中完成
vue-cli是vue版的webpack
目錄
1??安裝vue-cli
2??創(chuàng)建項(xiàng)目
3??使用預(yù)設(shè)
4??刪除預(yù)設(shè)
5??開啟項(xiàng)目
6??項(xiàng)目文件內(nèi)容
6.1??node_moduls 中是項(xiàng)目依賴的庫
6.2??public
6.2.1??favicon.ico 是瀏覽器頁簽內(nèi)部左側(cè)的圖標(biāo)
6.2.2??index.html
6.3??src
6.3.1??asset
6.3.2??components
6.3.3??App.vue
6.3.4??main.js
7??vue項(xiàng)目的運(yùn)行流程
8??在powershell vue --version 報(bào)錯(cuò)的問題
9??用可視化vue-cli
9.1??創(chuàng)建項(xiàng)目
9.2??管理項(xiàng)目
1??安裝vue-cli
vue-cli是全局包
2??創(chuàng)建項(xiàng)目
使用的時(shí)候在項(xiàng)目放置目錄中 輸入 vue create 項(xiàng)目名稱 創(chuàng)建項(xiàng)目
- 項(xiàng)目名稱不支持中文，不支持大寫字母
由于我當(dāng)前用的是默認(rèn)源，他會提醒你默認(rèn)源很慢
我這里輸入 n 然后回車，之后會讓你選擇是vue2還是vue3或者是手動選擇一些特性
一般來講我們選擇默認(rèn)的就行了，這里我們由于是第一次創(chuàng)建，所以我們選擇最后一個(gè)看一下，用方向鍵選擇到第三個(gè)，然后按回車
按下回車后會讓你選擇安裝什么，前面帶星號的是你想安裝的東西，我們每個(gè)的作用都說一下
- Babel 解決Js兼容性問題的庫
- TypeScript 一種語言，與JS類似，安裝后就可以在項(xiàng)目中使用這種語言
- Progressive Web App (PWA) Support 支持漸進(jìn)式的web框架。PWA 可以將 Web 和 App 各自的優(yōu)勢融合在一起：漸進(jìn)式、可響應(yīng)、可離線、實(shí)現(xiàn)類似 App 的交互、即時(shí)更新、安全、可以被搜索引擎檢索、可推送、可安裝、可鏈接。
- Router 路由，在工程化中前端是有自己的服務(wù)的，安裝Router可以讓用戶訪問指定的地址得到指定的內(nèi)容
- Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式， 采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，解決多組件數(shù)據(jù)通信。
- CSS Pre-processors CSS預(yù)處理，安裝這個(gè)就可以使用less,sass這種css文件了
- Linter/Formatter 這個(gè)是標(biāo)準(zhǔn)化代碼用的，安裝后，我可以指定在等號的兩端必須加上空格，不加就會報(bào)錯(cuò)
- Unit Testing 單元測試，安裝就可以僅對項(xiàng)目中的一個(gè)指定的功能進(jìn)行測試
- E2E Testing 端到端測試，安裝這個(gè)之后測試人員不需要在你的開發(fā)環(huán)境就可以進(jìn)行測試
我們這里只安裝Babel與CSS Pre-processors，用方向鍵選擇要安裝的條目，按空格鍵可以切換安裝還是不安裝
選擇完畢后按下回車，會詢問你是vue3還是vue2，這里我們選擇vue3，然后按下回車
按下回車后詢問你CSS你默認(rèn)用哪種風(fēng)格的，我喜歡用less，所以選到less然后按回車
按回車后會詢問你想 Babel 這種自己有配置文件的庫，是給你放在一個(gè)獨(dú)立的文件中(In dedicated config files)，還是都放在package.json中，我們通常都會讓他們創(chuàng)建一個(gè)獨(dú)立的文件，所以直接按回車
這個(gè)是問你是否將 你上面的配置存起來，讓你下次創(chuàng)建項(xiàng)目的時(shí)候也用這一套東西，我們這里選擇y演示一下
輸入y按下回車后，會問你這一套東西的名字，我們將其命名為test
選擇保存也好，不保存也好，選項(xiàng)完成之后都會開始創(chuàng)建項(xiàng)目
出現(xiàn)下圖這樣的結(jié)果就代表項(xiàng)目已經(jīng)創(chuàng)建成功了
3??使用預(yù)設(shè)
我們演示一下上面保存選項(xiàng)的效果，我們此時(shí)再創(chuàng)建一個(gè)項(xiàng)目
在這里就出現(xiàn)了我們剛剛保存的選項(xiàng)
4??刪除預(yù)設(shè)
在用戶文件夾下會有一個(gè)名為 .vuerc 的文件
我們用記事本打開它，發(fā)現(xiàn)預(yù)設(shè)的信息都放在這個(gè)文件中
我們可以在這里刪除指定的預(yù)設(shè)，比如我們想刪除之前的test，那么我們就刪成下面這樣
再次創(chuàng)建項(xiàng)目的時(shí)候就沒有這個(gè)預(yù)設(shè)了
5??開啟項(xiàng)目
創(chuàng)建項(xiàng)目成功后，終端會給你提示，進(jìn)入項(xiàng)目目錄，然后 npm run serve 就行了
之后使用瀏覽器訪問?http://localhost:8080?可以訪問項(xiàng)目
6??項(xiàng)目文件內(nèi)容
6.1??node_moduls 中是項(xiàng)目依賴的庫
6.2??public
6.2.1??favicon.ico 是瀏覽器頁簽內(nèi)部左側(cè)的圖標(biāo)
6.2.2??index.html
入口html文件，我們后面都是向這個(gè)id為app的div中放東西，在開發(fā)的時(shí)候我們一般不動這個(gè)index.html
6.3??src
6.3.1??asset
項(xiàng)目的靜態(tài)資源會放到這個(gè)里面，比如 圖片，樣式表 這些
6.3.2??components
這個(gè)是放組件的，比如HelloWorld.vue就是訪問服務(wù)后看到的東西
6.3.3??App.vue
項(xiàng)目的根組件
6.3.4??main.js
項(xiàng)目的入口文件
7??vue項(xiàng)目的運(yùn)行流程
vue 通過 main.js 將 App.vue 渲染到 index.html 的指定區(qū)域中
main.js與我們之前寫的代碼是很相似的
區(qū)別是 在main.js會將App傳進(jìn)去，在下面是傳數(shù)據(jù)進(jìn)去，App.vue替代了createApp()的參數(shù)
vue2好像用App.vue將 原本html中名為App的div 替換掉了，但是在vue3中沒有這種感覺
像App.vue這種vue文件，瀏覽器本身是解析不出來的，vue會通過 vue-template-compiler 將 vue 解析為 JS，這樣瀏覽器就能處理了
8??在powershell vue --version 報(bào)錯(cuò)的問題
有可能新版的vue-cli沒有這個(gè)問題了，也有可能我整別的的時(shí)候順手的就給 set-ExecutionPolicy RemoteSigned 整了，我直接輸入vue --version就有結(jié)果
9??用可視化vue-cli
9.1??創(chuàng)建項(xiàng)目
可視化方式創(chuàng)建項(xiàng)目與命令行一樣，選擇的東西都一樣，我們就簡單看一下
在想要創(chuàng)建項(xiàng)目的路徑下，輸入 vue ui，輸入后過一陣它會起一個(gè)服務(wù)
然后自動彈出這個(gè)網(wǎng)頁
點(diǎn)擊創(chuàng)建，然后點(diǎn)擊在此創(chuàng)建項(xiàng)目
填寫名稱，然后點(diǎn)擊下一步
調(diào)整一下，然后點(diǎn)擊下一步。我們這里把css預(yù)處理勾上，這樣它在最后就會多一個(gè)選項(xiàng)
無論保不保存就會進(jìn)入下面這個(gè)頁面
在頁面等待的期間，在終端中可以看到創(chuàng)建的過程
創(chuàng)建完畢后會進(jìn)入這個(gè)頁面
9.2??管理項(xiàng)目
創(chuàng)建項(xiàng)目完畢后后默認(rèn)進(jìn)入儀表盤，如果你是創(chuàng)建項(xiàng)目后關(guān)閉了服務(wù)，那么你需要進(jìn)入項(xiàng)目路徑，然后輸入vue ui
輸入后就自動彈出儀表盤的網(wǎng)頁了
我們當(dāng)前看到的頁面叫儀表盤，你可以點(diǎn)右上角的自定義來添加或刪除一些東西
管理插件
管理依賴
管理配置
可以在任務(wù)中開啟項(xiàng)目服務(wù)
在這里可以看到啟動過程
完成之后在屏幕的右下角給你彈出一個(gè)提示
可以在vue ui中看到項(xiàng)目的情況
默認(rèn)端口8080，用瀏覽器訪問就可以看到項(xiàng)目了。當(dāng)關(guān)閉 vue ui 服務(wù)后，你的項(xiàng)目服務(wù)也會隨著一起被關(guān)閉文章來源：http://www.zghlxwxcb.cn/news/detail-418205.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-418205.html
到了這里，關(guān)于13.vue-cli的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
