创建vue3项目(使用vite) + 配置路由router

2026/6/26 16:45:15

一，创建vue项目

二，设置路由

一，创建vue项目

打开命令台窗口，跳转到要创建项目的文件目录
输入npm create vite@latest创建项目
输入项目名称
按向下箭头选中vue，回车
选择JavaScript，回车
选择no，不打开项目。在文件夹中可以看到刚刚创建的项目文件
继续在命令台输入命令，输入cd demo4_create，进入项目文件
在命令台输入npm install 安装依赖
依赖安装成功后，会在demo4_create文件中生成node_modules文件夹
运行项目：命令台输入npm run dev，查看页面

二，设置路由

安装路由：命令台输入npm install vue-router
在编译器中打开该demo4_create项目，在src中新建router文件夹，在router文件夹中新建index.js文件

在index.js中配置，复制下面的代码

import { createRouter, createWebHashHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' import HelloView from '../views/HelloView.vue' const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', name: 'Home', component: HomeView }, { path: '/hello', name: 'HelloWorld', component: HelloView } ] }) export default router

在main.js中配置router

import { createApp } from 'vue' import './style.css' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app')

在App.vue中，添加路由出口

<script setup> import { RouterView, RouterLink } from 'vue-router' </script> <template> <div> <!-- 页面跳转按钮 --> <RouterLink to="/">HomeView </RouterLink> <RouterLink to="/hello">HelloView</RouterLink> <!-- 路由出口 --> <RouterView /> </div> </template>