【VUE】vue+vue-router+vuex+axios+vant构建vue实战项目

目录

一、搭建vue项目

1、配置依赖环境

2、搭建vue项目

二、添加依赖

添加vuex状态管理器

引入vant等组件

设置路由跳转

在src/router/index.js文件中设置路由跳转

在main.js文件中引入

在vue文件中添加路由跳转

引入封装好的请求拦截器

在src目录下新建utils文件夹，新建文件“axios.js”

在main.js文件中引入

发送请求

 

---

一、搭建vue项目

1、配置依赖环境

1>安装node.js

2>安装国内镜像

npm install -g cnpm --registry=http://registry.npm.taobao.org

3>安装vue-cli

cnpm install -g @vue/cli

2、搭建vue项目

然后创建vue项目，定位到创建项目的文件夹

提示	输入	说明
	vue init webpack vue-demo	创建一个名称为“vue-demo”的vue项目
Target directory exists. Continue? (Y/n)	Y	提示目标目录存在，是否要继续添加，输入Y
Project name (vue-demo)	默认和文件夹名字相同	输入项目名称---项目名称不能有大写字母，输入后回车
Project description (A Vue.js project)	默认回车	输入项目描述---回车
Author	默认回车	输入作者---回车
Vue build (Use arrow keys)	回车
Install vue-router? (Y/n) Y	Y	安装路由
Use ESLint to lint your code? (Y/n)	Y
Pick an ESLint preset (Use arrow keys)	回车
Set up unit tests (Y/n)	N	单元测试
Setup e2e tests with Nightwatch? (Y/n)	N	e2e测试
Should we run `npm install` for you after the project has been created?	回车	vue脚手架工具自动下载依赖，构建项目

完整的创建过程

打开创建的vue项目

定位到创建项目的文件夹，我的是f盘下的vue-demo文件夹中的vue-demo文件夹中

 

运行指令：vue run dev

将提示给你的http地址输入到浏览器运行即可

二、添加依赖

添加vuex状态管理器

npm install vuex --save

在src目录下新建store.js文件，

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    //设置数据状态

})
export default store;

引入vant等组件

vant官网：https://youzan.github.io/vant/#/zh-CN/home

引入

1、按需引入
npm i babel-plugin-import -D


2、手动按需引入
import Button from 'vant/lib/button';
import 'vant/lib/button/style';


3、导入所有组件
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

element-ui官网：https://element.eleme.cn/#/zh-CN/component/installation

设置路由跳转

在src/router/index.js文件中设置路由跳转

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Home from '@/view/home'
Vue.use(Router)

export default new Router({
  routes: [
      {
    path: '/',  
    name: 'Home',  
    component: Home  
  }, 

]
})

在main.js文件中引入

1、在main.js文件中引入
import router from './router';
挂载到APP中
new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

在vue文件中添加路由跳转

在方法中添加路由跳转
      
 methods: {
    //   跳转home页面
    
    home() {
      this.$router.push({
        name: "Home",
      });
    },
},

引入封装好的请求拦截器

在src目录下新建utils文件夹，新建文件“axios.js”

import axios from 'axios' // 引用官方的axios库，用于我们创建自己封装的axios
import {
  Notify
} from 'vant' //引用vant组件中的Toast 用于弹出提示框
import router from '../router/index' //引用router，用于在某些错误情况下跳转路由

//设置axios的基础url，用于标识项目的地址
// axios.defaults.baseURL = 'http://localhost:8090/attendance/'


/*
 * request的请求拦截器:请求前的操作
 */
axios.interceptors.request.use(config => {

  //调取登录token
  config.headers.Authorization = localStorage.getItem("gotoken")
  localStorage.getItem("gotoken") //store.getToken()

  return config
}, error => {
  Promise.reject(error)
})

/**
 * response接收拦截器：接收后的操作
 */
// 
axios.interceptors.response.use(response => {

  //   store.state.isShowLoading = false // 加载中动画关闭

  //此处表示我们的请求让服务器正确的接收了，并且返回了数据（状态码 200）
  // 
  return response
}, error => {
  //此处表示服务器没有正确的处理我们的请求，然后给我们返回了错误的数据信息
  //status 表示 错误的http状态码
  if (!error.response) {
    // Notify({ type: 'warning', duration: 1000, message: '服务器出现问题，请稍后重试！' });
    // router.push({ name: 'login' });

  }
  const status = error.response.status
  console.log(status);
  switch (status) { // 其他情况补充处理
    case 500:
      Notify({
        type: 'warning',
        duration: 1000,
        message: '服务器响应出现问题，请稍后重试！'
      });
      break;
    case 400:
      Notify({
        type: 'warning',
        duration: 1000,
        message: '服务器无法理解请求参数，请稍后重试！'
      });
      break;
    case 401:
      Notify({
        type: 'warning',
        duration: 1000,
        message: '访问资源未授权，请登陆后重试！'
      });
      router.push({
        name: 'login'
      });
      break;
    case 403:
      Notify({
        type: 'warning',
        duration: 1000,
        message: '请求资源暂时不可用，请登陆后重试！'
      });
      router.push({
        name: 'login'
      });
      break;
    case 404:
      Notify({
        type: 'warning',
        duration: 1000,
        message: '请求资源暂不存在，请稍后重试！'
      });
      break;
  }
  return Promise.reject(error)
})
export default axios

在main.js文件中引入

import axios from '../src/utils/axios' // 引入axios请求拦截器
Vue.prototype.$axios = axios // 全局挂载axios

发送请求

get请求
this.$axios.get(url).then((res) => {}
post请求
this.$axios.post(url).then((res) => {}

完整的main.js文件

import Vue from 'vue'
import Vuex from 'vuex'

/***************************************vant组件引入：****************************/
import Vant from 'vant' // 引入vant组件库
import 'vant/lib/index.css' // 引入vant样式

import touch from 'vue-directive-touch' // 滑动：长按，左右划等

/***************************************本地组件或者样式引入：****************************/
import App from './App'
import router from '../src/router/index'
import store from './store'
import axios from '../src/utils/dynamicAxios' // 引入axios请求拦截器
import "lib-flexible"; // 引入 flexible用于适配不同屏幕移动端显示

// 引入echarts
import echarts from 'echarts'

// vue页面组件使用：
Vue.use(Vuex)
Vue.use(store)
Vue.use(Vant)
Vue.use(touch)


// vue页面属性使用：
Vue.config.productionTip = false

/***************全局挂载：******************/
Vue.prototype.$axios = axios // 全局挂载axios
Vue.prototype.$echarts = echarts // 全局挂载echarts图表组件
new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')