尚品汇项目

1.vue文件目录分析

node_modules文件夹：项目依赖文件夹。
public文件夹：一般放置一些静态资源（如：图片），webpack打包时会原封不动的打包到dist文件夹中。
src文件夹（源代码文件夹）：

assets文件夹：一般也是放置静态资源，(如：放置多个组件共用的静态资源)，webpack在打包时，会把这些静态资源当成时一个模块，打包在js文件里面。
components文件夹：一般放置的是非路由组件（全局组件）。
App.vue：唯一的根组件，Vue当中的组件（.vue）。
main.js：程序入口文件，也是整个程序中最先执行的文件。

babel.config.js：配置文件（babel相关）。
package.json文件：记录项目的详细信息，如项目中有哪些依赖、如何运行、名称等。
package-lock.json：缓存性文件，记录了当前项目所依赖的模块版本。

2.项目的配置

2.1开发环境打包完成，浏览器自动打开

//package.json中
"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build"
  }

2.2 eslint校验功能关闭

//在根目录下，创建一个 vue.config.js 文件
module.exports = {
    lintOnSave:false
}

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

//在根目录下，创建jsconfig.json 配置别名@，用@/ 替代src/ ，在文件数量多，嵌套层次多的时候尤为方便
//exclude表示的是不可使用该别名的文件
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    }
  },
  "exclude": ["node_module","dist"]
}

3.组件的使用

3.1 非路由组件的使用步骤

在components文件夹中创建组件
在其他组件中引入并且注册组件
已标签的形式使用

3.2 路由组件的使用

在views/pages文件夹中创建路由组件
在router文件夹中index.js中配置路由

3.3 路由组件和非路由组件区别：

非路由组件放在components中，路由组件放在pages或views中
非路由组件通过标签使用，路由组件通过路由使用
在main.js注册完路由，所有的路由和非路由组件身上都会拥有$router $route属性
$router：是vueRouter的实例对象，是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性
$route：每一个路由都会有一个 $route对象，是一个局部的对象，可以获取对应的name，path，params，query等

3.4 Footer组件的显示与隐藏

可以使用v-if 或v-show，因为v-if频繁操作Dom消耗性能，v-show只是对元素的显示或隐藏这里使用v-show
给路由配置元信息meta，在元信息中定义show属性，值为布尔值

	{
        path: '/home',
        component: Home,
        meta: {
            show: true
        }
    },
    {
        path: '/login',
        component: Login,
        meta: {
            show: false
        }
    }

将show的值赋给v-show，从而按需展示隐藏Footer组件
路由配置对象的key不能瞎写

4.路由传参

4.1 路由跳转的方式

声明式导航

//必须有to，可以把router-link理解为一个a标签，它 也可以加class修饰
<router-link to="/"></router-link>

编程式导航

//编程式导航除了路由跳转，在跳转之前还可以处理一些业务逻辑
this.$router.push('/')

4.2 路由传参

方法一：字符串或模板字符串传参
方法二：对象形式传参
注意：
query参数：不属于路径当中的一部分，类似于get请求，地址栏表现为 /search?k1=v1&k2=v2
query参数对应的路由信息 path: “/search”
params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 ,地址栏表现为 /search/v1/v2
params参数对应的路由信息要修改为path: “/search/:keyword” 这里的/:keyword就是一个params参数的占位符
路由传递参数（对象写法），如果我们传参中使用了params，只能使用name，不能使用path，如果只是使用query传参，可以使用path，所以，路由需要配置name字段，传参的语法为

this.$router.push({name:'search',params:{},query:{} })

指定params参数可传可不传

//在占位符后加 ？即可
path('/search/:keyWord?')

params参数可传可不传，但如果传递的是空串，跳转地址信息则缺少/search，如何解决呢？

this.$router.push({name:'search',params:{keyWord:''||undefined})

路由组件能不能传递props数据？
答案是可以的：
props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给组件；
props值为对象，该对象中所有的key-value的组合最终都会通过props传给组件；
props值为函数，该函数返回的对象中每一组key-value都会通过props传给组件

5.多次push相同路由报错问题

//在router的index.js文件中添加如下代码
import Vue from 'vue'
import VueRouter from 'vue-router'

//解决重复push相同路由报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

6. axios二次封装

6.1 为什么需要二次封装axios

//配置请求拦截器、响应拦截器，可以在发送请求之前处理一些业务、响应拦截器可以在数据返回之后处理一些事情
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

6.2 自定义axios实例

//可以使用自定义配置新建一个实例
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});