在IDEA中安装vue-router

最新推荐文章于 2023-12-04 13:29:15 发布
最新推荐文章于 2023-12-04 13:29:15 发布
阅读量2.3k 收藏 5
点赞数 1
分类专栏： vue 文章标签： npm nodejs vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43413774/article/details/116040594
版权

在IDEA中安装vue-router，我们同样要使用到npm，若没有安装npm请跳转博客Node的安装和npm的使用。

我们只需要在IDEA的Terminal中输入一个命令即可

npm install vue-router --save

在这里插入图片描述
然后我们将package.json打开出现了vue-router的版本号，这说明安转成功。
在这里插入图片描述

红颜莫知己
关注
专栏目录
12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 8310
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
【Vue3笔记03】Vue3项目工程中使用vue-router路由
最新发布
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
05-11 123
在src目录下面，新建一个router目录，在这个目录里面创建一个index.js路由文件，这个文件就是专门用于保存路由信息的。打开main.js文件，将刚刚创建的router/index.js路由文件导入到main.js里面。打开App.vue文件，使用标签显示路由。】的基础之上，引入vue-router路由插件，实现页面路由的跳转功能。接着在router/index.js配置文件中，添加两个组件的路由信息。这篇文章，是在前一篇文章【
安装Vue-router4.X
weixin_45466242的博客
10-08 189
Vue-Router4
【vue-router】
piano_diano的博客
01-10 204
首先，创建一个vue项目并初始化 1、安装vue-router，在IDEA下面的终端输入 npm install vue-router --save-dev 有问题就修复 2、在main.js中导入vue-router 然后，显示声明使用 VueRouter 3、创建自己的组件 可以看到新建的组件里的<style> 带有一个 scoped （作用域），意思就是当前的样式只能在当前文件生效 在App.vue中导入该组件 新...
IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向
wei_shuo的博客
06-16 6053
IDEA搭建vue-cli项目 | 排错思路、Webpack、路由、异步、重定向 学习
Vue-Router 基础入门 安装Vue-Router 使用Vue-Router
我是泛滥
08-07 467
Vue-Router 介绍 Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 那什么又是单页面应用(SPA)？ 一个项目中只有一个完整的html主页面，其它都
vue3 vue-router的安装及配置 (一)
wxid_mtnujb6ipc0322的博客
12-04 3071
Vue Router作用：在应用程序中实现优雅的导航和路由管理。
vue入门教程（5）——vue中vue-router的使用
qq_43413774的博客
04-23 485
目录前言7.路由vue-router7.1编写父类组件7.2.编写登陆及注册组件7.3.在父组件中引用7.4.使用vue-router1.引入vue-router依赖2.创建VurRouter对象并加入子组件3.在Vue对象中加载VueRouter 前言 在学习vue-router之前，我们要学会怎么样在IDEA中安装vue-router，若有不懂的同学请跳转博客在IDEA中安装vue-router。 7.路由vue-router 在我们安装好vue-router之后，我们要导入依赖 <script
vue-router懒加载速度缓慢问题及解决方法
12-11
懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。  像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的...
vue学习笔记——使用vue-router进行页面跳转
qq_29384339的博客
08-04 474
第一步：配置跳转页面的组件 第二步：配置路由 创建router目录并创建index.js文件 import Vue from 'vue' import VueRouter from "vue-router"; import Context from "../components/Context"; import Main from "../components/Main"; //安装路由 Vue.use(VueRouter); //配置导出路由 export default new VueRouter
IDEA安装vue,并搭建vue后台管理系统
weixin_45281571的博客
09-06 2948
IDEA安装vue,并搭建vue后台管理系统 第一次写，虽然比较菜，真实可用。 一 .安装node.js 1、下载安装包 Node.js 官方网站下载：https://nodejs.org/en/ 选择操作系统对应的包： 2、安装 打开安装，傻瓜式下一步即可： 选择安装位置，我这里装在D盘下： 一直点next 点finish 打开cmd命令 检查node.j...
新建vue项目中无router文件夹，vue安装路由
weixin_43871857的博客
01-17 1万+
问题：在新建一个vue项目时发现不存在router文件夹 解决： 首先，查看package.json中有没有router的依赖，如果没有的话执行下面图片中的语句。 npm install vue-router --save 新建一个router文件夹，在文件夹下新建一个index.js文件 在文件夹中写入如下内容 import Vue from 'vue' //对应你要跳转的组件 import HelloWorld from "../components/HelloWorld"; impo
快速创建一个vue工程，了解vue工程结构（IDEA版）
施莱的博客
04-28 1033
快速创建一个vue工程，了解vue工程结构（IDEA版） 前言： 如果你想要快速了解vue工程结构和html 项目工程的区别，那么这是个好地方呦。 ​ 这里有详细的安装说明和图片，希望对小伙伴有所帮助。 1、准备工具 vue-cli 脚手架 Node.js webpack静态模块打包器 vue-router路由 1.1、安装Node.js脚手架和vue-cli vue-cli 概述 vue-cli ​ 官方提供的一个脚手架，用于快速生成一个vue的项目模板；  预先定义好的目录结构及基础代码，就
IDEA中Vue3的安装和使用
weixin_50522741的博客
04-07 6999
一、安装node.js 下载链接：https://nodejs.org/zh-cn/，点击长期支持版进行下载，下载完之后安装程序一直点next step即可。 检查是否安装成功：在桌面的任务栏的搜索处搜索命令提示符，点击进入，输入node -v，enter后会出现node的版本信息，再输入npm -v，enter后会出现npm的版本信息。 二、安装淘宝镜像源 配置方法：在命令提示符界面输入npm config set registry=https://registry.npm.taobao.org
使用Idea搭建vue前端项目
weixin_42408447的博客
01-16 1万+
前言 【1】安装node.js，配置好环境变量，并指向taobao镜像地址 【2】安装Vue-cli3 【3】vue create 项目名称 【4】vue add element (添加 element，一个 element 风格的 UI 框架) 【5】npm install axios (安装 axios，用于网络请求) 【6】npm install vuex --save(安装 Vuex，用于管理状态) 【7】npm install vue-router (安装 路由，用于实现两个 Vue 页面的跳转
Vue 路由配置
qq_41775769的博客
03-13 6641
Vue 路由配置 为什么使用路由？   在项目中创建了 First.vue 和 Second.vue 两个页面，如果按照组件方式进行操作这两个页面，数据固定显示在 App.vue 中，但是我们知道正常项目都是通过不同的 URL 控制显示不同页面。在 SPA(单页面应用) 项目中，也是需要通过不同的 URL 在 App.vue 中显示不同的数据。路由做的是通过 URL 控制哪个页面显示在 App.vue 中的功能/组件。 什么是路由？    在 Vue 中路由就是控制显示哪个页面，通过路由显示的页面是显示在
手把手使用idea创建vue项目
热门推荐
java技术博客
05-08 1万+
手把手使用idea创建vue项目 参考网址: https://mp.weixin.qq.com/s/-AgBkwasbKHRjbLJRSJgQw 一、安装Node.js 首先要安装好Node.js,安装方法可以看我之前的文章 Node.js安装教程 小尉，公众号：51ASPNETNode.js手把手安装图文教程 二、创建vue项目 1、在IDEA中File-Open 打开一个空目录 2、然后输入命令npm install -g vue-cil 先安装vue的脚手架 然后等待安装完成。 3、安装完成
解决创建的vue项目没有router，view文件夹
m0_65380423的博客
01-08 8164
新手创见vue项目时，可能遇见创建出来的项目没有view，router文件夹的情况，解决这个问题
vue-router安装失败
weixin_44216612的博客
01-18 3543
vue-router安装出现ERR! code ERESOLVE npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: vue_cli_app@0.1.0 npm ERR! Found: less@4.1.2 npm ERR! node_modules/less npm ERR! less@"^4.1.2" from the root pr
创建springboot项目 （idea版vue-springboot）超详细 超完整_idea 创建vue+springboot_宾宾叔叔的博客-CSDN博客
05-31
好的，我知道你想问关于创建Spring Boot项目的问题。以下是一个基于Idea的Vue+Spring Boot项目创建的详细步骤： 1. 打开Idea，选择“Create New Project”创建一个新项目。 2. 在弹出的“New Project”窗口中，选择“Spring Initializr”项目类型，点击“Next”按钮。 3. 在接下来的窗口中，选择你的项目语言和Spring Boot版本，然后点击“Next”按钮。 4. 进入“Project Metadata”页面，填写项目的基本信息。 5. 在“Dependencies”页面中，选择你需要的依赖项，如Web、JPA、MyBatis等，然后点击“Next”按钮。 6. 设置项目名称和文件路径，然后点击“Finish”按钮，等待项目创建完成。 现在你已经创建了一个空的Spring Boot项目。接下来，我们需要添加Vue前端框架。 7. 打开终端，进入项目文件夹，执行以下命令： ``` npm init ``` 8. 执行以下命令安装Vue框架和相关依赖： ``` npm install vue --save npm install vue-router --save npm install vuex --save npm install axios --save ``` 9. 创建一个新的Vue组件，例如“App.vue”，并添加以下代码： ```vue <template> <div> <router-view></router-view> </div> </template> <script> export default { name: "App", }; </script> <style> </style> ``` 10. 创建一个新的Vue路由模块，“router.js”，并添加以下代码： ```javascript import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); const router = new Router({ mode: "history", routes: [ { path: "/", name: "home", component: Home, }, ], }); export default router; ``` 11. 添加以下代码到“main.js”中，初始化Vue并设置路由： ```javascript import Vue from "vue"; import App from "./App.vue"; import router from "./router"; Vue.config.productionTip = false; new Vue({ router, render: (h) => h(App), }).$mount("#app"); ``` 12. 创建一个新的Vue组件，“Home.vue”，并添加以下代码： ```vue <template> <div> <h1>Welcome to Vue + Spring Boot!</h1> </div> </template> <script> export default { name: "Home", }; </script> <style> </style> ``` 现在你已经成功添加了Vue框架，并创建了一个简单的Vue组件和路由。你可以运行Spring Boot应用程序并打开浏览器访问“http://localhost:8080”查看结果。 希望这些步骤可以帮助你创建一个基于Idea的Vue+Spring Boot项目。如果你有任何问题，请随时问我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值