vue2项目（一）

项目介绍

电商前台项目

技术架构：vue+webpack+vuex+vue-router+axios+less..

• 封装通用组件
• 登录注册
• token
• 购物车
• 支付
• 项目性能优化

一、项目初始化

使用vue create projrct_vue2在命令行窗口创建项目

1.1、脚手架目录介绍

├── node_modules:放置项目的依赖
├── public:一般放置的是静态资源（图片），需要注意：放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中，不会当做一个模块打包到 JS 里面
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src:程序员源代码文件夹
│   ├── assets: 存放静态资源(一般放置多个组件公用的的静态资源），需要注意：放置在assets文件夹里面的资源，webpack打包的时候，会把静态资源当做一个模块，打包到JS文件里面
│   │   └── logo.png
│   │── component: 存放组件【一般放置的是非路由组件（全局组件）】
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件(唯一的根组件，Vue当中的组件都是(.vue))
│   │── main.js: 入口文件(程序的入口文件，也是整个程序当中最先执行的文件)
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件(记录着项目信息，叫什么…有哪些依赖…项目怎么运行…) 
├── README.md: 应用描述文件，说明性文件
├── package-lock.json：包版本控制文件,缓存性文件

1.2、项目的其他配置

2.1、项目运行起来的时候，让浏览器自动打开。【我不想把默认浏览器设置成Google，但是又想调整项目的时候使用Google浏览器，所以我选择手动打开，没有修改此处的文件】
找到package.json文件，找到"scripts"进行如下修改：

2.2、eslint语法校验功能关闭。

修改vue.config.js文件：

2.3、src文件夹简写方法，配置别名。【默认配置好了的】

在jsconfig.json文件中。@代表的是src文件夹，这样将来文件过多，找的时候方便很多。

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

2.1、项目的路由分析

本项目和品优购差不多，上中下结构的  

前端所谓路由：key-value键值对

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

value：相应的路由组件

非路由组件：

• Header
• Footer（首页，搜索页）

路由组件：

• 【Home首页】
• 【Search搜索】
• 【login登录（无Footer）】
• 【register注册（无Footer，可以通过条件渲染搞没）】

2.2、开发项目的步骤

1. 书写静态页面（HTML，CSS）
2. 拆分组件（路由/非路由）
3. 获取服务器的数据动态展示
4. 完成相应的动态业务逻辑

• 注意1：创建组件的时候，找准 组件结构 + 组件的样式 + 图片资源
• 注意2：项目如果采用的less样式，浏览器不识别less样式，需要通过less、less-loader【安装6版本】进行处理less：npm i less-loader@6，如果想要组件识别less样式，需要在style标签加上lang=“less”。
  • 
  • 
• 注意3：引入清除默认样式，将默认样式文件放在public文件夹内，在index.html里引入。 <link rel="stylesheet" href="<./css/reset.css">
  • 

2.3、非路由组件的搭建

非路由组件都搞在components文件夹里，本项目有Header和Footer
1、创建或定义组件
2、引入组件
3、注册组件
4、使用组件

2.4、路由组件的搭建

2.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.4.2、使用路由组件

用<router-view></router-view>指定展示位置，然后登录，注册，搜索这几个a标签都换成router-link标签，href换成to

2.4.3、路由组件与非路由组件的区别

• 路由组件一般放置在pages | views文件夹，非路由组件一般放置在components文件夹中
• 路由组件一般需要在router文件夹中的index.js文件中配置路由规则（使用路径和组件名字等属性），非路由组件在使用的时候，一般都是以标签的形式使用
• 注册完路由，不管是路由组件还是非路由组件，身上都有 $route,$router属性
  • $route：一般获取路由信息【路径，query，params等等】，其实非路由组件当中的this.$route就是当前显示的路由组件的一些信息，比如路径，name，meta等
  • $router：一般进行编程式导航进行路由跳转【push | replace】

2.4.4、重定向

在项目跑起来的时候，访问/，立马让他定向到首页 写在 src/router/index.js文件里

2.4.5、路由跳转的两种方式

1. 声明式导航router-link
2. 编程式导航 push | replace

声明式路由导航可以做的事情 编程式导航都能做，除此之外，编程式导航还能做一些其他的业务

三、Footer组件的显示和隐藏--路由元信息

显示或隐藏组件：v-if | v-show
Footer组件在 Home，Search中是显示的，在Login和Register中是隐藏的
我们可以根据$route.path是否是home或search来控制Footer的显示与隐藏

若有很多组件都要显示Footer，就要写很多，这样不方便且冗余。

路由元信息 | Vue Router

定义路由的时候可以配置 meta 字段：

注意：配置的路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对象，它的key不能瞎写、胡写、乱写

 四、路由传参

params和query参数可以一起传

4.1、路由跳转的两种方式

声明式导航：router-link（务必要有to属性）

编程式导航：利用的是组件实例的$router.push | replace 方法（可以书写一些自己的业务）

4.2、路由传参，参数的写法

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

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

methods: {//搜索按钮的回调函数，需要向search路由进行跳转goSearch() {//路由传递参数//第一种：字符串形式//this.$router.push('/search/' + this.keyword + '?k=' + this.keyword.toUpperCase());//第二种传参方式:模板字符串//this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);//第三种传参方式:对象写法this.$router.push({// path: '/search',  注意：此处和params一起时不能用path只能namename: 'search',params: { keyword: this.keyword },query: { k: this.keyword.toUpperCase() },})},},

注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！而且params需要去占位！

4.3、路由传参面试题

1、路由传递参数(对象写法) path是否可以结合params参数一起使用？
      不可以。路由跳转传参的时候，对象的写法可以是name，path的形式，但需要注意的是，path这种写法不能与params参数一起使用

2、如何指定params参数可传可不传？
     在配置路由的时候，给params占位 的后面加上?，代表可传递也可以不传递

     

例：配置路由的时候如果已经给params参数占位了但不写问号，那么路由跳转的时候不传递params参数，路径就会出现问题 。你跳转的本来是 http://localhost:8080/#/search/k=QWE 这个位置，结果你跳转的是 http://localhost:8080/#/k=QWE 这个位置，search路径直接没了

3、params参数可传递也可以不传递，但是如果传递是空串，如何解决？
     若有占位符也有问号，但传递的是空串的话，路径也会有问题（和上面路径问题一样，search直接没了）。使用undefined解决：params参数可传递不可传递的时候，传递是空串路径有问题的错误

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

4、路由组件能不能传递props数据？
      可以的，有三种写法：对象式，布尔值，函数式

      

五、bug解决

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

​因为路由跳转有两种形式：声明式导航，编程式导航，其中声明式导航没有这类问题，因为vue-router底层已经处理好了

1. 声明式导航router-link
2. 编程式导航 push | replace

为什么编程式导航进行路由跳转的时候，就有这种警告错误？

1、"vue-router": "^3.6.5"：最新的vue-router引入promise，push返回的是promise，promise有两个形参，成功返回的函数和失败返回的函数

通过push方法传递相应的成功，失败的回调函数，可以捕获到当前错误，可以解决

通过下面的代码可以实现解决错误

this.$router.push({// 第三种：对象写法name:'search',// params参数params:{keyWord:'' || undefined,},// query参数query:{k:this.keyWord.toUpperCase()}},()=>{},()=>{})

2、这种写法治标不治本，将来在别的组件当中 push | replace，编程式导航还是有类似错误

• this:当前组件实例(search)
• this.$router属性:当前的这个属性，属性值vueRouter类的一个实例，当在入口文件注册路由的时候，给组件实例添加$router|$route属性
• push:VueRouter类的一个实例

由于this是当前组件示例，$router是VueRouter的一个实例，它可以访问到VueRouter原型对象上的push，所以我们通过重写push方法， 就可以解决问题。