尚品汇前台笔记

_Cecilia

已于 2022-08-16 11:33:13 修改

阅读量223

点赞数

分类专栏： vue 文章标签： vue.js javascript webpack

于 2022-08-01 13:48:09 首次发布

本文链接：https://blog.csdn.net/weixin_44085020/article/details/126067555

版权

vue 专栏收录该内容

5 篇文章 3 订阅

订阅专栏

1.vue-cli 脚手架目录结构

vue-cli项目目录

node_modules文件夹：项目依赖文件夹
public文件夹：一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动地打包到dist文件夹中。
src文件夹（程序员源代码文件夹）：
     assets文件：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意。放置在assets文件夹里面的静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包在js文件里面。
     components文件夹：一般放置的是非路由组件（全局组件）
     App.vue:唯一的根组件，vue当中的组件（.vue）
     main.js:程序入口文件，也是整个程序当中最先执行的文件
babel.config.js:配置文件（babel相关）
package.json文件：认为项目‘身份证’，记录项目叫做什么、项目当中有哪些依赖、项目怎么运行
package-lock.json文件:缓存性文件
README.md:说明性文件

2. 项目的其他配置

2.1 项目运行起来的时候，让浏览器自动打开

package.json文件中修改"scripts"—>“serve”

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

2.2 eslint校验功能关闭

在根目录下，创建一个vue.config.js

module.exports = {
   // 关闭eslint
   lintOnSave: false
}

2.3 src文件夹简写方法，配置别名

新建jsconfig.json配置别名@（@代表的是src文件夹）

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
        "@/*": ["src/*"]
        }
    },
    "exclude": ["node_modules","dist"]
}

3. 项目路由分析

3.1 项目开发步骤

1.书写静态页面（html+css）
2.拆分组件
3.获取服务器的数据动态展示
4.完成相应的业务逻辑

注意1:项目采用的是less样式，浏览器不识别less样式，需通过less、less-loader进行处理less，把less样式变为css样式，浏览器才可以识别。

npm install --save less less-loader

注意2：如果想让组件识别less样式。需要在style标签身上加上lang=less

<style lang="less"></style>

3.2 配置路由

3.2.1 新建router文件夹->index.js文件

引入Vue和VueRouter

import Vue from "vue";
import VueRouter from 'vue-router'

使用插件

Vue.use(VueRouter)

引入路由组件

import Home from '@/pages/Home'

配置路由

export default new VueRouter({
    // 配置路由
    routes:[
        {
            path:'/home',
            component:Home
        }，
        // 重定向：在项目跑起来的时候，访问，立马让他定向到首页
        {
            path:'*',
            redirect:"/home"
        }
    ]
})

3.2.2 在main.js 中引入注册

引入

// 引入路由
import router from '@/router'

注册路由

new Vue({
  render: h => h(App),
  // 注册路由：下面的写法是kv一致省略v
  // 注册路由信息：当这里书写router的时候，组件身上都拥有$route,$router属性
  router
}).$mount('#app')

App.vue 显示路由

<!-- 路由组件出口的地方 -->
<router-view></router-view>

3.3 路由组件和非路由组件

3.3.1 组件的使用步骤

创建或定义组件
引入 import Header from './components/Header/index.vue'
注册 components:{Header}
使用 <Header></Header>

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

1.路由组件一般放置在pages|views文件夹,非路由组件一般放置在components文件夹中
2.路由自己一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用
3.注册完路由，不管是路由组件、还是非路由组件身上都有$route/$router属性
    $route：一般获取路由信息（路径、query、params等）
	$router:一般进行编程式导航的路由跳转（push|replace)

3.4 路由的跳转

声明式导航router-link

<!-- 声明式导航，务必要有to属性 -->
<router-link to="/login">登录</router-link>

编程式导航push|replace

//html
<button @click="goSearch">
  搜索
</button>
//js
goSearch(){
   this.$router.push('/search')
}

4. Footer组件的显示与隐藏

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

4.1 我们可以根据组件身上的$route获取当前路由的信息，通过路由路径判断Footer的显示与隐藏

<Footer v-show="this.$route.path == '/home' || this.$route.path == '/search'"></Footer>

4.2 配置路由的时候，可以给路由添加路由元信息（meta）

//router->index.js
//配置路由
{
    path: '/home',
    component: Home,
    meta: { show: true }
}
//App.vue
//根据路由元信息控制组件显示、隐藏
<Footer v-show="$route.meta.show"></Footer>

5. 路由传参

5.1 路由的跳转有几种方式

声明式导航：router-link（务必要有to属性），可以实现路由的跳转

<router-link to="/login">登录</router-link>

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

 this.$router.push('/search')

5.2 路由传参，参数有几种写法

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

//router->index.js->配置路由
{
    path: '/search/:keyword?',
    component: Search,
    meta: { show: true },
    name: 'search'
}

query参数：不属于路径当中的一部分，类似于ajax中的queryString [/home?k=v&kv=],不需要占位
路由传递参数的方式
(1)字符串形式

this.$router.push('/search/'+this.keyword+"&k="+this.keyword.toUpperCase())

(2)模板字符串

this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)

(3)对象形式

this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})

6. 路由传参相关面试题

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

答：路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用this.$router.push({path:‘/search’,params:{keyword:this.keyword}})

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

比如：配置路由的时候，占位了（params参数），但是路由跳转的时候就不传参，路径就会出现问题
如果路由要求传递params参数，但是你就不传递params参数，会发现url会有问题
如果指定params参数可以传递、或者不传递，在配置路由的时候，在占位的后面加上一个问号（params可以传递或者不传递）
this.$router.push({name:‘search’,query:{k:this.keyword.toUpperCase()}})

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

使用undefined解决
this.$router.push({name:‘search’,params:{keyword:‘’||undefined},query:{k:this.keyword.toUpperCase()}})

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

解决办法：重写push | replace

// 先把VueRouter原型对象的push，先保存一份
let originPush = VueRouter.prototype.push;
let originReplace=VueRouter.prototype.replace
// 重写push|replace
// 第一个参数：告诉原来的push方法，你往哪里跳转（传递哪些参数）
VueRouter.prototype.push = function (location, resolve, reject) {
    if (resolve && reject) {
        originPush.call(this, location, resolve, reject)
    }else{
        originPush.call(this,location,()=>{},()=>{})
    }
}

VueRouter.prototype.replace = function (location, resolve, reject) {
    if (resolve && reject) {
        originReplace.call(this, location, resolve, reject)
    }else{
        originReplace.call(this,location,()=>{},()=>{})
    }
}

8. 全局组件的使用

8.1 在main.js中引入全局组件

import TypeNav from '@/pages/Home/TypeNav'

8.2 在main.js中注册全局组件

// 第一个参数：全局组件的名字  第二个参数：哪一个组件
Vue.component(TypeNav.name,TypeNav)

8.3 使用（直接使用即可）

<!-- 三级联动全局组件：三级联动已经注册为全局组件，不用再引入了 -->
<TypeNav></TypeNav>

9. axios二级封装

9.1 为什么需要进行二次封装axios

请求拦截器：可以在发请求之前处理一些业务
响应拦截器：当服务器数据返回以后，可以处理一些事情

9.2 在项目中经常放置在api的文档

引入axios

import axios from "axios";

创建axios实例

1.利用axios对象的create方法，去创建一个axios实例
2.request就是axios，只不过稍微配置一下

const requests = axios.create({
    // 配置对象
    // 基础路径,发请求的时候,路径当中会出现api
    baseURL: "/api",
    // 代表请求超过的时间
    timeout: 5000
})

请求拦截器

请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情

// config:配置对象，对象里面有一个属性很重要，headers请求头
requests.interceptors.request.use((config) => {
    return config
})

响应拦截器

requests.interceptors.response.use((res) => {
    // 成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data
}, (error) => {
    // 响应失败的回调函数
    return Promise.reject(new Error('fail'))
})

对外暴露

export default requests

完整代码：

// 对axios进行二次封装
import axios from "axios";

// 1.利用axios对象的create方法，去创建一个axios实例
// 2.request就是axios，只不过稍微配置一下
const requests = axios.create({
    // 配置对象
    // 基础路径,发请求的时候,路径当中会出现api
    baseURL: "/api",
    // 代表请求超过的时间
    timeout: 5000
})

// 请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
// config:配置对象，对象里面有一个属性很重要，headers请求头
requests.interceptors.request.use((config) => {
    return config
})


// 响应拦截器
requests.interceptors.response.use((res) => {
    // 成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data
}, (error) => {
    // 响应失败的回调函数
    return Promise.reject(new Error('fail'))
})


// 对外暴露
export default requests

10. 统一接口管理

api->index.js（所有接口在这里进行发送请求）

10.1 引入requests

import requests from "./request";

10.2 发请求

export const reqCategoryList = () => requests({ url: "/product/getBaseCategoryList", method: 'get' })

完整代码：

// 当前这个模块，api进行统一管理
import requests from "./request";
// 发请求:axios发请求返回结果为Promise对象
export const reqCategoryList = () => requests({ url: "/product/getBaseCategoryList", method: 'get' })

11. 跨域问题

什么是跨域：协议、域名、端口号不同的请求，称之为跨域

在vue.config.js中配置代理

module.exports={
  // 代理跨域
  devServer:{
    proxy:{
      '/api':{
        target:'http://gmall-h5-api.atguigu.cn',
        pathRewrite:{'^/api':''}
      }
    }
  }
}

12. nprogress进度条的使用

在发送请求时显示进度条，在api–>request.js中使用

12.1 引入进度条

import nprogress from "nprogress";

12.2 引入进度条样式

import "nprogress/nprogress.css"

12.3 请求拦截器中进度条开始

requests.interceptors.request.use((config) => {
    // 进度条开始
    nprogress.start()
    return config
})

12.4 响应拦截器中进度条结束

requests.interceptors.response.use((res) => {
    // 成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    // 进度条结束
    nprogress.done()
    return res.data
}, (error) => {
    // 响应失败的回调函数
    return Promise.reject(new Error('fail'))
})

13. Vuex状态管理库

13.1 vuex是什么？

vuex是官方提供一个插件，状态管理库，集中式管理项目中共用的数据
切记，并不是全部项目都需要vuex，如果项目很小，完全不需要vuex，如果项目很大、组件很大、数据很多，数据维护很费劲

13.2 vuex基本使用

1. 下载vuex

npm install --save vuex

下载完成后，查看package.json:"vuex": "^3.6.2"

2. 新建store文件夹—>index.js文件，实行仓库模块式开发存储数据。
（1）引入Vue、Vuex

import Vue from "vue";
import Vuex from "vuex";

（2）使用一次插件

Vue.use(Vuex)

（3）引入子仓库

import home from "./home";

（4）对外暴露Store类的一个实例，并实现vuex仓库模块化开发存储数据

export default new Vuex.Store({
    // 实现vuex仓库模块式开发存储数据
    modules:{
        home,
        search
    }
})

3. 在store文件夹中新建一个仓库，为子仓库

// state:仓库存储数据的地方
const state={}

// mutation:修改state的唯一属性
const mutations={}

// actions:处理action，可以书写自己的业务逻辑，也可以处理异步
const actions={
    // 这里可以书写业务逻辑，但不能修改state
}

// getters：理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters={}

export default{
    state,
    mutations,
    actions,
    getters
}

4. 在main.js中进行注册

// 引入仓库
import store from './store'

new Vue({
  render: h => h(App),
  // 注册仓库：组件实例身上会多一个$store属性
  store
}).$mount('#app')

13.3 vuex 实现

1. 组件挂载完毕，可以向服务器发请求

mounted() {
   // 通知vuex发请求，获取数据，存储于仓库中
   this.$store.dispatch("categoryList");
 },

2.引入请求

import { reqCategoryList } from "@/api"

3. 在action中通过API里面的接口函数调用，向服务器发请求，获取服务器数据

commit 将后台获取到的数据提交到mutation

const actions = {
    // 通过API里面的接口函数调用，向服务器发请求，获取服务器数据
    async categoryList({ commit }) {
        let result = await reqCategoryList()
        if (result.code == 200) {
            commit("CATEGORYLIST",result.data)
        }    
    }
}

4. 在state中初始化数据

state中数据默认初始值别瞎写，根据服务器返回数据而定

const state = {
    categoryList:[]
}

5. 在mutation中修改属性

const mutations = {
    CATEGORYLIST(state,categoryList){
        state.categoryList=categoryList
    }
}

6. 在组件中引入并使用仓库

右侧需要的是一个函数，当使用这个计算属性的时候，右侧函数会立即执行一次
注入一个参数state，其实即为大仓库中的数据

import {mapState} from 'vuex'
computed:{
  ...mapState({
    categorList:state=>state.home.categoryList
  })
}

查看vue开发者工具，是否获得数据
在这里插入图片描述
完整代码

仓库

import { reqCategoryList } from "@/api"
// state:仓库存储数据的地方
const state = {
    // state中数据默认初始值别瞎写，根据服务器返回数据而定2.
    categoryList: []
}

// mutation:修改state的唯一属性
const mutations = {
    CATEGORYLIST(state, categoryList) {
        state.categoryList = categoryList
    }
}

// action:处理action，可以书写自己的业务逻辑，也可以处理异步
const actions = {
    // 这里可以书写业务逻辑，但不能修改state
    // 通过API里面的接口函数调用，向服务器发请求，获取服务器数据
    async categoryList({ commit }) {
        let result = await reqCategoryList()
        if (result.code == 200) {
            commit("CATEGORYLIST", result.data)
        }
    }
}
// getters：理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {}

export default {
    state,
    mutations,
    actions,
    getters
}

组件

import {mapState} from 'vuex'
export default {
  name: "TypeNav",
  // 组件挂载完毕，可以向服务器发请求
  mounted() {
    // 通知vuex发请求，获取数据，存储于仓库中
    this.$store.dispatch("categoryList");
  },
  computed:{
    ...mapState({
      // 右侧需要的是一个函数，当使用这个计算属性的时候，右侧函数会立即执行一次
      // 注入一个参数state，其实即为大仓库中的数据
      categorList:state=>state.home.categoryList
    })
  }
};

14. 完成一级分类动态添加背景颜色

14.1 采用样式完成

14.2 通过js完成

存储用户鼠标移上哪一个一级分类

data() {
   return {
     currentIndex: -1,
   };
 },

鼠标进入修改响应式数据

changeIndex: throttle(function (index) {
   this.currentIndex = index;
 }, 50),

一级分类鼠标移除的事件

leaveIndex() {
    this.currentIndex = -1;
}

15. 通过js控制二三级商品分类的显示与隐藏

:style="{display:currentIndex==index?'block':'none'}"

16. 演示卡顿现象

正常：事件触发非常频繁，而且每触发一次，回调函数都要去执行（如果时间很短，二回调函数内部有计算，那么很有可能出现浏览器卡顿）

节流：在规定的时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

防抖：前面的所有的触发都被取消，最后一次执行在规定时间之后才会触发，也就是说如果连续款速的触发，只会执行一次

三级联动节流
使用lodash中封装的节流方法lodash官网

引入throttle

import throttle from "lodash/throttle";

使用

changeIndex: throttle(function (index) {
    this.currentIndex = index;
}, 50)

17. 三级联动组件的路由跳转与参数传递

利用 [ 事件委派+编程式导航 ] 实现路由跳转与传递参数

17.1 事件委派，是把全部的子节点（h3,dt,dl,em）的事件委派给父亲节点，点击a标签的时候，才会进行路由跳转（怎么确定点击的一定是a标签）

把子节点当中的a标签，加上自定义属性data-categoryName,其余子节点是没有的

<a :data-categoryName="c1.categoryName">{{ c1.categoryName }}></a>

17.2 如何区分是以一级、二级、三级分类的标签

给一级、二级、三级分类的标签分别添加自定义属性

17.3 代码

goSearch(event) {
   // 编程式导航+事件委派
   let element = event.target;
   console.log(element.dataset);
   //获取到当前触发这个事件的节点，需要带有data-categoryName，这样节点一定是a标签
   //节点有一个dataset属性，可以获取节点的自定义属性和属性值
   let { categoryname, category1id, category2id, category3id } =
     element.dataset;
   // 如果标签上有categoryname一定是a标签
   if (categoryname) {
     // 整理路由跳转的参数
     let location = { name: "search" };
     let query = { categoryName: categoryname };
     // 区分一级分类、二级分类、三级分类的a标签
     if (category1id) {
       query.category1Id = category1id;
     } else if (category2id) {
       query.category2Id = category2id;
     } else {
       query.category3Id = category3id;
     }
     // 整理参数
     location.query = query;
     // 路由跳转
     this.$router.push(location);
   }
 }

18. 开发Search模块中的TypeNav商品分类菜单（过渡动画效果）

过渡动画：前提组件|元素务必要有v-if|v-show指令才可以使用过渡动画

在三级联动div外部添加一个trensition标签

 <!-- 过渡动画 -->
<transition name="sort">
	<!-- 三级联动 -->
	<div class="sort" v-show="show">
		......
	</div>
</transition>

过渡动画样式

.sort-enter {
  height: 0px;
}
.sort-enter-to {
  height: 461px;
}
.sort-enter-active {
  transition: all 0.5s linear;
}

19.typeNav三级联动列表的性能优化

出现问题：当路由在Home和Search中切换的时候，切换一次，getBaseCategoryList便会发起一次请求，现想要实现只发起一次请求
实现方法：在App根组件当中发请求：根组件mounted只执行一次

mounted() {
    // 派发一个action，获取商品分类的三级联动列表
    // 通知vuex发请求，获取数据，存储于仓库中
    this.$store.dispatch("categoryList");
},

20. 合并params和query参数

当从home页面跳转到search页面时，会传递params参数和query参数，现在出现一个问题，即两种参数不能同时进行传递。

TypeNav组件中修改goSearch方法

//  如果路由跳转是，带有params参数，也要传递过去
if (this.$route.params) {
	location.params = this.$route.params;
	// 动态给location添加query参数
	location.query = query;
	// 路由跳转
	this.$router.push(location);
}

Header组件中修改goSearch方法

if (this.$route.query) {
	// query参数也要带过去
	let location = {
	 name: "search",
	 params: { keyword: this.keyword || undefined },
	};
	location.query=this.$route.query
	this.$route.push(location)
}

21. swiper

swiper官网
使用方法
1. 引包（相应 js、css）

import Swiper from "swiper";

import 'swiper/css/swiper.css'

2.页面中结构务必要有

<div class="swiper-wrapper">
	<div
		class="swiper-slide"
		v-for="(item, index) in list"
		:key="item.id"
		>
		<img :src="item.imgUrl" />
	</div>
</div>

3. new swiper实例（轮播图添加动态效果）

var mySwiper = new Swiper(this.$refs.cur, {
	loop: true, // 循环模式选项
	// 如果需要分页器
	pagination: {
		el: ".swiper-pagination",
		clickable: true,
	},
	// 如果需要前进后退按钮
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev",
	},
	// 如果需要滚动条
	scrollbar: {
		el: ".swiper-scrollbar",
	},
});

22. 实现首页轮播图

最完美的解决方案
   watch + nextTick:数据监听：监听已有数据变化
   $nextTick:在下次dom更新，循环结束之后 执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的dom
   $nextTick：可以保证页面中的结构一定是有的

 watch: {
    list: {
      immediate: true,
      handler(oldValue, newValue) {
        this.$nextTick(() => {
          // 使用ref获取dom
          var mySwiper = new Swiper(this.$refs.cur, {
            ......
          });
        });
      },
    },
  },