目录一创建vue项目二设置路由一创建vue项目打开命令台窗口跳转到要创建项目的文件目录输入npm create vitelatest创建项目输入项目名称按向下箭头选中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中配置routerimport { 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/helloHelloView/RouterLink !-- 路由出口 -- RouterView / /div /template运行代码效果如下router页面跳转效果