使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目
目录
- 一. 参考文档
- 二. vite搭建项目
- 三. 配置element-ui
- 四. 配置vue-router
- 五. 配置vuex 安装
- 六. 配置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 vuenpm init vite@latest my-vue-app -- --template vue
文章图片
- 运行
npm run dev # oryarn dev
文章图片
三. 配置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')
验证是否配置成功
文章图片
如果组件要按需引入的话可以参考文档介绍
文章图片
四. 配置vue-router 从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添加路由视图
按钮
创建src/views/demo.vue文件
文章图片
经过以上的过程,访问http://localhost:3000/demo 就可以看到一下界面,表明我们的路由配置成功~
文章图片
五. 配置vuex 安装
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中查看是否配置成功
文章图片
【使用vue3.x+vite+element-ui+vue-router+vuex+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 => {// 在这可以添加一些请求头的逻辑,如配置tokenreturn 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引入测试
按钮
查看浏览器是否请求成功
文章图片
七. 总结 经过以上几步就可以搭建一个简单的vue工程化项目,但是实际开发当中肯定不能这么简单,比如别名的配置,这个时候就需要修改vite.config.js去进行别名的配置,还有路由权限的控制以及ui库sass变量的替换等等…
本篇文章就到这里了,希望能给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 使用协程爬取网页,计算网页数据大小