vue3+vite+ts 搭建脚手架01创建vite项目并且在项目中初次使用router

vue3+vite 搭建脚手架01创建vite项目并且在项目中使用router

1.使用yarn安装vite项目

yarn create vite 搭建vite项目    在开发语言中选择vue+ts

2.安装现在最新的 vue-router@4

yarn add vue-router@4    在packger中检查是否成功安装

3.简单配置router文件

在项目中新建views和router两个新文件夹

router/index.ts文件内容如下

import { createRouter, createWebHistory } from "vue-router";const router = createRouter({history: createWebHistory(),routes: [{ path: "/", component: () => import("../views/home.vue") }],
});// export function setupRouter()
export default router;

在main.ts中配置如下

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");

4. 在程序中使用router

新建的views/home.vue文件内容如下

<template><h1>home</h1>
</template>
<script setup lang="ts"></script><style lang="scss" scoped></style>

现在 在App.vue中使用router引入home.vue方式如下

<script setup lang="ts"></script><template><router-view></router-view>
</template><style scoped></style>

5. 配置完成后预览页面