文章目录

• 一、搭建项目
• 二、路由
• 三、axios 二次封装
• 四、vuex

一、搭建项目

① 初始化项目

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

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

② 基础配置

浏览器自动打开（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;

四、vuex

当项目比较大，组件通信数据比较复杂，这种情况在使用vuex仓库进行存储项目的数据

Vuex核心概念：state、actions、mutations、getters、modules

vuex模块式开发：由于项目体积比较大，你向服务器发请求的接口过多，服务器返回的数据也会很多，如果还用以前的方式存储数据，导致vuex中的state数据格式比较复杂。采用vuex模块式管理数据。