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

目录

一，创建vue项目

二，设置路由

一，创建vue项目

1. 打开命令台窗口，跳转到要创建项目的文件目录
2. 输入npm create vite@latest创建项目
3. 输入项目名称
4. 按向下箭头选中vue，回车
5. 选择JavaScript，回车
6. 选择no，不打开项目。在文件夹中可以看到刚刚创建的项目文件
7. 继续在命令台输入命令，输入cd demo4_create，进入项目文件
8. 在命令台输入npm install 安装依赖
9. 依赖安装成功后，会在demo4_create文件中生成node_modules文件夹
10. 运行项目：命令台输入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>

• 运行代码，效果如下：

  router页面跳转效果