Vue-Axios-Github 项目使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01165/article/details/147060850

Vue-Axios-Github 项目使用教程

vue-axios-github Vue 全家桶 + axios 前端实现登录拦截、登出、拦截器等功能项目地址: https://gitcode.com/gh_mirrors/vu/vue-axios-github

1. 项目的目录结构及介绍

项目采用 Vue.js 进行构建，主要目录结构如下：

vue-axios-github/
├── README.md              // 项目说明文件
├── dist/                  // 打包构建后的文件夹
│   ├── build.js
│   └── build.js.map
├── index.html             // 项目入口HTML文件
├── package.json           // 项目依赖及配置文件
├── src/                   // 源代码目录
│   ├── App.vue            // 根组件
│   ├── assets/            // 静态资源文件夹
│   │   ├── css.css        // 样式文件
│   │   ├── icon.css       // 图标样式文件
│   │   └── logo.png       // 项目图标
│   ├── constant/          // 常量配置文件夹
│   │   └── api.js         // API接口配置文件
│   ├── http.js            // 封装HTTP请求及拦截器配置
│   ├── index.vue          // 首页组件
│   ├── login.vue          // 登录组件
│   ├── main.js            // 项目入口文件
│   ├── repository.vue     // 仓库列表组件
│   ├── router.js          // 路由配置文件
│   └── store/             // Vuex状态管理文件夹
│       ├── store.js       // Vuex状态管理文件
│       └── types.js       // Vuex类型定义文件
└── webpack.config.js      // Webpack配置文件

2. 项目的启动文件介绍

项目的启动文件是 src/main.js，它是 Vue.js 应用的入口。以下是 main.js 的主要功能：

引入 Vue 和 App 组件。
引入 Vue Router，配置路由。
引入 Vuex，配置状态管理。
挂载 Vue 应用到 DOM。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. 项目的配置文件介绍

项目的配置文件主要包括 package.json 和 webpack.config.js。

package.json 文件包含项目的依赖库和脚本，如下所示：

{
  "name": "vue-axios-github",
  "version": "1.0.0",
  "description": "Vue全家桶 + axios 前端实现登录拦截、登出、拦截器等功能",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open",
    "build": "webpack --production"
  },
  "dependencies": {
    "vue": "^2.6.14",
    "vue-router": "^3.5.3",
    "vuex": "^3.6.2",
    "axios": "^0.21.1",
    "vue-material": "^1.0.0"
  }
}