vue3 0工程化專案搭建

2021-10-25 19:54:44 字數 1710 閱讀 2218

簡述、以下為vue3.0 vue-cli4.0搭建工程化專案的方法,有誤地方感謝更正。

一、 安裝 腳手架

npm install @vue/cli   -g  沒有指定版本則為cli最高版本

二、建立專案

三、選擇定義手動配置

四、選擇配置

五、選擇vue 版本 3.0

六、選擇模式

1.hash模式的原理(url帶有#號部分):

在vue-router.js的2.8版本之前,在路由的hash部分發生了任何變化,都會執行window.onhashchange方法,在這個方法內部我們可以根據當前匹配到的hash去載入對應的元件

在vue-router.js的2.8版本之後,內部使用window.history.pushstate來完成相應的功能

hash模式的特點:在切換路由的時候,不會向伺服器傳送請求,但是重新整理網頁的時候,此時會向伺服器傳送請求,在向伺服器傳送請求的時候,hash部分的資訊是不會傳送到伺服器的,所以此時重新整理網頁沒有問題

localhost:8888        --->載入spa單頁面應用程式

localhost:8888#index  --->當localhost:8888切換到localhost:8888#index 沒有傳送請求

localhost:8888#login  --->當localhost:8888#index切換到localhost:8888#login 沒有傳送請求     

localhost:8888#login  --->當我們直接重新整理瀏覽器的時候,此時會向伺服器傳送請求,但是我們請求url的中hash部分不會提交到伺服器,所以真正的請求位址是localhost:8888,就相當於此時重新去載入spa單頁面應用程式

2.history模式的原理(url中通過/表示路徑)

內部使用window.history.pushstate來處理url的變化,切換對應的元件

history模式的特點:在切換路由的時候,不會向伺服器傳送請求,但是當重新整理網頁的時候,此時會向伺服器傳送請求,如果後端沒有對應的介面與此匹配,此時會報資源找不到的錯誤

history模式一般情況下不能重新整理網頁

七、選擇檔案配置存放的位置

八、選擇這次的為以後的選擇嗎

九、啟動專案

十、啟動成功

Vue 3 0 學習記錄 搭建

使用vue cli的vue create 或者vue ui搭建專案 搭建專案時,需要新增vue router 以及uvex等常用模組 因為當前3.0vue專案是由vue2.0專案公升級來的,所以需要加建立專案時增加所需的模組,在將專案公升級為3.0專案是會自動修改,可以避免寫初始化 vue add ...

vue工程化管理

載入使用到的資源 最小化載入原則 編寫html css 如何從c盤到e盤 直接在cmd 輸入e 回車 projecta bindocs plugins logs package.json 記錄了你當前環境安裝的工具包有哪些 node.js nvm node的版本管理工具 npm解除安裝vue cli...

vue工程化之專案引入jquery

既然寫專案,那麼少不了用jq,那我們就引入進來吧 1 因為已經安裝了vue腳手架,所以需要在webpack中全域性引入jquery 開啟package.json檔案,在裡面加入這行 jquery後面的是版本,根據你自己需求更改。2 然後在命令列中cnpm install 大多人應該都是使用的 映象,...