尚品汇解析01

在浏览器运行：npm run serve

样式为less：npm install --save less less-loader

vue文件中<template>只能有一个根元素即<div>...</div>

安装vue-router插件：npm install --save vue-router

报错：vue和vue-router需要安装兼容的版本        

npm install vue-router@3.1.3 --save-dev
路由组件（pages、views）

==》配置路由（router）

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({

    routes:[

        {

           path:'',

           compoent:

        },

    ]

重定向

{

            path:'*',

            redirect:'/home'

        },

==》在main.js中引入、注册

import router from '@/router'

new Vue({

  render: h => h(App),

  router

}).$mount('#app')

==》在app.vue中使用

路由注册出口    

<router-vue></router-vue>

路由元信息

{

            path:'/home',

            component:Home,

            meta:{showFooter:true}

        },

路由传递参数：params和query参数

传递字符串

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

模板字符串

this.$router.push('/search/${this.msg}') 

对象

报错：Can't resolve 'core-js/fn/symbol'        不知道怎么回事被莫名其妙加上了core-js/fn/symbol删掉就可以了

      this.$router.push({name:"search",params:{msg:this.msg}})

path:'/search/:msg?'        注解：：msg是绑定msg，？是正则表达式 

当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题

自己在调用路由跳转函数的时候自己去捕捉处理一下promise就行了。 

          像这样      router.push('/location').catch(err => {})

           或者直接把push在router原型上二次封装一下，

路由拆分组件，该组件注册为全局组件：

组件模块==》在main.js中注册为全局组件

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

Vue.component(TypeNav.name,TypeNav)

axios二次封装：创建一个axios实例requests，对其的请求拦截器和响应拦截器配置

import axios from 'axios'

// 创建一个实例

const requests = axios.create({

    baseURl:'/api',

    timeout:5000

})

// 请求拦截器

requests.interceptors.request.use(function (config) {

    return config;

  }, function (error) {

    return Promise.reject(error);

  });

// 响应拦截器

requests.interceptors.response.use(function (response) {

    return response.data;

  }, function (error) {

    return Promise.reject(error);

  });

API接口统一管理

import requests from './request'

import request from './request'

export const reqCategoryList = ()=>{

    return requests({url:'/product/getBaseCategoryList',method:"get"})

}

跨域问题：

浏览器向服务器发送请求，存在跨域（协议、端口号、域名不同）问题，可以使用代理的方法，寻找中间服务器，服务器向服务器发送请求不存在跨域问题

vue.config.js配置：

devServer:{

    proxy: {

      "/api": {

        target: "http://localhost:3000",

        pathRewrite: {"^/api" : ""}

      }

    }

  }

进度条nprogress

npm install --save nprogress

在api的request.js文档中，请求拦截器是在发请求之前（nProgress.start()），响应拦截器是在收到响应之后（nProgress.done()） 

npm install加不加save

npm install xxx --save
会将该依赖存入到package.json 里的dependcies里
npm install xxx
则不会将该依赖存入到package.json 里的dependcies里
--save-dev

vuex状态管理

在vue2中，要用vuex的3版本

使用：store/index.js

==》mian.js注册