您好,登录后才能下订单哦!
本篇内容介绍了“如何使用vue3.x+axios搭建项目”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
一. 参考文档
二. vite搭建项目
三. 配置element-ui
四. 配置vue-router
五. 配置vuex 安装
六. 配置axios
vite官方文档
vue3.x官方文档
vue-router4.x官方文档
vuex4.x官方文档
element-ui3.x官方文档
Ant Design Vue2.x官方文档
axios文档
安装
# 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
运行
npm run dev # or yarn dev
下载包
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')
验证是否配置成功
如果组件要按需引入的话可以参考文档介绍
从vue2迁移
安装
npm install vue-router@4
创建src/router/index.js文件
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文件
经过以上的过程,访问http://localhost:3000/demo 就可以看到一下界面,表明我们的路由配置成功~
npm install vuex@next --save
创建src/store/index.js文件
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中查看是否配置成功
能够成功打印测配置成功
安装
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
创建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' } }) }
在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搭建项目”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。