目錄

一、項目初始化

1、腳手架目錄介紹

2、項目的其他配置

?（1）項目運行的時候，讓瀏覽器自動打開

（2）關閉語法檢查工具

（3）src文件夾的簡寫形式，配置別名，方便以后訪問。

?二、項目路由搭建

1、項目路由分析

（1）Vue-router路由介紹

（2）組件分析

2、開發項目步驟

3、非路由組件的搭建

4、路由組件的搭建

（1）安裝路由器

?（2）引入路由組件

（3）路由重定向

（4）路由跳轉

三、Footer組件的顯示與隱藏

四、 路由傳參

1、路由跳轉的兩種方式

2、路由傳參，參數有幾種書寫方式

3、路由傳參面試題

五、解決NavigatioDuplicated警告

---

一、項目初始化

使用腳手架創建項目，安裝腳手架npm install -g @vue/cli， 創建項目vue crete app,

我起名為app。

1、腳手架目錄介紹

node_modules文件夾：放置項目的依賴public文件夾：一般放置的是靜態資源（圖片），需要注意：放在public文件夾中的靜態資源，webpack進行打包的時候，會原封不動打包到dist文件夾中，不會當做一個模塊打包到 JS 里面src文件夾（程序員源代碼文件夾）：? —assets文件夾：一般放置的是靜態資源（一般放置多個組件公用的的靜態資源），需要注意：放置在assets文件夾里面的資源，webpack打包的時候，會把靜態資源當做一個模塊，打包到JS文件里面（靜態資源直接使用）? —components文件夾：一般放置的是非路由組件（全局組件）? —App.vue ：唯一的根組件，Vue當中的組件都是(.vue)? —main.js：程序的入口文件，也是整個程序當中最先執行的文件babel.config.js：配置文件，與babel相關package.json文件：記錄著項目信息，叫什么…有哪些依賴…項目怎么運行…package-lock.json：緩存性文件README.md：說明性文件

2、項目的其他配置

?（1）項目運行的時候，讓瀏覽器自動打開

找到package.json文件夾,在”script”進行如下修改

"scripts": {"serve": "vue-cli-service serve --open","build": "vue-cli-service build","lint": "vue-cli-service lint"},

（2）關閉語法檢查工具

找到vue.config文件夾，書寫一下代碼

? //關閉eslint(語法檢查工具)lintOnSave:false

（3）src文件夾的簡寫形式，配置別名，方便以后訪問。

在jsonfig.json文件夾下做如下配置即可。

【但是’@’不能在”node-modules”,”dist”中使用】

?二、項目路由搭建

1、項目路由分析

（1）Vue-router路由介紹

前端路由：KV鍵值對

Key:URL(地址欄路徑)

Value:相應的路由組件

這次的項目是上中下結構

（2）組件分析

路由組件

Home首頁路由組件、Search路由組件、Refister注冊路由

非路由組件

Header、Footer【首頁、搜索頁】，但是在登錄頁沒有

2、開發項目步驟

（1）書寫靜態頁面（HTML + CSS）

（2）拆分組件

（3）獲取服務器組件進行相應展示

（4）完成動態邏輯

注意1：創建組件：組件結構 + 組件樣式 + 圖片資源

注意2：項目采用less樣式，瀏覽器不識別less樣式，需要將less變化成css樣式才可以處理，需要通過less、less-loader【安裝6版本進行處理】， npm i less-loader@6,想要組件識別樣式，需要在style上加上lang=”less”

注意3：引入清除默認樣式，將默認樣式文件放在public文件夾內，在index.html里引入。?<link rel="stylesheet" href="<./css/reset.css">

3、非路由組件的搭建

非路由組件一般放在components文件夾下，本項目非路由組件有Header和Footer

步驟：創建或定義組件、引入組件、注冊組件、使用組件

4、路由組件的搭建

（1）安裝路由器

Vue2安裝vue-router，命令：npm i vue-router@3

Vue3安裝vue-router，命令：npm i vue-router??

路由組件有四個：Home，Search，Login，Register（注冊）

components文件夾：經常放置 非路由組件 （公用全局組件）

pages|views文件夾：經常放置 路由組件

?

?（2）引入路由組件

（3）路由重定向

讓項目在跑起來的時候自動定位到某個路由組件的，在src/router/router.js做如下配置

（4）路由跳轉

聲明式導航router-link，【to屬性決定了跳轉到路由】

編程式導航push|replace

編程式導航：聲明式導航能做的編程式導航都能做，

但是編程式導航除了可以進行路由跳轉，還可以處理一些業務邏輯。

三、Footer組件的顯示與隱藏

Footer組件：在Home、Search顯示，但是在注冊和登錄的時候隱藏

實現方法：v-if|v-show

我們可以根據組件身上的$route獲取當前路由的信息，通過路由組件的路徑判斷進行顯示或者隱藏，但是如果路由組件太多，則過于麻煩

這里我們通過路由元信息進行實現，

這時候在App.vue組件中使用Footer組件中進行判斷即可

<Footer v-show="$route.meta.show"></Footer>

四、 路由傳參

1、路由跳轉的兩種方式

聲明式導航：router-link（務必要有to屬性）

編程式導航：利用的是組件實例的$router.push | replace 方法

2、路由傳參，參數有幾種書寫方式

parmars參數：屬于路徑當中的一部分，需要注意，在配置路由的時候，【需要占位】

query參數：不屬于路徑當中的一部分，類似于ajax中的queryString /home?k=v&k=v,不需要占位

? ? goSearch(){//路由傳參// 1、字符串形式// this.$router.push('/search/' + this.keyword + "?k=" + "我笑了")// 2、模板字符串// ?this.$router.push(`/search/${this.keyword}?k=我笑了`)// 3、對象寫法,需要在跳轉的路由中配置name屬性this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:'我笑了'}})}

3、路由傳參面試題

（1）路由傳遞參數(對象寫法) path是否可以結合params參數一起使用？

答：不可以。路由跳轉傳參的時候，對象的寫法可以是name，path的形式，但需要注意的是，path這種寫法不能與params參數一起使用，即不能直接在路徑中+參數。

（2）如何指定params參數可傳可不傳？
在配置路由的時候，給params占位 的后面加上?，代表可傳遞也可以不傳遞

（3）params參數可傳遞也可以不傳遞，但是如果傳遞是空串，如何解決？
若有占位符也有問號，但傳遞的是空串的話，路徑也會有問題（和上面路徑問題一樣，search直接沒了）

使用undefined解決：params參數可傳遞不可傳遞的時候，傳遞是空串路徑有問題的錯誤

?params:{//如果沒有params參數是空字符串，那就傳遞undefined，即什么都傳keyword:this.keyword || undefined},

（4）路由組件能不能傳遞props數據？
可以的，直接在路由中配置props:{a:1,b:2},有三種寫法：對象式，布爾值，函數式

五、解決NavigatioDuplicated警告

編程式路由跳轉到當前路由（參數不變），多次執行會拋出NavigatioDuplicated的警告錯誤

警告原因：“vue-router”: “^3.6.4”：最新的vue-router引入promise，push返回的是promise，promise有兩個形參，成功返回的函數和失敗返回的函數

解決方法：我直接在后面加上catch(),解決失敗回調問題，但是這種書寫方式下次跳轉還需要書寫，所以通過重寫push方法解決

// 以下代碼在src/router/index.js文件中//重寫push和replace解決重復點擊報錯的問題 //先把VueRouter原型對象的push和replace，先保存一份 let originPush = VueRouter.prototype.push let originReplace = VueRouter.prototype.Replace //重寫push|replace方法 //第一個參數：告訴原來push方法，往哪里跳轉（傳遞哪種參數） //第一個參數：成功的回調 //第三個參數：失敗的回調 VueRouter.prototype.push = function(location,resolve,reject){if(resolve && reject){//call||apply：相同點：都可以調用函數一次，都可以篡改函數的上下文一次//不同點：call與apply傳遞參數：call傳遞參數多個參數用逗號隔開，而apply方法執行要傳遞數組//調用originPush，把this指向push的調用者originPush.call(this,location,resolve,reject)}else{originPush.call(this,location,()=>{},()=>{})} } //第一個參數：告訴原來replace方法，往哪里跳轉（傳遞哪種參數） VueRouter.prototype.replace = function(location,resolve,reject){if(resolve && reject){originReplace.call(this,location,resolve,reject)}else{originReplace.call(this,location,()=>{},()=>{})} }

總結

以上是生活随笔為你收集整理的vue电商项目(一)——项目搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。