Vue尚品汇项目笔记整理
项目开发流程：
1、书写静态页面
2、拆分组件
3、获取服务器的数据动态展示
4、完成相应的动态业务逻辑
一、项目文件夹
node_modules：项目依赖文件夹
public：放置一些静态资源(图片)，webpack打包的时候会原封不动打包到dist中
assests：放置静态资源，多个组件共用的，webpack打包的时候，会把里面的静态资源当做你一个模块，打包到JS文件里面。
babel-config.js：配置文件(babel相关) 可以吧es6语法翻译成es5，兼容
package.json：项目身份证，记录项目信息，有哪些依赖、怎么运行
package-lock.json：缓存性文件，记录你安装过的依赖
二、项目配置
2.1项目运行自动打开浏览器
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
在package.json文件中这段代码的serve后面加上 --open
2.2eslint校验工具关闭
eslint：检测语法是否正确
在根目录下创建vue.config.js
作用：避免不规范时浏览器报错，不然继续执行
module.exports = {
//关闭eslint(不按规范会报错)
lintOnSave: false
}
2.3src文件夹简写方法，配置别名 @
根目录下创建jsconfig.json ，用@/代替src/， ，xclude表示不可以使用该别名的文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*":[
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}
2.4安装依赖
–save：将保存配置信息到pacjage.json。默认为dependencies节点中。
–dev：将保存配置信息devDependencies节点中。
dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块
devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。
less依赖
浏览器不会识别less样式，需要通过less、less-loader进行处理，将less样式转换成css样式
注意：版本过高会报错=>不要安装最新版本，后边加上版本号@5
npm install --save less less-loader@5
2.5项目静态资源
前端 https://gitee.com/jch1011/shangpinhui_0415.git 后台 https://gitee.com/jch1011/guigu.git
2.6清除页面默认的样式
<link rel="stylesheet" href="<%= BASE_URL %>reset.css">
三、项目路由
3.1安装路由插件vue-router
1、进入到项目文件夹，cmd
2、npm install --save vue-router
3、安装好后可以在package.json配置文件的dependencies中查看到已经有vue-router了
4、在main.js中注册，创建index.js文件进行路由配置
//1、引入vue vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
//2、使用插件
Vue.use(VueRouter)
//3、开始配置路由
//new一个vue-router对象
export default new VueRouter({
//配置路由表
routes:[]
})
错误记录：
原因：在main.js中注册路由时，先加载了router
修改：在App.vue渲染后再进行router的注册
3.2路由组件views/pages与非路由组件components
1、非路由（全局）组件放在components中，路由（页面级）组件放在pages或views中
2、在main.js注册完路由，所有的路由和非路由组件身上都会拥有$router $route属性
3.3组件路由注册的两种方式
第一种：
这种方式引入是在整个项目运行的一开始时，相关代码就会被加载进入；当项目比较大时，会加入很多与路由无关的代码
import Main from '@/Main.vue'
components: {
Main
}
第二种：
按需载入，当切换到该路由时，才进行加载
component:()=>import{'url'}
3.3组件路由跳转和传参的方式
- 跳转（两种）：
（1）声明式：router-link
（2）编程式：$router.push/replace - 传参（三种）：
详情：https://www.cnblogs.com/tzwbk/p/12462879.html
（1）params参数：属于路径当中的一部分，在配置路由的时候需要占位；
（2）query：不属于路径中的一部分，不需要占位；
（3）考虑页面刷新数据是否丢失！！
- 相关面试题：
（1）路由传递参数（对象写法）path是否可以结合params参数一起使用？
答：不能，常用是name与params、path与query
（2）如何指定params参数可传可不传？
答：路由配置使用了占位，但是在传递的时候没有传递params，那么url会出现问题；
可以通过在占位后面加上？（/search/keyword?）实现params参数可传可不传。
如果路由path要求传递params参数,但是没有传递,会发现地址栏URL有问题，详情如下：
Search路由项的path已经指定要传一个keyword的params参数，如下所示：
path: "/search/:keyword",
执行下面进行路由跳转的代码：
this.$router.push({name:"Search",query:{keyword:this.keyword}})
当前跳转代码没有传递params参数
地址栏信息：http://localhost:8080/#/?keyword=asd
此时的地址信息少了/search
正常的地址栏信息: http://localhost:8080/#/search?keyword=asd
解决方法：可以通过改变path来指定params参数可传可不传
path: "/search/:keyword?",?表示该参数可传可不传
（3）params参数可传可不传，但是如果传递的是空串，如何解决？
答：
this.$router.push({name:"Search",query:{keyword:this.keyword},params:{keyword:''}})
出现的问题和1中的问题相同,地址信息少了/search
解决方法： 加入||undefined，当我们传递的参数为空串时地址栏url也可以保持正常
this.$router.push({name:"Search",query:{keyword:this.keyword},params:{keyword:''||undefined}})
（4）路由组件能不能传递props数据？
答：可以，通过在路由表的路由项中加props属性，有三种方式。
{
name: 'search',
path: '/search',
component: Search,
//路由组件能不能传递props数据？
//第一种：布尔值法，只能用params传递
//props:true,
//第二种：对象写法， 相当于额外给路由传递一组props
//props:{a:1,b:2},
//第三种：函数写法, params/query都可以传递
// props:($route)=>{
// return {keyword:$route.params.keyword}
// }
// 在跳转后的组件使用props接收使用：
// props:['keyword','a','b']
// {{keyword}}
},
（5）重复跳转路由（Avoided redundant navigation to current location）
当路由跳转到目标组件后，如果再次点击跳转，会出现如下警告，但对程序没有影响（常见面试题）：
//只发生在编程式跳转中，使用导航是router-link不会出现，因为其vue-router底层已经处理好了
分析：
1、在"vue-router": "^3.5.3"版本中，引入了promise
2、push方法的理解：
push方法返回的是一个promise实例，promise需要传递resolve和reject两个参数（回调函数）；但是我们在使用this.$router.push调用push方法时，这个push方法其实是VueRouter.prototype的一个方法，没有给push方法传递这两个参数，所以我们需要对它进行重写。
function push(){
return new Promise((resolve,reject)=>{
});
}
Promise知识:
https://www.cnblogs.com/lvdabao/p/es6-promise-1.html
解决：
第一种：
this.$router.push({name:‘Search’,params:{keyword:"…"||undefined}},()=>{},()=>{})
//this->VueComponent对象
//this.$router->VueRouter对象
//此时的push方法就是VueRouter实例下prototype的一个方法
//this.$router、this.$route是在组件注册时入口文件就引入的
给push方法传递相应的成功resolve、失败reject的回调函数，可以捕获到当前错误。但是这种方式解决治标不治本。
第二种：
在router的index.js文件下进行对push方法的重写
//重写push、replace方法
// 1、保存原先的push方法,此时orginPush函数上下文是window
let orginPush=VueRouter.prototype.push;
// 2、重写
VueRouter.prototype.push=function(loaction,resolve,reject){
// 函数的上下文为VueRouter类的一个实例
if(resolve&&reject){
orginPush.call(this,loaction,resolve,reject);
}else{
orginPush.call(this,loaction,()=>{},()=>{});
}
}
// 或者使用catch
// VueRouter.prototype.push = function push(location) {
// return originalPush.call(this, location).catch(err => err)
// }
// 3、重写replace
VueRouter.prototype.replace = function(loaction, resolve, reject) {
// 函数的上下文为VueRouter类的一个实例
if (resolve && reject) {
orginReplace.call(this, loaction, resolve, reject);
} else {
orginReplace.call(this, loaction, () => {}, () => {});
}
}
//区分router和$route
$router(路由器)：一般进行编程式导航进行路由跳转
$route(路由)： 一般获取路由信息（name path params等）
3.2路由路径不存在时
当路由的路径不匹配的时候，跳转到默认的某一路由
{
path: '/*',
redirect: '/main'
}
四、chrome装vue调试工具
https://www.cnblogs.com/feiyu159/p/8666865.html
注意：如果在执行npm install时出错，可以尝试一下方式
1、创建一个新的空文件夹，进入空文件夹中执行cmd
2、在终端输入npm install vue-devtools
3、下载完成后，会出现一个node_modules文件夹，进入此文件夹，找到其中的vue-devtools文件夹，将其中的vender文件夹拖入谷歌扩展程序中（进入谷歌浏览器，在更多工具中有个扩展程序，点击扩展程序，将右边的开发者模式打开，将文件拖进去，就会出现一个vue.js devtools扩展程序）
4、再打开verder文件夹下的manife.json文件，将persistent修改为true，保存文件，刷新谷歌浏览器。
五、Footer组件的显示与隐藏
5.1v-if与v-show的区别
5.2路由元meta的使用
六、Home主页
6.1三级联动组件（全局组件）
全局组件在main.js中注册
七、接口测试 POSTMAN
如果服务器返回的数据中code字段为200，表示服务器返回数据成功。
整个项目，接口的前缀都有/api
八、api请求
- axios的二次封装
- axios：向服务器发送请求
- 那么为什么要进行二次封装呢？
->请求拦截器：可以在发送请求之前处理一些业务；
->响应拦截器: 服务器数据返回以后，处理一些业务；
- axios安装
npm i --save axios
在src目录下新建api文件夹->request.js进行二次封装
axios文档 http://www.axios-js.com/zh-cn/docs/index.html
import axios from "axios";
const request = axios.create({
//請求配置
baseURL: '/api',
timeout: 5000
});
// 请求拦截器
request.interceptors.request.use((config) => {
// config:配置对象,包括header请求头
return config;
});
// 响应拦截器
request.interceptors.response.use((res) => {
return res.data;
}, (error) => {
return Promise.reject(new Error('faile'));
});
export default request;
- 封装
- api统一管理
将每个请求封装为一个函数，并暴露出去，组件只需要调用相应函数即可，这样当我们的接口比较多时，如果需要修改只需要修改该文件即可。
api文件夹->index.js：
import requests from "./request";
// 三级联动接口
export const reqCategoryList = () => {
//发送请求 axios发请求 返回的是promise对象
return requests({ url: '/product/getBaseCategoryList', method: 'get' });
}
在组件中导入、调用函数进行数据请求：
import {reqCateGoryList} from './api'
//发起请求
reqCateGoryList();
- 跨域问题
常见形式：JSONP、CROS、代理；
服务器之间没有跨域问题，在浏览器之间才存在这个问题；
这里使用代理来解决：
浏览器发送请求给代理服务器，服务器看到某一字段后，向target服务器请求数据
在vue.config.js中配置proxy为通过代理解决跨域问题。
我们在封装axios的时候已经设置了baseURL为api,所以所有的请求都会携带/api，这里我们就将/api进行了转换。如果你的项目没有封装axios，或者没有配置baseURL，建议进行配置。要保证baseURL和这里的代理映射相同，此处都为’/api’。
webpack中文文档 https://webpack.docschina.org/configuration/dev-server/#devserverproxy
vue.config.js->webpack.config.js
module.exports = {
//关闭eslint(不按规范会报错)
lintOnSave: false,
//代理跨域
devServer: {
proxy: {
'/api': {
target: 'http://39.98.123.211',
},
},
},
}
nprogress插件->进度条
在发送请求时，进度条往前走，服务器受理成功后，就会结束
npm i --save nprogress
nprogress对象中包含了start(),done()方法，及进度开始和进度结束；我们只要在请求拦截器和响应拦截器中调用就行；调用前需要先引入nprogress
request.js中使用：
在node_modules文件夹下的nprogress文件夹的css样式文件中可以修改进度条（bar）样式：
vuex模块化
1.引入小仓库 import xxx from ‘xxx’
2.modules：{
home,search
}
三级联动笔记还没补
js动态改变三级联动样式
事件委托
Search模块
- 商品分类与过度动画
添加鼠标移入移除事件；
改变v-show中表达式的值；
判断this.$route.path来源于哪里（判断条件：是否来源于Home页面）；
过渡动画：前提是组件|元素必须有v-if或v-show指令才可以进行过渡
