Vue2電商前臺項目——項目的初始化及搭建

Vue基礎(chǔ)知識點擊此處——Vue.js

一、項目初始化

使用腳手架創(chuàng)建項目，在需要放置項目的目錄下打開cmd輸入：

vue create name

• 這個name是項目名（我的項目名是potato-mall

創(chuàng)建有問題或者不太熟悉的具體參考之前的腳手架配置筆記

1、腳手架目錄介紹

項目創(chuàng)建成功后，點開項目目錄，會出現(xiàn)以下文件：

這些文件說明如下：

node_modules文件夾：放置項目的依賴

public文件夾：一般放置的是靜態(tài)資源（圖片），需要注意：放在public文件夾中的靜態(tài)資源，webpack進行打包的時候，會原封不動打包到dist文件夾中，不會當做一個模塊打包到 JS 里面

src文件夾（程序員源代碼文件夾）：

• assets文件夾：一般放置的是靜態(tài)資源（一般放置多個組件公用的的靜態(tài)資源），需要注意：放置在assets文件夾里面的資源，webpack打包的時候，會把靜態(tài)資源當做一個模塊，打包到JS文件里面

• components文件夾：一般放置的是非路由組件（全局組件）

• App.vue ：唯一的根組件，Vue當中的組件都是(.vue)

• main.js：程序的入口文件，也是整個程序當中最先執(zhí)行的文件

babel.config.js：配置文件，與babel相關(guān)

package.json文件：項目“身份證”，記錄著項目信息，叫什么…有哪些依賴…項目怎么運行…

package-lock.json：緩存性文件

README.md：說明性文件

2、項目的其他配置

（1）項目運行起來時，自動打開瀏覽器

找到package.json文件，找到"scripts"進行如下修改：

"scripts": {
    "serve": "vue-cli-service serve --open",  //在后面加“--open” 運行時自動打開瀏覽器
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

（2）eslint語法校驗功能關(guān)閉。

可關(guān)可不關(guān)，開啟會報錯但是不影響代碼運行。

在根目錄下，創(chuàng)建一個vue.config.js文件（一般創(chuàng)建項目時自帶這個文件），添加以下代碼：

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  //關(guān)閉eslint語法校驗
  lintOnSave: false,
});

（3）src文件夾簡寫方法，配置別名。

在jsconfig.json文件中。@代表的是src文件夾，這樣將來文件過多，找的時候方便很多。

二、項目的路由分析及搭建

1、項目的路由分析

前端所謂路由：key-value鍵值對

key：URL（地址欄中的路徑）

value：相應的路由組件

項目結(jié)構(gòu)：上中下結(jié)構(gòu)

非路由組件：Header，Footer（首頁，搜索頁）

路由組件：Home首頁，Search搜索，login登錄（無Footer），register注冊（無Footer，可以通過條件渲染控制）

2、開發(fā)項目的步驟

1. 書寫靜態(tài)頁面（HTML，CSS）

2. 拆分組件（路由/非路由）

3. 獲取服務器的數(shù)據(jù)動態(tài)展示

4. 完成相應的動態(tài)業(yè)務邏輯

注意1：創(chuàng)建組件的時候，找準 組件結(jié)構(gòu) + 組件的樣式 + 圖片資源
注意2：項目如果采用的less樣式，瀏覽器不識別less樣式，需要通過less、less-loader【安裝六版本】進行處理less：npm i less-loader@6，如果想要組件識別less樣式，需要在style標簽加上lang=“l(fā)ess”。(如果運行時less還是報錯，可以嘗試關(guān)閉項目再重新進入重新運行上面的安裝命令)
注意3：引入清除默認樣式，將默認樣式文件放在public文件夾內(nèi)，在index.html里引入。

3、非路由組件的搭建

非路由組件一般都寫在components文件夾里，本項目有Header和Footer。

組件的使用步驟：

1. 創(chuàng)建或定義組件

2. 引入組件

3. 注冊組件

4. 使用組件

4、路由組件的搭建

（1）配置并使用路由器

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

前面我們已經(jīng)了解學習過，詳情請查看筆記——路由的基本知識及使用

路由組件有四個：Home（首頁），Search（搜索），Login（登錄），Register（注冊）

components文件夾：經(jīng)常放置 非路由組件 （公用全局組件）
pages|views文件夾：經(jīng)常放置 路由組件

項目中配置的路由一般放置在router文件夾中，在里面配置路由。

用<router-view></router-view>指定展示位置，然后登錄，注冊，搜索這幾個a標簽都換成router-link標簽，href換成to

（2）路由組件與非路由組件的區(qū)別？

1. 路由組件一般放置在pages|views文件夾，非路由組件一般放置在components文件夾中

2. 路由組件一般需要在router文件夾中的index.js文件中配置路由規(guī)則（使用路徑和組件名字等屬性），非路由組件在使用的時候，一般都是以標簽的形式使用

3. 注冊完路由，不管是路由組件還是非路由組件，身上都有 $route,$router屬性
   route就是當前顯示的路由組件的一些信息，比如路徑，name，meta等等
   $router：一般進行編程式導航進行路由跳轉(zhuǎn)【push | replace】

(3)重定向

在項目跑起來的時候，訪問/，立馬讓他定向到首頁 寫在 src/router/index.js文件里

（4）路由跳轉(zhuǎn)的兩種方式

1. 聲明式導航router-link

2. 編程式導航 push| replace

聲明式路由導航可以做的事情 編程式導航都能做，除此之外，編程式導航還能做一些其他的業(yè)務

這兩種路由跳轉(zhuǎn)方式在前面筆記有，并且有案例說明，詳情點擊此處——編程式路由導航

• 如果只是路由跳轉(zhuǎn)，沒有其他業(yè)務邏輯，使用聲明式導航router-link

• 如果路由跳轉(zhuǎn)時需要其他業(yè)務邏輯，比如傳參，可以使用編程式導航

這里的搜索按鈕需要帶著搜索框里的輸入信息進行路由跳轉(zhuǎn)，使用編程式導航：

注意：使用編程式導航時這里的搜索按鈕多次點擊重復導航可能出現(xiàn)報錯的情況，可以在每次調(diào)用時加上捕獲異常的方法，也可以在route/index.js里加上下面這段代碼解決這個問題，原理是對Router原型鏈上的push、replace方法進行重寫，用call改變this指向，拋出異常。

let originPush =  VueRouter.prototype.push;  //備份原push方法
 
VueRouter.prototype.push = function (location, resolve, reject){
    if (resolve && reject) {    //如果傳了回調(diào)函數(shù)，直接使用
        originPush.call(this, location, resolve, reject);
    }else {                     //如果沒有傳回調(diào)函數(shù)，手動添加
        originPush.call(this, location, ()=>{}, ()=>{}); 
    }
}

三、Footer組件的顯示與隱藏——路由元信息

顯示或隱藏組件：v-if / v-show
Footer組件在 Home，Search中是顯示的，在Login和Register中是隱藏的
我們可以根據(jù)$route.path是否是home或search來控制Footer的顯示與隱藏

<Header></Header>
<!-- 路由組件出口 -->
<router-view></router-view>
<!-- 在Home、Search顯示，其他隱藏 -->
<Footer
	v-show="$route.path === '/home' || $route.path === '/search'"
>
</Footer>

但是如果有很多組件都要顯示Footer呢？就要寫很多，這樣不太好。

this.$route里存放著當前頁面路徑下的路由信息，我們可以利用其中的meta屬性，也就是路由元信息

四、路由傳參

params和query參數(shù)是可以一起傳的

1、復習路由跳轉(zhuǎn)的兩種方式

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

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

2、路由傳參，參數(shù)有幾種寫法？

參數(shù)分別有params參數(shù)和query參數(shù)，詳情請點擊此處——路由傳參

query參數(shù)：/home?k=v&kv=，不需要占位

params參數(shù)：在配置路由的時候，需要占位

路由攜帶params參數(shù)時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置！而且params需要去占位！

3、路由傳參復習題（?）

1. 路由傳遞參數(shù)(對象寫法) path是否可以結(jié)合params參數(shù)一起使用？

   不可以。路由跳轉(zhuǎn)傳參的時候，對象的寫法可以是name，path的形式，但需要注意的是，path這種寫法不能與params參數(shù)一起使用

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

比如：配置路由的時候如果已經(jīng)給params參數(shù)占位了但不寫問號，那么路由跳轉(zhuǎn)的時候不傳遞params參數(shù)，路徑就會出現(xiàn)問題 。你跳轉(zhuǎn)的本來是 http://localhost:8080/#/search/k=QWE 這個位置，結(jié)果你跳轉(zhuǎn)的是 http://localhost:8080/#/k=QWE 這個位置，search路徑直接沒了，這可不行

3. params參數(shù)可傳遞也可以不傳遞，但是如果傳遞是空串，如何解決？

   若有占位符也有問號，但傳遞的是空串的話，路徑也會有問題（和上面路徑問題一樣，search直接沒了）

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

  params:{
            keyWord:'' || undefined,
          },

4. 路由組件能不能傳遞props數(shù)據(jù)？
   可以的，有三種寫法：對象式，布爾值，函數(shù)式，具體見筆記路由中的props配置

五、解決bug

編程式路由跳轉(zhuǎn)到當前路由（參數(shù)不變），多次執(zhí)行會拋出NavigationDuplicated的警告錯誤？

因為路由跳轉(zhuǎn)有兩種形式：聲明式導航，編程式導航，其中聲明式導航?jīng)]有這類問題，因為vue-router底層已經(jīng)處理好了

為什么編程式導航進行路由跳轉(zhuǎn)的時候，就有這種警告錯誤？

1、“vue-router”: “^3.6.4”：最新的vue-router引入promise，push返回的是promise，promise有兩個形參，成功返回的函數(shù)和失敗返回的函數(shù)

通過push方法傳遞相應的成功，失敗的回調(diào)函數(shù)，可以捕獲到當前錯誤，可以解決

通過下面的代碼可以實現(xiàn)解決錯誤

this.$router.push({
          // 第三種：對象寫法
          name:'sousuo',
          // params參數(shù)
          params:{
            keyWord:'' || undefined,
          },
          // query參數(shù)
          query:{
            k:this.keyWord.toUpperCase()
          }
        },()=>{},()=>{})

這種寫法治標不治本，將來在別的組件當中 push | replace，編程式導航還是有類似錯誤
由于this是組件，$router是VueRouter的一個實例，它可以訪問到VueRouter原型對象上的push，所以我們通過重寫push方法， 就可以解決問題。（上文提到過）文章來源地址http://www.zghlxwxcb.cn/news/detail-697312.html

// 以下代碼在src/router/index.js文件中

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

到了這里，關(guān)于Vue2電商前臺項目——項目的初始化及搭建的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！