项目核心

• 书写静态页面(HTML + CSS)
• 拆分组件
• 获取服务器的数据动态展示
• 完成相应的动态业务逻辑

一、项目准备

1、vue-cli 脚手架初始化项目
2、node +webpack+淘宝镜像

二、脚手架目录作用

1、node_modules — 放置项目依赖文件夹
2、public — 一般放置一些共用的静态资源（图片），打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面
3、src — 程序员源代码文件夹

• assets文件夹 — 经常放置一些静态资源（多个组件公用的静态资源），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
• components — 一般放置非路由组件（全局组件）
• api — axios 相关文件
• views | pages — 放置路由组件
• router — 配置路由的文件夹
• App.vue — 唯一的根组件
• main.js — 入口文件【程序最先执行的文件】
• babel.config.js — babel配置文件
• package.json — 看到项目描述、项目依赖、项目运行指令
• package-lock.json — 缓存性文件
• README.md — 项目说明文件

三、项目的其他配置

1、项目运行，浏览器自动打开

<!-- package.json文件夹 -->"scripts": {"serve": "vue-cli-service serve --open","build": "vue-cli-service build","lint": "vue-cli-service lint"},

2、关闭eslint校验工具

• 根目录下创建vue.config.js,进行配置

module.exports = {lintOnSave:false,
}

3、src文件夹配置别名,创建jsconfig.json，用@/代替src/，exclude表示不可以使用该别名的文件

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

四、路由的分析

vue-router
前端路由:kv键值对
Key — 即为URL（地址栏中的路径）
Value — 即为相应的路由组件

1、路由组件的搭建

• components — 一般放置非路由组件（全局组件）
• views | pages — 放置路由组件

2、配置路由

放置在 router 文件夹中

3、路由组件和非路由组件区别：

• 非路由组件放在 components 中，路由组件放在 pages 或 views 中
• 非路由组件使用时以标签的形式使用，路由组件需要在 router 文件中进行注册（使用的是组件的文字）通过路由使用
• 注册完路由，所有的路由和非路由组件身上都会拥有$router $route属性
  $router：一般进行编程式导航进行路由跳转【 push | replace】
  $route： 一般获取路由信息【query、path、params等】

4、路由的跳转

• 声明式导航 — < router-link > ，(务必要有to属性）

• 编程式导航 —< push | replace >

    注：声明式导航能做的编程式都能做，而且还可以处理一些业务
  

5、路由传参

• params参数：路由需要占位，程序就崩了，属于URL当中一部分

  参数对应的路由信息要修改为 path: "/search/:id" 这里的/:id就是一个params参数的占位符

• query参数：路由不需要占位，写法类似于ajax当中query参数
  

  书写形式:path: "/search?k=v"

6、路由传递参数相关面试题

• 路由传递参数（对象写法）path是否可以结合params参数一起使用
  ---- 不可以，程序会崩掉

• 如何指定params参数可传可不传?
  — 解决方法：在占位后面加 ? =>

  path: "/search/:keyword?"
  

• params参数可以传递也可以不传递，但是如果传递是空串，如何解决？
  — 解决方法：用 undefined =>

  params:{keyword:''||undefined}})
  

• 路由组件能不能传递props数据?
  — 可以，但是只能传递params参数,具体知识为props属性

7、路由传参方式

• 字符串形式

 this.$router.push(“/search/”+this.params传参+“?k=”+this.query传参)

• 模板字符串

this.$router.push(`/search/${this.params传参}?k=${this.query传参}`)

• 对象（常用）

this.$router.push({name:“路由名字”,params:{传参},query:{传参})

8、NavigationDuplicated的警告错误

程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?

• 原因：vue-router3.1.0之后, 引入了push()的promise的语法, 如果没有通过参数指定回调函数就返回一个promise来指定成功/失败的回调, 且内部会判断如果要跳转的路径和参数都没有变化, 会抛出一个失败的promise

• 解决方法：
  1、是给push 方法，传入相应的成功的回调与失败的回调，可以捕捉当前错误，代码如下

// 这种写法治标不治本，将来在别的组件中push|replace,编程式导航还是会有类似错误
this.$router.push({name:‘Search’,params:{keyword}},()=>{},()=>{})

2、重写push 方法（二次封装），代码如下

//1、先把VueRouter原型对象的push，保存一份
let originPush = VueRouter.prototype.push;
//2、重写push|replace
//第一个参数：告诉原来的push，跳转的目标位置和传递了哪些参数
VueRouter.prototype.push = function (location,resolve,reject){if(resolve && reject){originPush.call(this,location,resolve,reject)}else{originPush.call(this,location,() => {},() => {})}
}

五、注册全局组件

// mian.js 中书写
//将三级联动组件注册为全局组件
import TypeNav from '@/pages/Home/TypeNav';
//第一个参数：全局组件名字，第二个参数：全局组件
Vue.component(TypeNav.name,TypeNav);
//在页面中使用时： 直接通过 <TypeNav/> 使用，不需要引入

六、关于axios

1、axios的二次封装

• 为什么需要进行二次封装axios？
  • 请求拦截器：可以在发请求之前，处理一些业务
  • 响应拦截器：当服务器数据返回后，可以处理一些事情

//在根目录下创建api文件夹，创建request.js文件
import axios from "axios";
//1、对axios二次封装
const requests = axios.create({//基础路径，requests发出的请求在端口号后面会跟改baseURlbaseURL:'/api',timeout: 5000,
})
//2、配置请求拦截器
requests.interceptors.request.use(config => {//config内主要是对请求头Header配置return config;
})
//3、配置相应拦截器
requests.interceptors.response.use((res) => {//成功的回调函数return  res.data;
},(error) => {//失败的回调函数console.log("响应失败"+error)return Promise.reject(new Error('fail'))
})
//4、对外暴露
export default requests;

2、通过代理解决跨域问题

module.exports = {//代理服务器解决跨域proxy: {//会把请求路径中的/api换为后面的代理服务器'/api': {//提供数据的服务器地址// 时间2022/10/23，服务器地址为http://gmall-h5-api.atguigu.cntarget: 'http://gmall-h5-api.atguigu.cn',}},}

3、请求接口统一封装

• 项目过大时，推荐使用。如果项目小，在生命周期函数中发请求即可
• 将每个请求封装为一个函数，并暴露出去，组件只需要调用相应函数即可，这样当我们的接口比较多时，如果需要修改只需要修改该文件即可

//在文件夹api中创建index.js文件，用于封装所有请求
import requests from "@/api/request";
//首页三级分类接口
export const reqCateGoryList = () => {return  requests({url: '/product/getBaseCategoryList',method: 'GET'})
}

4、nprogress进度条插件

//安装nprogress进度条插件
cnpm install--save nprogress

相关配置

• start：进度条开始 done 进度条结束
• 进度条的颜色可以修改，修改源码样式.bar类名的

//引入进度条
import nprogress from 'nprogress';
//引入进度条样式
import "nprogress/nprogress.css";
requests.interceptors.request.use(config => {//开启进度条nprogress.start();return config;
})
requests.interceptors.response.use((res) => {//响应成功，关闭进度条nprogress.done()
},(error) => {})

七、vuex 状态管理库

并不是所有项目都需要vuex，如果项目小，完全不需要使用vuex，当项目很大、组件很多、数据维护费劲时使用

1、什么是vuex

集中式管理项目中的组件公用的数据

• Vuex核心概念:state、actions、mutations、getters、modules

2、vuex的使用

• 首先确保安装了vuex,根目录创建store文件夹，文件夹下创建index.js，内容如下：

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)//对外暴露store的一个实例
export default new Vuex.Store({//state：仓库存储数据的地方，公共状态state:{},//mutations：修改state的唯一手段，只支持同步mutations:{},//actions：处理action，书写自己的业务逻辑，提交mutation，但是不能修改state支持同步异步actions:{},//getters：理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便（一般不使用）getters:{},
})

3、vuex的模块化使用

采用vuex模块式管理数据的原因：

• 项目过大、组件过多、接口过多、返回数据多时，如果还用以前的方式存储数据，导致vuex中的state数据格式比较复杂。

1、建立小仓库 =>在store文件下 home.js,

// home 模块的小仓库
//home 相关逻辑在此页面进行书写
const state = {}
const getters = {}
const mutations = {}
const actions = {}
const modules = {}
export default {state,getters,mutations,actions,modules
}

2、在大仓库中引入小仓库 =>在store文件下 index.js,

import Vue from 'vue'
import Vuex from 'vuex'
// 引入小仓库
import home from './home'
Vue.use(Vuex)
export default new Vuex.Store({// 实现vuex 仓库模块式开发存储数据modules: {home}
})

八、函数的防抖与节流

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

• 此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果

• 安装lodash插件，该插件提供了防抖和节流的函数【闭包 + 延迟器】，我们可以引入js文件，直接调用。向外暴露 _ 函数

  ladash官网

1、函数防抖

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

  用户操作很频繁，但是只是执行一次
  

  ladash官网–防抖用法

2、函数节流

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

    用户操作很频繁，但是把频繁的操作变为少量操作【给浏览器充裕的时间解析代码】
  

  ladash官网–节流用法

3、将changeIndex设置了节流

// 全部引入 =>import _ from 'lodash'=>使用时 _.throttle
// 最好按需加载
import throttle from 'lodash/throttle'methods: {//采用键值对形式创建函数，将changeIndex定义为节流函数，该函数触发很频繁时，设置50ms才会执行一次// throttle回调函数别用箭头函数，防止出现this问题changeIndex: throttle(function (index){this.currentIndex = index},50),}

九、联动路由跳转

1、router-link：声明式导航

• 缺点：由于生成的标签过多，出现卡顿现象

• 出现卡顿的原因：
  — router-link是一个组件：相当于VueComponent类的实例对象，一瞬间new VueComponent很多实例（1000+），很消耗内存，因此导致卡顿。

2、编程式导航

我们是通过触发点击事件实现路由跳转。同理有多少个a标签就会有多少个触发函数。虽然不会出现卡顿，但是也会影响性能。

3、最优方案：编程式导航+事件委派

事件委派即把子节点的触发事件都委托给父节点

• 事件委派问题：

1、如何确定我们点击的一定是a标签呢？如何保证我们只能通过点击a标签才跳转呢？

• 解决办法： 把子节点当中a标签，加上自定义属性 :data-categoryName，其余的子节点没有

​2、如何区分一、二、三级的标签

• 解决办法：

  • 为三个等级的a标签再添加自定义属性data-category1Id、:data-category2Id、:data-category3Id来获取三 个等级a标签的商品id，用于路由跳转。

  • 我们可以通过在函数中传入event参数，通过event.target属性获取当前点击节点，再通过dataset属性获取节点的属性信息

十、模拟数据-mock插件

mock官网

• 生成随机数据，拦截 Ajax 请求，返回我们自定义的数据用于测试前端接口

• 前端mock数据不会和你的服务器进行任何通信

1、安装mockjs

cnpm install mockjs

2、使用步骤

1. 在项目当中src文件夹中创建mock文件夹

2. 设计JSON 数据结构（在mock文件中创建相应JSON文件）

   注意：JSON文件需要格式化一下，不能留有空格，否则跑不起来

3. 将所需图片放置在public文件夹中

   • public文件夹在打包时，会把相应的资源打包dist文件夹中

4. 创建mockServe.js，通过mockjs插件实现模拟数据

   import Mock  from 'mockjs'
   //webpack默认对外暴露：json、图片
   import banner from './banner.json'
   import floor from './floor.json'
   //mock数据：第一个参数请求地址、第二个参：请求数据
   Mock.mock("/mock/banner",{code:200,data:banner})
   Mock.mock("/mock/floor",{code:200,data:floor})
   

5. mockServe.js文件在入口文件中引入（至少需要执行一次，才能模拟数据）

   //在main.js中引入
   import ''@/mock/mockServe
   

6. 在API文件夹中创建mockRequest.js

   • 专门请求mock接口的axios封装

十一、vuex数据具体使用方法

把公共数据、获取数据方法都统一放在store中，取其数据的固定步骤如下：(轮播)

1、派发action：通过vuex 发起Ajax请求，将数据储存在仓库中

//ListContainer.vue 文件mounted() {this.$store.dispatch("getBannerList")},

2、在store文件中的home.js中，书写相关逻辑，并提交mutations

actions:{//获取首页轮播图数据async getBannerList({commit}){let result = await reqGetBannerList()if(result.code ===  200){commit("BANNERLIST",result.data)}}}

3、获取到数据后，在mutations中修改state

    mutations:{BANNERLIST(state,bannerList){state.bannerList = bannerList}},

4、在state中，添加 bannerList 状态

state:{bannerList:[]
}

5、在ListContainer.vue组件在store中获取轮播图数据。

import {mapState} from "vuex";
export default {computed: {...mapState({bannerList: state => state.home.bannerList})},}

十二、swiper插件

swiper官网

swiper使用方法

１、无法加载轮播图片的问题

原因：在mounted中，先异步请求轮播图数据，然后创建swiper实例。由于请求数据是异步的，所以浏览器不会等待该请求执行完再去创建swiper，而是先创建了swiper实例，但是此时我们的轮播图数据还没有获得，就导致了轮播图展示失败。

解决方法：

１、添加延迟器（不是完美的解决方案）

mounted() {setTimeout(()=>{let mySwiper = new Swiper(...)},2000)},

缺点：无法确定用户请求到底需要多长时间，因此没办法确定延迟器时间

2、watch + nextTick

this. $nextTick：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

<template><!--banner轮播--><div class="swiper-container" ref="mySwiper"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(carouse,index) in bannerList" :key="carouse.id"><img :src="carouse.imgUrl" /></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev" ></div><div class="swiper-button-next"></div></div></div>
</template>
<script>
// 引入Swiper
import Swiper from 'swiper'
// 引入Swiper样式
import 'swiper/css/swiper.css'
import {mapState} from "vuex";
export default {mounted() {// ajax请求轮播图图片this.$store.dispatch("getBannerList")},computed:{...mapState({// 从仓库中获取轮播图数据bannerList: (state) => {return state.home.bannerList}})},watch:{bannerList(newValue,oldValue){// this.$nextTick()使用this.$nextTick(()=>{let mySwiper = new Swiper(this.$refs.mySwiper,{pagination:{el: '.swiper-pagination',clickable: true,},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',}})})}}
}
</script>

2、将swiper封装组件

由于 floor.vue 中，数据是由父组件传递过来的，且从来没有发生改变，因此监听不到list。所以我们需要借助immediate。

immediate：立即监听，不管数据是否变化，都监听一次

<template><div><div class="swiper-container"ref="cur"><div class="swiper-wrapper"><div class="swiper-slide"v-for="carousel in list":key="carousel.id"><img :src="carousel.imgUrl" /></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div>
</template>
<script>
import Swiper from 'swiper'
export default {name: 'Carousel',props: ['list'],watch: {list: {// 立即监听：不管数据是否变化，都监听一次immediate: true,handler () {this.$nextTick(() => {// eslint-disable-next-line no-unused-varsconst mySwiper = new Swiper(this.$refs.cur, {loop: true,// 如果需要分页器pagination: {el: '.swiper-pagination',clickable: true},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'}})})}}}
}
</script>
<style lang="less" scoped>
</style>

十三、getters

• 作用：简化仓库中的数据（相当于计算属性）
• mapGetters里面的写法：数组，因为getters计算是没有划分模块的（state：划分home，search）

十四、ES6新增：Object.asign

Object.assign()方法将所有可枚举的自有属性从一个或多个源对象复制到目标对象，返回修改后的对象。

• 实现对象拷贝，合并对象

  // 举例
  const obj1 = {a:1,b:2
  };
  const obj2 = Object.assign({b:3, c:4}, obj1);
  console.log(object1)  // { a: 1, b: 2}
  console.log(object2)  // { b: 2 c: 4, a: 1}
  // 如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性

十五、面包屑相关内容

1、删除 query — 分类名

• 方法：删除时，将属性值赋值成undefined，并且进行路由跳转（自己跳自己）

   removeCategoryName () {// 赋值成undefined（不消耗宽带）this.searchParams.categoryName = undefinedthis.searchParams.category1Id = undefinedthis.searchParams.category2Id = undefinedthis.searchParams.category3Id = undefinedthis.getData()// 地址栏需要改：进行路由跳转if (this.$route.params) {this.$router.push({ name: 'search', params: this.$route.params })}},
  

2、删除 params —关键字

• 方法：删除时，将keyword赋值成undefined，然后修改路由信息，同时删除兄弟组件Header中输入框内的关键字

1、关键点：设计组件通

• props：父子
• 自定义事件：子父
• vuex：万能
• 插槽：父子
• pubsub-js：完成
• $bus：全局事件总线（本案例运用此方法）

2、$bus 使用

• 在main.js中配置$bus

  new Vue({//全局事件总线$bus配置beforeCreate() {//此处的this就是这个new Vue()对象Vue.prototype.$bus = this},
  }).$mount('#app')
  

• 在Search.vue中触发$bus

  • $emit ('事件名'，data)

    removeKeyword () {// 参数赋空this.searchParams.keyword = undefinedthis.getData()// 通知兄弟组件清除关键字// data用于传递数据，此页面只是用于通知header组件进行相应操作，故不传datathis.$bus.$emit('clear')// 进行路由跳转this.$router.push({ name: 'search', query: this.$route.query })
    }
    

• 在Header.vue 中监听$bus

  • $on('事件名',( )=>{ })

    mounted () {// 通过全局总线清除关键字this.$bus.$on('clear', () => {this.keyword = ''})}
    

十六、封装分页器

• 分页器需要的数据（条件）
  1. pageNo ：当前页数
  2. pageSize ：每页展示几条数据
  3. total ：总共返回多少条数据
  4. continues：连续页码数【5|7】
• 重点：计算出连续页面起始数字和结束数字

  // 连续页数的起始页数和结束页数
  startNumAndEndNum () {const { continues, pageNo, totalPage } = thislet start = 0let end = 0// 判断总页数是否等于连续页（5)，// 不等于if (continues > totalPage) {start = 1end = totalPage} else {// 等于start = pageNo - parseInt(continues / 2)end = pageNo + parseInt(continues / 2)// start= 0/负数if (start < 1) {start = 1end = continues}// end>总页码if (end > totalPage) {start = totalPage - continues + 1end = totalPage}}return { start, end }
  }
  

十七、滚动行为

• 当切换到新路由时，滚动条的位置，vue-router就可以做到。

• vue-route 提供了scrollBehavior方法(只在支持history.pushState的浏览器中可用)

  scrollBehavior (to, from, savedPosition) {// return 期望滚动到哪个的位置return { y: 0 }}
  

十八、浏览器存储功能

HTML5中新增，本地存储和会话存储。

• 本地存储–localStorage：持久化的（5M）

• 会话存储–sessionStorage：并非持久–会话结束（关闭浏览器）就消失、

十九、购物车相关知识

问题一：cartList为空

• 发现：发请求时，获取不得购物车里面的数据

  =>原因：因为服务器不知道你是谁

  =>解决方案：生成uuid（临时游客身份）

  • 由于每个用户的uuid不能发生变化，还要持久存储，所以封装游客身份模块uuid—生成一个随机字符串

  • 创建utils文件夹=>创建uuid_token.js文件

    // 我用 uuid_token 会有红杠，提示没有用驼峰写法，因此加上了下面注释
    /* eslint-disable camelcase */import { v4 as uuidv4 } from 'uuid'
    // 生成一个随机字符串,且每次执行都不能发生变化，还要持久存储
    export const getUUID = () => {// 判断本地存储是否由uuidlet uuid_token = localStorage.getItem('UUIDTOKEN')// 本地存储没有uuidif (!uuid_token) {// 生成uuiduuid_token = uuidv4()// 存储本地localStorage.setItem('UUIDTOKEN', uuid_token)}// 当用户有uuid时就不会再生成return uuid_token
    }
    

问题二：如何传uuid_token

• 购物车的请求函数中没有参数，无法传 uuid_token

  =>解决方法：把uuid_token加在请求头中

  • 在store中的detail模块中定义uuid_token

    const state =  {//游客身份uuid_token: getUUID()
    }
    

  • 在request.js中设置请求头

    // 引入store
    import store from '@/store';
    requests.interceptors.request.use(config => {// 判断uuid_token是否为空if (store.state.detail.uuid_token) {// 请求头添加一个字段：userTempId字段和后端统一config.headers.userTempId = store.state.detail.uuid_token}return config;
    })
    

1、判断底部勾选框是否勾选

=>解决方法：every

//判断底部勾选框是否全部勾选
isAllCheck() {//every遍历某个数组，判断数组中的元素是否满足表达式，全部为满足返回true，否则返回falsereturn this.cartInfoList.every(item => item.isChecked === 1)}

2、修改购物车数量

• @click @change 使用同一个方法进行修改

  =>问题：如何辨别点击哪一个

  =>解决方法：通过传参来区分谁是谁

   <a  @click="handler('minus',-1,cartInfo)">-</a><input  @change="handler('change',$event.target.value,cartInfo)"><a  @click="handler('add',1,cartInfo)">+</a>
  

• handler 函数=> 需要节流

  import throttle from 'lodash/throttle'handler: throttle(async function (type, disNum, cart) {// type：区分三个元素// disNum：+ 变化量（1） -变化量（-1）   input最终个数（不是变化量）// cart：分辨那个产品// 向服务器发请求switch (type) {case 'add':disNum = 1breakcase 'minus':// 判断产品个数: skuNum>1，传-1,skuNum<=1,传0disNum = cart.skuNum > 1 ? -1 : 0breakcase 'change':// 用户输入非数字||负数=>0disNum = (isNaN(disNum) || disNum < 1) ? 0 : parseInt(disNum) - cart.skuNumbreak}try {await this.$store.dispatch('addOrUpdateShopCart', { skuId: cart.skuId, skuNum: disNum })this.getDate()} catch (error) {}
  }, 1000)
  

二十、登录业务

1、注册

=> 通过数据库存储用户信息（名字、密码）

2、登录

=>登录成功时，后台为了区分用户是谁，服务器会下发token【token：令牌=>唯一的标识符===uuid】

=>注意：一般流程=>登录成功服务器下发token，前台持久化存储token【带着token找服务器要用户信息进行展示】

二十一、导航守卫

=>导航：表示路由正在发生改变。进行路由跳转

=>守卫：相当于“紫禁城护卫”

1、全局守卫

=>在项目中，只要发生路由变化，守卫就能监听到

• 前置守卫：在路由跳转之前进行判断

  router.beforeEach((to, from, next) => {// to:可以获取你要跳转到的那个路由信息// from：可以获取你从哪里来的那个路由信息// next：放行函数 next()=>直接放行 next(path)=>放行到指定路由 next(false)
  })
  

• 后置守卫：路由跳转已经完成在执行。

2、路由独享守卫

=>只在进入路由时触发

beforeEnter: (to, from,next) => {}

3、组件内的守卫

• beforeRouteEnter //进入
• beforeRouteUpdate //更新，指的是参数发生更新时触发
• beforeRouteLeave //离开

二十二、表单验证

• Vue官方提供的一个表单验证的插件：vee-validate

  =>不好用，看懂老师操作即可

• 【elementUI】推荐用它！

二十三、路由懒加载

路由懒加载：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

写法:

// 将 import Home from '@/views/Home'
// 替换成
const Home = () => import('@/views/Home')
const router = createRouter({routes: [{ path: '/home', component: Home }],
})
//上面是官网上的介绍，下面是优化写法
const router = createRouter({routes: [{ path: '/home', component:() => import('@/views/Home') }],
})

二十四、项目打包上线

执行npm run build

map文件：因为代码是经过加密的，如果运行时报错，输出的错误信息无法准确得知时那里的代码报错。有了map就可以向未加密的代码一样，准确的输出是哪一行那一列有错，所以该文件如果项目不需要是可以去掉的。【map文件较大】

//在vue.config.js配置
module.exports ={productionSourceMap: false
}
// 修改需要重新build

尚硅谷--尚品汇项目笔记相关推荐

1. 尚品汇项目笔记（持续更新中）

   项目网络教学视频链接:尚硅谷VUE项目实战,前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili 目录 一. 使用vue-cli脚手架去初始化项目 二.项目的其他配置 三.项目路由分析 四.创建 ...

2. 电商项目尚品汇学习笔记

   本文参考其他文章自己整理补充的,要阅读原文请查看:尚品汇项目笔记_爱哭的毛毛虫的博客-CSDN博客_尚品汇项目 1.vue文件目录 public文件夹:静态资源,webpack进行打包的时候会原封不动 ...

3. Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）

   尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...

4. 【学习笔记】尚硅谷Hadoop大数据教程笔记

   本文是尚硅谷Hadoop教程的学习笔记,由于个人的需要,只致力于搞清楚Hadoop是什么,它可以解决什么问题,以及它的原理是什么.至于具体怎么安装.使用和编写代码不在我考虑的范围内. 一.Hadoop ...

5. 尚硅谷尚品汇_后台管理项目

   vueProject_尚品汇后台管理 项目源码 文章目录 vueProject_尚品汇后台管理 login/out模块 product模块 login/out模块 .env.development . ...

6. 尚硅谷 VUE 尚品汇项目实战问题解决方式整理

   最近在自学大型vue项目,选中了尚硅谷的尚品汇,之前也学习过黑马程序员的一个电商后台管理项目,因为项目打包优化时候出了Bug,就闲置了,但是代码是一行一行敲完啦,也放到了码云上!学完这个尚品汇准备下一 ...

7. 尚硅谷 VUE 尚品汇项目实战问题解决方式整理(Vue3 版)

   教学视频:https://www.bilibili.com/video/BV1Vf4y1T7bw 不回要资料的评论,资料在视频底下评论有些仓库里面有. 试图自行解决问题也是程序员必备技能之一,多做尝试 ...

8. 尚硅谷-尚品汇项目开发总结（第十五天）

   27:图片懒加载:vue-lazyload插件实现 27.1 为什么需要图片懒加载? 在图片很多的网站中,如果所有图片全部一次性加载完毕,可能会增加服务器压力.导致页面卡顿.影响用户体验. 为了解决这 ...

9. SpringBoot练手项目《尚硅谷智慧校园》学习笔记

   ​ 一 项目展示 1 登录及角色控制 ​ 2首页展示 3 业务模块展示 二 智慧校园系统简介 2.1 项目简介 智慧校园管理系统:主要是以年级.班级为单位,进行老师和学生信息记录和统计功能.项目采用前 ...

最新文章

1. Nature: 人的肠道古细菌基因组集
2. jsonp 跨域原理详解
3. PL/SQL Developer使用技巧、快捷键
4. SQL-left(right,inner) join
5. 以DES的方式实现对称加密，并提供密钥
6. 正则语言和正则表达式_探索正则表达式背后的语言学
7. TextBox禁止手动输入但是允许刷卡输入
8. ubuntu 14.04安装zabbix3.0以及汉化
9. 《Linux就该这么学》培训笔记_ch18_使用MariaDB数据库管理系统
10. python输出间隔_在python中生成间隔之间的月份列表
11. vs2015开发activex控件资料
12. 分布式数据库系统体系结构
13. Windows下载安装cuda10.1详细步骤
14. matlab求解线性规划问题的实例代码,matlab 求解线性规划问题
15. 《GPU编程与CG语言之阳春白雪下里巴人》阅读笔记 第一章+第二章
16. 功能测试————Siri
17. 何恺明的ResNet论文，被引量刚刚突破10万大关
18. 淘宝的商品管理是怎样的？
19. 如何利用EXCEL生成任意自由度任意显著因子的F分布表
20. Resistence gene identify

热门文章

1. 360春招笔试算法题题解
2. Producing Snow CodeForces - 948C 优先队列+思维
3. Pycharm专业版的各个版本激活教程和激活码
4. modelzoo，WDSR模型训练脚本问题
5. 《 线性代数及其应用 （原书第4版）》——1.4 矩阵方程
6. Spring源码学习---------(最简单易懂的源码学习笔记)
7. 小甲鱼Python练习1
8. C语言小游戏第二弹~1-100猜数字（无聊时候摸鱼必备）
9. Easy3DCGAL 凸包算法（三维）
10. matlab读不了视频,matlab读视频的问题