vue3+uniapp+springboot开发校园点餐系统/微信点餐小程序03-项目路由安装

项目效果展示

项目效果展示

提示：本项目带全程视频讲解教程+源码

文章目录

• 项目效果展示
• 前言
• 一、项目配置别名
• • 1.vite.config.ts配置文件，添加如下配置
  • 2.vite配置别名依赖安装
  • 3.tsconfig.json里面添加如下代码
  • 4.如果别名配置还报错的，src下新建vite-env.d.ts
• 二、安装路由
• • 1.安装依赖
  • 2.新建路由文件
  • 3.main.ts里面引入路由
  • 4.修改App.vue为如下所示

前言

提示：本项目带全程视频讲解教程+源码

本节主要讲解项目安装vue-router路由，课程采用组合api的方式使用路由；

提示：以下是本篇文章正文内容

一、项目配置别名

1.vite.config.ts配置文件，添加如下配置

server: {host: '0.0.0.0', //解决控制台 ：Network: use --host to exposeport: 8080, //配置端口号hmr: true, //开启热更新open: true //启动在浏览器打开}

2.vite配置别名依赖安装

代码如下（示例）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server: {host: '0.0.0.0', //解决控制台 ：Network: use --host to exposeport: 8080, //配置端口号hmr: true, //开启热更新open: true //启动在浏览器打开},resolve: {alias: [{find: '@',replacement: resolve(__dirname, 'src')}]}
})

3.tsconfig.json里面添加如下代码

{"compilerOptions": {"target": "esnext","useDefineForClassFields": true,"module": "esnext","moduleResolution": "node","strict": true,"jsx": "preserve","sourceMap": true,"resolveJsonModule": true,"isolatedModules": true,"esModuleInterop": true,"lib": ["esnext", "dom"],"skipLibCheck": true,"baseUrl": ".",// paths 路径解析起点"paths": {"@/*": [   // 别名路径设置"src/*"]}},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{ "path": "./tsconfig.node.json" }]
}

4.如果别名配置还报错的，src下新建vite-env.d.ts

/// declare module '*.vue' {import type { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component
}

二、安装路由

1.安装依赖

npm install vue-router@4

2.新建路由文件

src目录下新建router文件夹，然后新建index.ts文件

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '@/components/HelloWorld.vue'const routes: Array<RouteRecordRaw> = [{path: '/home',name: 'home',component: Layout}
]const router = createRouter({history: createWebHistory(),routes
})export default router

3.main.ts里面引入路由

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

4.修改App.vue为如下所示

<template><router-view/>
</template><style lang="scss">
</style>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！