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

项目效果展示

项目效果展示

---

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

---

前言

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

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

---

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

一、项目配置别名

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

server: {
    host: '0.0.0.0', //解决控制台 ：Network: use --host to expose
    port: 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 expose
    port: 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

/// <reference types="vite/client" />

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>