安装pnpm

这次尝试使用pnpm 创建项目，所以首先需要安装pnpm

1
npm install -g pnpm

创建项目

1
pnpm create vite vite-vue-app --template vue-ts

使用vue-ts 模板创建项目

启动

1
2
3
cd vite-vue-app
pnpm install
pnpm run dev

启动成功后，浏览器访问可以看到一下主页面

此时的项目目录

启用vue-router

安装

1
pnpm add vue-router@4

配置路由

在src下创建router文件夹，文件夹内创建index.ts文件如下

router/index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";

import HelloWorld from "../components/HelloWorld.vue";

const routes:RouteRecordRaw[] = [
    {
        path: '/hello',
        component: HelloWorld
    }
]

export const router = createRouter({
    history: createWebHistory(),
    routes,
})

修改main.ts文件

mian.ts
1
2
3
4
5
6
7
8
9
10
11
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 文件

App.vue
1
2
3
4
<template>
  <!-- 路由跳转处理 -->
  <router-view />
</template>

此时，我们在浏览器访问 [localhost:5137](http://localhost:5137) 时，不能访问到任何页面，因为没有配置根路径转发，而访问localhost:5137/hello 可以访问到HelloWorld.vue 组件中的内容，如图

配置根路由

在components目录下新建Index.vue

Index.vue
1
2
3
4
5
6
<template>
  <div>
    <h1>This is index view.</h1>
  </div>
</template>

修改router/index.ts

router/index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";

import HelloWorld from "../components/HelloWorld.vue";
import Index from "../components/Index.vue";

const routes:RouteRecordRaw[] = [
    {
        path: '/',
        component: Index,
    },
    {
        path: '/hello',
        component: HelloWorld
    }
]

export const router = createRouter({
    history: createWebHistory(),
    routes,
})

不需要重新启动，浏览器访问localhost:5137 ，此时显示：

至此，一个使用了TypeScript，vue-router的vue项目已经搭建成功，后续在src新增vue组件，并在router/index.ts中配置相对于的路由，即可实现新增组件页面的访问

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~