Vue2电商前台项目（一）：项目前的初始化及搭建

一、项目初始化

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文件，找到"scripts"进行如下修改： 

更改为→

 （2）eslint校验功能关闭

在根目录下，创建一个vue.config.js文件，添加以下代码：

const {defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
  transpileDependencies: true,
  //关闭eslint语法校验
  lintOnSave: false
})

（3） src文件简写方法。

在开发中经常会写../这类代码，很不方便，可以给src起一个别名，后面编写代码时会方便很多。

//jsconfig.json 配置别名@提示  【@代表的是src文件夹，这样将来文件过多，找的时候方便很多】
{
    "compilerOptions":{
        "baseUrl":"./",
        "paths":{
            "@/*":["src/*"]
        }
    },
    "exclude":["node_modules","dist"]
}

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

1.项目的路由分析       

vue-router   前端所谓的路由：key-Value键值对

key：URL （地址栏中的路径）

value：相应的路由组件

注意：项目的上中下结构

分析：

• 在点击搜索后，顶部的header和底部的footer都没有改变，说明header和footer两个组件为非路由组件。而中间的Home和Search组件发生了变化，所以这两个组件为路由组件。
• 点击登录和注册按钮后，顶部Header没有发生变化，但中间Home和底部Footer发生改变。

总结：

• 路由组件：Home首页路由组件、Search路由组件
• 非路由组件：Header组件、Footer组件【在首页Home和搜索页Search存在，在登录页Login和注册组件 不存在】

2.开发项目时的基本流程 

（1）书写静态页面（HTML+CSS）

（2）拆分组件

（3）获取服务器的数据动态展示

（4）完成相应的动态业务逻辑

3.非路由组件搭建及注意事项

基本步骤：

• 创建组件
• import引入组件
• 在components中注册组件 

1.创建组件的时候，要提前准备好  组件的结构 + 组件的样式 + 图片资源。

2.项目采用less样式，浏览器不识别less样式，需要通过less、less-loader进行处理。

3.如果想让组件识别less，需要在style标签上加上lang="less"。

4.路由组件的搭建及注意事项

vue-router  在2.1分析的时候，路由组件应该有四个：Home、Search、Login、Register

1. components文件夹：经常放置非路由组件
2. pages|views文件夹：经常放置路由组件

总结：

路由组件与非路由组件的区别？

1. 路由组件一般放置在 pages | views 文件夹中，非路由组件一般放置在 components 文件夹中。
2. 路由组件一般需要在 router 文件夹中进行注册，非路由组件在使用的时候，一般都是以标签的形式使用。
3. 注册完路由，不管是路由组件还是非路由组件，他们身上都有 $route 和 $router 属性

• $route：一般获取路由信息【路径、query、params等】
• $router：一般进行编程式导航进行路由跳转【push | replace】

重定向 

路由的跳转？ 

路由的跳转有两种形式：

• 声明式导航 router-link，可以进行路由的跳转
• 编程式导航 push | replace ，可以进行路由跳转

注意：声明式导航能做的，编程式导航都能做 。编程式导航除了可以进行路由跳转，还可以进行其它的业务逻辑。

5.Footer组件的显示与隐藏

组件的显示与隐藏： v-if | v-show

Footer 组件：在Home、 Search 下显示Footer组件；在Login、 Register 下隐藏。

1. 我们可以根据组件身上的$route 来获取当前路由的信息。

//当路径是home或者search时为True，显示Footer组件；反之为False，隐藏Footer
<Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer>

1. 配置路由的时候，可以在router文件夹下面的index.js中给路由添加路由元信息【meta】。

 //配置路由
    routes: [
        {
            path: '/home',
            component: Home,
          //meta 为数据的元信息
            meta:{show:true}
        },
        {
            path: '/login',
            component: Login
        },
        {
            path: '/register',
            component: Register
        },
        {
            path: '/Search',
            component: Search,
          //meta 为数据的元信息
            meta: { show: true }
        },

    ]

回到App组件中： 

在App.vue 中通过元信息来控制Footer组件的显示与隐藏
<Footer v-show="$route.meta.show"></Footer>

注意：路由的配置对象是唯一的，它的key不能随便写。

四、路由传参

1.路由跳转的两种方式：声明式导航 和 编程式导航

• 声明式导航：使用 vue-router 标签，标签中务必要有to属性。
• 编程式导航：通过$route.push | $route.replace 的方法来实现路由的跳转。

2.路由传参，参数的几种写法：params参数 和 query参数

params参数：属于路径当中的一部分，需要注意：在配置路由的时候，需要占位。

query参数：不属于路径当中的一部分。类似于ajax中的queryString /home?k=v&kv= ，不需要占位

3.路由传参面试题

路由传递参数（对象写法）path是否可以结合params参数一起使用？

答：路由跳转传参的时候，对象的写法可以是name、path形式，但是path写法不能与params参数一起使用。

如何指定params参数可传可不传？

答：配置路由的时候，进行了占位操作，但在路由跳转的时候不传递params参数，此时url路径会出现问题。如何指定？在配置路由的时候，在占位的后面加上一个问号，则表示params参数可传可不传。

params参数可传可不传，但是如果传递的是空串，如何解决？

答：params可传可不传，为了防止传递的是空串，需要使用undefined解决。

 路由组件能不能传递props？

答：可以，有三种写法。

1.布尔值写法：只能传递params参数

在路由配置项中配置props属性值为true，在路由组件中使用props接受。

2.对象写法：额外给路由组件传递一些参数

在路由配置项中配置props属性值为对象形式，在路由组件中使用props接受。

3.函数写法：可传递params参数、query参数，通过props传递给路由组件

解决bug

Bug：编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuplicated的警告错误

路由跳转的形式有两种：声明式导航和编程式导航

声明式导航没有这类问题，因为vue-router在底层处理好了，不会出现这个警告

1.为什么编程式导航在进行路由跳转的时候，会出现这种警告错误？

答： 

1.通过给push方法传递相应的成功、失败的回调函数，捕获到当前错误，成功解决出现警告的问题。这种写法治标不治本，在其它别的路由组件中如果用到push | replace 时，编程式导航还是会出现这个错误。

2.重写push | replace 来解决。

// 重写push方法解决多次跳转路由的报错问题
// 1.把VueRouter原型对象的push备份
let originPush = VueRouter.prototype.push
// 2.重写push，告诉原来的push方法 要往哪里传递参数
VueRouter.prototype.push=function(location,resolve,reject){
    if(resolve&&reject){
        originPush.call(this,location,resolve,reject)
    }else{
        originPush.call(this,()=>{},()=>{})
    }
}

// 重写replace方法解决多次跳转路由的报错问题
// 1.把VueRouter原型对象的replace备份
let originReplace = VueRouter.prototype.replace
// 2.重写push，告诉原来的push方法 要往哪里传递参数
VueRouter.prototype.replace = function (location, resolve, reject) {
    if (resolve&&reject) {
        originReplace.call(this, location, resolve, reject)
    } else {
        originReplace.call(this, () => { }, () => { })
    }
}