vue-cli4下创建前端项目(路由、vuex与axios应用)

之前写前端项目基本上都是一个html，然后<script>引入一堆js这样开发，显得非常乱而且也不好维护，于是最近拿之前暑期实训的前端部分同学的代码结合相关官网学习了一下，不过当时的版本是vue-cli3，而我学的时候用的是vue-cli4，导致有些地方踩到了坑，通过阅读文档等解决了问题之后我把几个重要的配置项进行了一下总结，搭建了一个框架，之后就可以按照这个框架去填充具体业务了。但其实目前还有很多不足，比如在路由上并没有鉴权等，也没有规划静态资源的位置等，但是已经可以进行简单的开发了，之后我也会在这个项目的基础上去开发我自己的项目，如果遇到什么问题的话可以再继续分享。

1.创建项目与安装必要依赖

vue create note-front

然后选择使用vue3。

该命令会创建一个文件夹note-front，下面保存详细的项目文件，以下的目录都将以note-front下作为根目录说明。

安装依赖需要在该文件夹下启动终端之后进行。

除VUE外项目需要用到以下的依赖，此外，为了支持vue-cli4 的语法，以下的各模块我都使用了最新版本：

• axios 用于请求
• vuex 用于存储状态
• vuex-persistedstate 用于持久化存储状态
• js-cookie 用于操作cookie，这里配合将状态持久化到cookie中
• vue-router 用于路由

npm install vue-router@4.0.11 --save
npm install axios --save
npm install vuex@4.0.2 --save
npm install vuex-persistedstate@4.0.0 --save
npm install js-cookie --save

到这里依赖部分就安装完成了。

2.修改app.vue，增加路由显示器

<template>
  <router-view></router-view>
</template>
<script>
export default {
     
  name: 'App',
  components: {
     
  },
  methods: {
     
  }
}
</script>
<style>
#app {
     
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3.配置请求

这里进行两次封装，第一次对axios进行封装，设置默认的base_url以及前置处理等信息得到get和post方法，第二次对这两个方法再次进行封装得到api，当需要获取数据的时候，只需要调用api的方法即可。

3.1.对axois的封装

在src文件夹下新建utils文件夹，保存工具类，再在utils文件夹中新建request.js，写入如下内容：

import axios from 'axios';
const request = axios.create({
   
    // 设置路径前缀，使用时所有路径请求时都会增加这个前缀
    baseURL: 'http://localhost:9003/api',
    // 设置请求超时时间
    timeout: 5000
});
// 请求回复前置处理
request.interceptors.response.use(response => {
   
    // 请求发送后的处理方式，如果code不为0,直接返回错误
    const res = response.data;
    if (res.code !== 0) {
   
        alert(res.message);
        return Promise.reject(res.message);
    }
    else {
   
        // 否则返回请求所带的负载
        return res.object;
    }
}, error => {
   
    // 请求发送前就失败了的时候的处理方式
    alert(error.message);
    return Promise.reject(error);
});
export default reques