如何使用vue3.x+axios搭建项目

发布时间:2021-08-24 15:05:12 作者:chen
来源:亿速云 阅读:995

本篇内容介绍了“如何使用vue3.x+axios搭建项目”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

目录

一. 参考文档

vite官方文档

vue3.x官方文档

vue-router4.x官方文档

vuex4.x官方文档

element-ui3.x官方文档

Ant Design Vue2.x官方文档

axios文档

二. vite搭建项目

# npm 安装
npm init vite@latest

# yarn 安装
yarn create vite

# 快速安装vue模板项目
yarn create vite my-vue-app --template vue

npm init vite@latest my-vue-app -- --template vue

如何使用vue3.x+axios搭建项目

npm run dev 

# or
yarn dev

如何使用vue3.x+axios搭建项目

三. 配置element-ui

npm install element-plus --save

修改src/main.js

import { createApp } from 'vue'

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

验证是否配置成功

如何使用vue3.x+axios搭建项目

如果组件要按需引入的话可以参考文档介绍

如何使用vue3.x+axios搭建项目

四. 配置vue-router

从vue2迁移

安装

npm install vue-router@4

创建src/router/index.js文件

如何使用vue3.x+axios搭建项目

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/demo',
    name: 'demo',
    component: () => import('../views/demo.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

修改main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
// 引入路由配置
import router from './router/index'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
// 注册
app.use(router)
app.mount('#app')

修改App.vue添加路由视图

<template>
  <el-button type="primary">按钮</el-button>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'app'
}
</script>

创建src/views/demo.vue文件

如何使用vue3.x+axios搭建项目

经过以上的过程,访问http://localhost:3000/demo 就可以看到一下界面,表明我们的路由配置成功~

如何使用vue3.x+axios搭建项目

五. 配置vuex 安装

npm install vuex@next --save

创建src/store/index.js文件

如何使用vue3.x+axios搭建项目

import { createStore } from "vuex";

const store = createStore({
  state () {
    return {
      app: '我是app'
    }
  },
  mutations: {

  },
  actions: {

  }
})

export default store

修改src/main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import router from './router/index'
// 引入文件
import store from './store/index'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
// 注册
app.use(store)
app.mount('#app')

在App.vue中查看是否配置成功

如何使用vue3.x+axios搭建项目

能够成功打印测配置成功

如何使用vue3.x+axios搭建项目

六. 配置axios

安装

npm install axios -S

创建src/utils/request.js

import axios from 'axios'

const services = axios.create({
  baseURL: 'https://api.apiopen.top',
  timeout: 6000
})

// 请求拦截
services.interceptors.request.use(config => {
  // 在这可以添加一些请求头的逻辑,如配置token
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截
services.interceptors.response.use(response => {
  // 在这可以根据实际后台的响应值去进行判断,如code: 0 或者登录失效跳转到登录页等
  return response.data
}, error => {
  return Promise.reject(error)
})

export default services

如何使用vue3.x+axios搭建项目

创建src/api/app.js配置气你跪求方法

import request from '../utils/request'

export const send = () => {
  return request({
    url: '/getJoke',
    method: 'get',
    params: {
      page: 1,
      count: 2,
      type: 'video'
    }
  })
}

如何使用vue3.x+axios搭建项目

在App.vue引入测试

<template>
  <el-button type="primary">按钮</el-button>
  <router-view></router-view>
</template>

<script>
// 引入请求方法 
import { send } from "./api/app";
export default {
  name: "app",
  async mounted() {
    console.log("store>>>", this.$store.state.app);
    // 请求
    const res = await send()
    console.log('res>>>', res)
  },
};
</script>

查看浏览器是否请求成功

如何使用vue3.x+axios搭建项目

“如何使用vue3.x+axios搭建项目”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. 如何搭建SpringMVC项目
  2. MyBatis搭建项目

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue3.x axios

上一篇:VUE怎么实现token登录验证

下一篇:Java如何使用HttpClient发送GET请求和POST请求

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》