Vite+Vue3+Element-plus+Axios+Router前端框架搭建 2

最新推荐文章于 2024-09-16 19:54:33 发布
最新推荐文章于 2024-09-16 19:54:33 发布
阅读量547 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/skdsxx/article/details/118938364
版权
本文记录了使用Vite、Vue3、Element-plus和Axios构建前端框架过程中遇到的问题及解决方法，包括路由配置、数据获取、el-menu选中问题、按钮点击事件、npm警告、表单验证以及时间日期选择等细节。
摘要由CSDN通过智能技术生成

记录自己的学习路程，每天再进步一点点

15.编写路由配置 需要解决登录页面跳转主页面后不能在浏览器上回调

16.正确访问获取数据后，前端不显示内容，因为绑定的树形代码表字段首字母是小写的，而我写成大写

17.axios封装了get方法后，调用的时候参数，必须按照Json对象的格式编写，如下图

最低0.47元/天 解锁文章
skdsxx
关注
专栏目录
Vite+Vue3+Element-plus+Axios+Router前端框架搭建 1
skdsxx的专栏
07-20 535
记录自己的学习路程，bu'qi 1.打开VSCode 2.terminal终端输入命令npm init @vitejs/app vite.config.js内容如下 import{defineConfig}from'vite' importvuefrom'@vitejs/plugin-vue' constpath=require("path"); //https://vitejs.dev/config/ exportdefaultde...
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
vite + vue3 + elementPlus + vuex + axios项目搭建及问题
Thekingyu的博客
07-09 847
遇到的问题： 1：elementplus 引入后功能正常 其里面 icon 无效 2：elementplus 默认英文问题 3：vue3把过滤器删掉了我用什么替代 4：vue3 routerview 第一次加载空白页 我想强制刷新怎么办 next updata？ 5：引入vuex保存变量发现刷新丢失怎么办 6： vite 打包后放服务器js css 找不到怎么配置 常规为题： 1：vue3使用获取路由传参 2：vue3父组件触发子组件方法 3：vue3 getCurrentInstanc
element-plus的菜单组件el-menu
最新发布
lucky_ly的博客
09-16 881
菜单是几乎是每个管理系统的软件系统中不可或缺的，element-plus提供的菜单组件可以快速完成大部分的菜单的需求开发，该组件内置和vue-router的集成，使用起来很方便。主要组件如下。
vue3+ts+vite+element plus+axios+pinia框架搭建
qq_41296917的博客
06-28 5309
一、技术栈 Vue3：组件封装和拆分比Vue2更加细化和合理。 TypeScript：严格类型检查，对于每一个参数和变量，定义之初就规定了其类型，后续再赋值其它类型会报错。 Vite：之前看的时候Vite还不适合生产环境，近段时间看网上的口风貌似变了，因此可以尝试作为打包工具替代webpack试试。 Element plus：ui组件库，比较热门的vue组件库之一。 Axios：基于request的http库，比较常用。 Vue-router：路由控制。 Pinia：状态管理类库，比vuex更小，对ts的
Vite+Vue3.0+ElementPlus + axios +TS 搭建项目
Memory_888的博客
01-13 1313
vue3+vite+ts+element-plus+axios封装 搭建项目
SSM(Vue3+ElementPlus+Axios+SSM前后端分离)-架子搭建
业精于勤，荒于嬉
05-13 2918
1) 梳理Vue3 最重要的路由机制, 理解后就清晰很多因为我们是前后端分离 tomato需要8080这里我们就更改VUE的端口了。技术栈 说明: 前后端分离开发, 前端框架Vue + 后端框架SSM 前端框架Vue。 后台框架-SSM（SpringMVC+Spring+MyBatis） 数据库-MySQL。使用逆向工程生成Bean、XxxMapper 和XxxMapper.xmlSSM(Vue3+ElementPlus+Axios+SSM前后端分离)--架子搭建 vue3的结构 和介绍以及使用和解决了中文
vue3全家桶+vite+element plus+axios
qq_46361215的博客
08-01 642
vite+vue3
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
vite + vue3 + element-plus + axios + vueRouter + vuex + scss 搭建项目
twinkle的博客
01-07 3762
vite + vue3 + element-plus + axios + vueRouter + vuex + scss 搭建项目 准备工作 1.先搭建一个vue工程，这里有两种办法，一种是使用vue-cli ,另一种是使用vite(一种新的构建工具)，具体搭建 传送门 2.搭建好项目后，我们就可以安装对应的库了，这里需要安装以下的这些库： npm install --save axios 这个库不需要说使用next版本，vue升级和发起http请求没有直接的关系，所以axios不用说要不要升级安装
【Vue3】首页 layout 架子 [element-plus 菜单]
qq_39921135的博客
06-17 356
可以将下述标签理解为div，只不过更有语义一些。el-container 右侧。el-aside 左侧。
Vite+vue3+Element-plus+Route+Vuex+Axios项目搭建
qq_43548590的博客
12-23 1834
Vite+vue3+Element-plus+Route+Vuex项目搭建官网搭建Vite项目启动项目安装Element安装Vue-Router安装Vuex安装vue-i18n国际化插件安装axios 官网 名称 地址 vite https://vitejs.cn/ Element https://element-plus.gitee.io/zh-CN/ Vue-Router https://router.vuejs.org/zh/ Vuex https://vuex.vuejs
vue3+element plus 实现管理系统布局样式
weixin_53141315的博客
05-10 3825
vue3+element plus 实现管理系统布局样式（让布局占满页面，不随内容增加而变化）
基于Vue3的一个前端应用平台搭建方案（element+axios+qs+vue-router+scss）
厉害哥哥的博客
03-19 477
vue3发布已久，相信迫不及待的小伙伴已经跃跃欲试了。作者也是趁着空闲时间，特意搭建了一个基于vue3的web前端应用平台，该平台基于element-plus实现前端UI展示，vue-router实现路由管理，axios与qs实现网络api请求，scss实现页面布局属性控制。由于vue3并不是vue2的简单升级，而是做了较大的改动，所以与以上的组件兼容还不是特别友好，有些组件的使用也和原来的处理方式大相径庭。作者参考了官网及许多其它作者的文章，特意搭建了一个基于vue3的web前端应用平台，以供各位参考，源
vue3组合式编程+ts+vueRouter+pinia+ElemetPlus前端框架搭建
weixin_52247433的博客
01-12 1862
下载axios: npm i axios新建两个配置文件 执行 npm run dev 则读取此文件#.env.development文件# 此文件为开发阶段使用的配置文件 执行 npm run dev 则读取此文件# 开发环境配置: 必须以 `VITE_` 开头# 例如:VITE_ETOAK=/小猪佩奇# 获取方式 import.meta.env.VITE_ETOAK# 那么 这里通过 import.meta.env.VITE_APP_BASE_API 可以获取后面的基本地址。
vue3项目创建+基本配置的完整版（vite+element plus+pinia +typescript）
m0_63304840的博客
11-24 543
vue3项目创建+基本配置（vite+element plus+pinia +typescript + sass）
vue3+vite+elementPlus
一个一直在努力的前端小白，在为了成为全栈程序员的道路上加油！
07-03 219
最火的框架，国内最火的前端框架之一。性能提升，运行速度是vue2的1.5倍。体积更小，按需编译体积vue2要更小。类型推断，更好的支持ts这个也是趋势。高级给予，暴露了更底层的API和提供更先进的内置组件。使用api连接后端数据，实现增删改查，模糊查询操作！一个vue3+vite的小例子。
vite+vue3+js+vue-router+pinia+axios+element-plus
09-02
Vite是一个用于快速构建现代化的Web项目的构建工具，它专注于开发阶段的快速热重载，并使用ES模块作为原生的开发模式。Vue3是Vue.js的最新版本，它在性能、开发体验和可维护性上都有所提升。 针对你提到的具体的库和框架： - Vue Router是Vue.js官方的路由管理器，用于实现页面之间的导航和路由控制。你可以通过npm安装vue-router，并在项目中进行配置和使用。 - Pinia是Vue.js的状态管理库，它提供了一种简单而强大的方式来管理应用程序的状态。你可以集成Pinia到你的Vue项目中，以便更好地组织和共享你的应用程序状态。 - Axios是一个基于Promise的HTTP客户端，用于通过网络发送异步请求。你可以使用Axios来处理与服务器的通信，并获取数据来更新你的Vue应用程序。 - Element Plus是一套基于Vue3的组件库，包含了丰富的UI组件，可以帮助你快速搭建漂亮的用户界面。你可以在项目中安装和使用Element Plus来实现各种交互效果和用户界面。 如果你想使用Vite、Vue3和以上提到的库和框架来创建一个项目，你可以按照以下步骤进行： 1. 安装Vite：通过npm全局安装Vite，然后使用Vite命令初始化一个新的项目。 2. 配置Vite：根据你的项目需求，在Vite的配置文件中添加Vue Router、Pinia、Axios和Element Plus的相关配置。 3. 安装和配置Vue Router：通过npm安装Vue Router，并在项目中配置和使用Vue Router来管理应用程序的路由。 4. 集成Pinia：通过npm安装Pinia，并在项目中引入和配置Pinia，以便在应用程序中使用Pinia来管理状态。 5. 使用Axios：通过npm安装Axios，并在项目中引入和配置Axios，以便进行网络请求和数据获取。 6. 引入Element Plus：通过npm安装Element Plus，并在项目中按需引入和使用Element Plus的组件，以搭建漂亮的用户界面。 希望以上信息对你有帮助，祝你在使用Vite、Vue3和这些库和框架时取得成功！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vite-vue-ts精简模版集成pinia+svg+router+@src](https://download.csdn.net/download/ldy889/85018930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vite+vue3+ts+vue-router+pinia+axios+element-plus](https://blog.csdn.net/zy_080400/article/details/127125359)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

skdsxx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值