一、搭建项目

① 初始化项目

vue-cli 2.x: vue init webpack 项目名称
vue-cli 3.x|4.x：vue create 项目名称

3.x 创建项目目录说明：

目录名	说明
node_modules	放置项目依赖的地方
public	一般放置一些共用的静态资源，打包上线的时候，public 文件夹里面资源原封不动打包到 dist 文件夹里面
src/assets	经常放置一些静态资源（图片），assets 文件夹里面资源 webpack 会进行打包为一个模块（js文件夹里面）
src/components	一般放置非路由组件（或者项目共用的组件）
src/App.vue	唯一的根组件
src/main.js	入口文件
src/babel.config.js	babel 配置文件
src/package.json	看到项目描述、项目依赖、项目运行指令

② 基础配置

浏览器自动打开（package.json）：

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

关闭eslint校验工具（vue.config.js）

module.exports = {
   lintOnSave:false,
}

src文件夹的别名的设置：因为项目大的时候src（源代码文件夹）里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些，创建jsconfig.json文件：

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

二、路由

① 路由组件的使用

路由组件
编写路由配置

import Vue  from 'vue';
import VueRouter from 'vue-router';
//使用插件
Vue.use(VueRouter);
//对外暴露VueRouter类的实例
export default new VueRouter({
     routes:[
          {
               path:'/home',
               component:Home
          }
     ]
})

main.js引入路由配置项

② 编程式路由

$router：进行编程式导航的路由跳转

this.$router.push
this.$router.replace

$route：可以获取路由的信息|参数

this.$route.path
this.$route.params|query
this.$route.meta

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

注意:编程式导航（push、replace）才会有这种情况的异常，声明式导航是没有这种问题，因为声明式导航内部已经解决这种问题。

这种异常，对于程序没有任何影响的。

为什么会出现这种现象：由于vue-router最新版本3.5.2，引入了promise，当传递参数多次且重复，会抛出异常，因此出现上面现象，第一种解决方案：是给push函数，传入相应的成功的回调与失败的回调。

第一种解决方案可以暂时解决当前问题，但是以后再用push、replace还是会出现类似现象，因此我们需要从根治病->重写push与replace方法。

三、axios 二次封装

为什么需要axios的二次封装？通常我们可能需要对请求前后进行特殊的处理。例如我们可以使用nprogress模块实现进度条功能

src目录下的API文件夹，一般关于axios二次封装的文件

实例：

//对axios进行二次封装
import axios from "axios";
//引入进度条
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

//引入进度条样式
//1、利用axios对象的方法create去创建一个axios实例
const requests = axios.create({
    //配置对象
    //基础路径，发请求的时候，路径当中会出现api
    baseURL: '/api',
    //请求超时的时间5s
    timeout: 5000
})
//请求拦截器：在发送请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
    nprogress.start();
    //config：配置对象，对象里面有一个属性很重要，headers请求头
    return config;
})
requests.interceptors.response.use((res) => {
    nprogress.done();
    return res.data;
}, (err) => {
    return Promise.reject(new Error(err.data))
})
export default requests;