vue-router4 (一) vite安装并构建项目

已于 2024-07-05 10:06:48 修改
阅读量406 收藏
点赞数 1
分类专栏： vue-router4 文章标签： vue.js 前端
于 2024-02-27 10:29:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2301_76510083/article/details/136314875
版权
本文介绍了如何使用Vite构建项目，包括通过npm初始化并安装VueRouter，以及针对Vue2和Vue3选择合适的插件（vetur和volar），并提醒读者在Vue3中需禁用Vue2的vetur以解决插件冲突。

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

1、使用vite构建项目，cmd运行

npm init vite@latest

2、安装vue-router  (Vue2安装对应的router3版本；Vue3 安装对应的router4版本)

npm install vue-router  -s

构建步骤截图如下：

注：

vue2使用vetur

vue3使用volar

这两个插件有冲突，用vue3必须先禁用vue2的vetur！ 

2.（vue3.x+vite）使用vue-router
GIS之家家长
11-24 499
2.（vue3.x+vite）使用vue-router
[Vue3：Vite构建项目]：安装router实现登录页面路由跳转
凡解的博客
06-07 1654
vite vue elementui router
02.Vite 安装 Vue-Router
qq_34820433的博客
04-26 1600
createApp(App).use(router)... 5. 第二步：创建路由配置文件 router/index.js，可复制《Vue3.x 工具篇》的配置；6. 第三步：创建视图组件 views/*.vue，比如：Home.vue 和 About.vue；7. 第四步：在 App.vue 中移植主页信息到 Home.vue，并设置 link；1. 进入项目目录，比如：vite-01，使用如下命令安装路由；4. 第一步：先注册路由，在 main.js 下注册路由；1.Vue-Router 安装。
【Vite 】Vite 下配置 vue-router、vuex
qq_35712802的博客
08-04 779
等待安装完成，没报错就行。
Vite + Vue项目安装router
hua_bj的博客
02-07 933
Vite + Vue项目安装router
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
通过这个示例项目，你可以了解到如何在 Vue3.x、Vite 和 TypeScript 的环境中设置和使用 Vue Router 4.x，这将对你的前端开发技能有极大的提升。同时，实践项目也能帮助你更好地理解和掌握这些技术的实战应用。
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+...
基于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 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
cool-vue-vite-cli：使用vite2 vue3 axios vuex vue-router的测试演示
02-20
总结来说，"cool-vue-vite-cli"项目是一个全面展示现代前端开发流程的示例，涵盖了Vite2的快速开发特性、Vue3的新特性、Axios的网络请求处理、Vuex的状态管理和Vue-Router的路由控制，以及TypeScript和CSS的应用。...
Vite4 + Vue3 + vue-router4 动态路由
Etc.End的博客
03-12 4312
动态路由，基本上每一个项目都能接触到这个东西，通俗一点就是我们的菜单是根据后端接口返回的数据进行动态生成的。表面上是对菜单的一个展现处理，其实内部就是对router的一个数据处理。这样就可以根据角色权限或者一些业务上的需求，根据不同属性就行路由的划分。到达不同的页面渲染效果。本文只是讲解菜单的权限控制，不到按钮级别。其实按钮也是差不多的。可以设置一个属性表示菜单，一个属性表示按钮，每一个菜单的叶子节点上都包含根据权限返回的按钮数组。接着可以通过组件的形式去输出相应的按钮就可以。
Vue3+vite搭建基础架构（6）--- 使用vue-router
weixin_48040732的博客
02-18 1811
这里记录下自己在Vue3+vite的项目使用vue-router的过程，不使用ts语法，方便以后直接使用。
使用vite构建Vue项目（element-plus + vue-router）
qq_62830772的博客
07-18 968
在任意目录下运行命令：node -v pnpm -v。
yarn创建vitevue3，安装vue-router
董小礼的博客
01-17 1941
5.入口main.js使用路由。我们用的javaScript。选择环境这里我们选择Vue。cd项目，然后安装依赖。6.修改app.vue。
vite构建项目（vue），安装router插件和axios并进行配置
最新发布
weixin_61871678的博客
02-11 648
用命令窗口使用npm create vite@latest 命令 latest表示最新版本初次需要y确认输入项目名选择vue框架选择javascript创建完成后可使用以下命令进入项目并安装依赖、启动vscode中有时需切换为。
使用Vite安装并初始化Vue2 + pinia + vue-router项目
gdtown的博客
01-28 2411
使用 npm create vite 命令先创建项目vite cli的选择。
使用vite配置路由
qq_46538844的博客
09-26 3504
在src下新建router文件夹和views文件夹。在router文件夹下新建index.js文件，在views文件夹下新建InDex.vue文件。注意：router 文件夹、index.js文件、views 文件夹、InDex.vue文件最好不要改名字，因为全局配置中会用到。二、安装路由，指令npm install vue-router@4。一、创建vite项目。
VUE+Vite 搭建项目
weixin_50251467的博客
02-20 173
搭建步骤
使用vite搭建vue3项目+配置路由
qq_45451688的博客
07-18 637
3.在routes文件夹下创建 index.ts， 在views文件夹下创建index.vue或者你的页面。2.在src目录下 创建 routes文件夹（用做放路由js文件）和views文件夹（用做放页面文件）5.选择TypeScript或者JavaScript（我选用的是TypeScript） 然后回车。2.然后在vite.config.ts中配置（这里可以直接复制用）3.输入项目名称并回车（这里我输入的是my_vue3）6.写好路由容器（这里是在app.vue里面编写）
vite 安装vue-router
11-21
Vite 是一个快速的前端构建工具，它通过即时热更新和高效的模块预加载来提升开发效率。Vue Router 是 Vue.js 的官方路由库，用于处理单页面应用 (SPA) 中的URL变化以及视图的动态切换。 要在 Vite 中安装 Vue Router，你需要遵循以下步骤： 1. **初始化项目**：首先确保你已经全局安装了 `npm` 或 `yarn`。如果还没安装，可以在命令行运行 `npm i -g create-vite` 或者 `yarn global add create-vite`。 2. **创建新项目**：使用 Vite 创建一个新的项目，例如： ``` npx create-vite my-vue-app ``` 或者 ``` vite create my-vue-app ``` 3. **安装依赖**：进入项目目录后，运行安装命令以添加 Vue 和 Vue Router 到 `package.json` 文件中： ``` cd my-vue-app npm install vue@next vue-router --save ``` 或者 ``` yarn add vue@next vue-router ``` 4. **配置文件**：在 `vite.config.js` 或 ` vite.config.ts` 文件中，引入并配置 Vue Router。示例： ```js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { createRouter, createWebHistory } from 'vue-router' export default defineConfig({ plugins: [vue()], build: { target: 'esnext', // 设置目标环境 }, server: { middlewareMode: true, }, router: () => { const router = createRouter({ history: createWebHistory(process.env.BASE_URL), // 使用 web 驱动的历史模式 routes: [ // 你的路由配置 ] }) return router } }) ``` 5. **导入和使用**：在需要的地方，如 App.vue 或 main.js，导入 Vue Router 并将其挂载到 Vue 实例上： ```js import { createApp } from 'vue' import App from './App.vue' import router from './router' // 导入你的路由实例 createApp(App).use(router).mount('#app') ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值