• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

java 搞代码 4年前 (2022-01-05) 32次浏览 已收录 0个评论
文章目录[隐藏]

因为vue3出了一段时间了,element也出了基于vue3.x版本的element-plus,这篇文章就拿他们搭建一个项目,希望能给你带来帮助

一. 参考文档

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 

  • 运行
 npm run dev # or yarn dev 

三. 配置element-ui

  • 下载包

npminstall 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迁移

安装

npminstall 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 安装

npminstall 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中查看是否配置成功

能够成功打印测配置成功

六. 配置axios

安装

npminstall axios -S

创建src/utils/request.js

 import axios from 'ax<div style="color:transparent">来源gaodai.ma#com搞##代!^码@网</div>ios' 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引入测试

  按钮

查看浏览器是否请求成功

七. 总结

经过以上几步就可以搭建一个简单的vue工程化项目,但是实际开发当中肯定不能这么简单,比如别名的配置,这个时候就需要修改vite.config.js去进行别名的配置,还有路由权限的控制以及ui库sass变量的替换等等…

本篇文章就到这里了,希望能给你带来帮助,也希望您能够多多关注gaodaima搞代码网的更多内容!

以上就是使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址