前端vue项目搭建（router路由，element项目配置）

最新推荐文章于 2024-10-28 10:57:14 发布
最新推荐文章于 2024-10-28 10:57:14 发布
阅读量514 收藏
点赞数 7
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2301_77116754/article/details/137646258
版权
本文指导如何从创建Vue2项目开始，包括删除默认文件、添加App.vue、配置router、引入ElementUI并整合到main.js中，强调了HTML+CSS+JS的开发模式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、创建一个vue2的项目

二、创建成功后删除这三个文件

三、新建一个App.vue文件

四、在文件中添加这一段话

五、打开命令框输入指令下载router路由

六、新建一个router目录，新建index.js文件

七、导入你的路由，进行配置

八、在main.js中配置路由

九、安装element

十、main.js中配置element插件

这样vue的配置就完成了，在vue中，即可按照html+css+js的格式写即可

《Vue3笔记》第03节：Vue3项目引入VueRouter路由组件
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
12-15 818
这篇文章基于前一个小节的代码基础之上，介绍如何在Vue3项目中引入VueRouter路由组件。
Spring Boot Vue Element入门实战 九、router路由配置
常年被追砍的博客
02-18 390
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（...
element-router:Web组件的简单路由器
05-12
元素路由器 适用于Web组件v1的简单路由器，无依赖性，占用空间小（<1kb> -element，当URL与configures路径匹配时，该元素有条件地呈现元素。 它（可选）提供一个<router>元素来处理导航和显示活动状态。 欢迎并赞赏功能请求，错误报告和请求请求！ 原料药 TL; DR：将<element>放置在要在路由之间进行页面更改的位置，然后为每个路由添加具有配置的<element>元素。 使用范例 < element> < element-route path =" / " element
element-ui menu中router使用=＞组件为动态路由
Isabeldeng的博客
10-15 965
//开启router unique-opened只打开一个 <el-menu :default-openeds="['1']" unique-opened router> <el-submenu index="1"> <template slot="title" ><i class="el-icon-message"></i>金主一</template
vscode使用npm安装element-UI并添加router路由
qq_40452641的博客
01-09 1472
可以看到多了一行elementui就代表安装成功了。要启动welcome.vue还需要配置他的启动路径。要启动还要添加他的路由。这一步顺便装个axios方便以后写请求用。安装完成后需要启用elementUI。这里就以welcome.vue为例。安装完成后在目录结构打开下图文件。在main.js中配置一下启动项。最后配置welcome的路由路径。在他给的路径后面加上路由路径。vscode控制台输入指令。这里在官方文档根据提示安装。在main.js中添加路由。安装完成后加一个前端拦截器。下面是项目常用的结构。
element ui框架（路由）
嵌入式-老费，一个分享专业嵌入式知识的blog
09-18 1428
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 有过web后端开发经验的同学，相信对路由这个概念应该不陌生。后端开发一般使用的是mvc，其中c，也就是controller，对应的就是各个路由的接口。现在随着整个前后端开发越来越独立化，两者之间只有数据的交互，所以这部分路由工作也开始转到前端来完成。 回到前端开发，当前其实已经有一个第三方库可以完美支持前端路由了，这就是vue-router。在用vue-cli创建项
vue-router（element侧导栏，子组件内容切换，不传参）使用的详细步骤
小淼淼的博客
06-03 936
vue-router（element侧导栏，子组件内容切换，不传参）使用的详细步骤
vue3新建项目，配置路由vue-router，引入element-plus
01-08
总的来说，这个项目是一个使用Vue3、Vue Router 4和Element Plus的简单应用，涵盖了前端开发中的基本架构和组件库的使用。通过这个项目，你可以学习到如何配置Vue3项目、设置路由以及引入和使用UI组件库。
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
总的来说，这套"Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版"提供了一个现代化的前端开发环境，结合高效的开发工具和强大的库，使得构建后台管理系统变得更加便捷和高效。无论是对于新手...
vue-vuex-router-element-webpack:基于Vue、Vue router、Vuex、Element搭建的基础MVVM框架
05-08
Vue Router (路由) axios (http库) Element UI (UI框架) Babel (ES6/7代码转译浏览器可执行) Webpack (打包工具) 安装调试 npm i # 或 yarn npm run start # 或 yarn start 打包 npm run build # or yarn build
前端 vue3 vue3入门实战 从零搭建vue3+element-plus后台管理项目 阶段2项目源码
最新发布
04-08
这个“从零搭建vue3+element-plus后台管理项目 阶段2项目源码”对于希望学习Vue3的前端开发者来说，不仅提供了学习的机会，也提供了一个相对完整和实用的项目参考。通过深入分析和实践该项目的代码，开发者可以更好...
vue-router配合ElementUI实现导航的实例
08-28
下面小编就为大家分享一篇vue-router配合ElementUI实现导航的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui 侧边栏的router问题
weixin_51300999的博客
03-21 1509
所以就动态获取api里面的path值作为其router就行。注意带上上级路由。用字符串拼接的方式：:index="'/home/' 对二级导航栏，这里的item是 v-for循环上级的item.children（一级导航栏）的项。 <el-menu-item:index="'/home/' + item.path"></el-menu-item> ...
【Vue篇】详解router路由 | element-ui组件 | 嵌套路由
小吉妙妙屋
12-27 2606
Vue Router是Vue.js官方提供的用于构建单页应用（SPA）的路由管理器。它能够集中处理应用程序中的路由跳转、参数传递、页面切换等功能，使得开发者可以轻松地实现前端路由功能。Vue Router具有以下特点：声明式路由配置：Vue Router使用声明式的方式配置路由，通过简单的配置项，可以定义页面路径、对应的组件以及其他相关信息。这种配置方式直观且易于维护。嵌套路由：Vue Router支持嵌套路由，即一个路由下面可以包含多个子路由，从而实现更复杂的页面结构和组织方式。
vue+element+router+axios的使用
qq_42539251的博客
05-24 829
一、element的使用 •1、使用手册https://element.eleme.cn/2.0/#/zh-CN/component/installation •小例子：使用按钮 •第一步：复制手册中按钮的代码：<el-button type="success">成功按钮</el-button> •第二步：在element.js中引入按钮（按需引入，用到了哪个元素就...
ElementUi中NavMenu 导航菜单router用法
不会有人真的学前端吧
07-28 7930
ElementUi中NavMenu 导航菜单router用法 问题引出 写页面中遇到需要写NavMenu 导航菜单,作为菜鸟按照Element官方的NavMenu 导航菜单用法,传统式使用在data声明一个activeIndex作为跳转的首页,当我点击NavMenu 导航菜单到一个子路由页面(此时导航上跳转子路由的文字高亮)再点击刷新时,导航页面上的字高亮显示的是我默认的页面 展示 这是默认的页面,默认"打单管理"文字高亮 这是点击了设置之后,路由跳转,此时"设置"文字高亮 点击刷新后,路由没跳转,但
vue后台element，routes实现动态路由控制权限管理
qq_43557848的博客
10-28 1265
整体流程大概说下，在登陆成功之后，需要后端把角色权限的路由返给我们，我们再根据角色权限把后端给的路由在本地存储，在router/index 的路由控制页面用beforeEach钩子函数中做动态路由的处理，把角色权限渲染到页面中。
elementui通过router配置多级导航菜单
热门推荐
潇蓝诺依的博客
05-19 3万+
<template> <el-menu :default-active="$route.path" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="vertical" router > <side...
通过element-ui中menu和router的绑定，实现页面跳转
gao_jun1的博客
09-05 2万+
一、项目描述 通过Vue创建了一个前端项目，项目中导入了element-ui组件，项目中我创建了四个独立的vue界面（分别是：PageOne.vue、PageTwo.vue、PageThree.vue、PageFour.vue）；其次，使用element-ui创建了两个导航栏（其中包含四个页面：页面1、页面2、页面3、页面4）。需要实现的功能为：点击页面1、2、3、4，实现PageOne.vue到PageFour.vue的跳转。 项目结构如下： 二、通过menu和router的绑定实现上述功能 .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

刘伊珂

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

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

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

打赏作者

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

抵扣说明：

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

余额充值