vite 快速搭建Vue3 + TypeScript 项目

初始化项目

创建项目

yarn create @vitejs/app <project-name>

# 或者
npm init @vitejs/app <project-name>

博主以yarn来示例：

1	yarn create @vitejs/app vue3_demo

此时按下回车，可以看到以下页面，博主选择的是 vue（上下键可以切换选择的模板）

然后可以选择使用Typescript，博主这里选择Typescript

之后

1
2
3

cd vue3_demo
npm install
npm run dev

就可以看到项目模板运行之后的样子，本地访问 http://localhost:3000/

安装 `vue-router`

1	yarn add vue-router@next

在src目录下新建router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
  {
    path: '',
    redirect: (_) => {
      return { path: '/home' }
    },
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/Home.vue'),
  },

]
const router = createRouter({
  history: createWebHistory(''),
  routes,
  scrollBehavior() {
    return {
      el: '#app',
      top: 0,
      behavior: 'smooth',
    }
  },
})
export default router

在src目录下新建views/Home.ts

<template>
  <div>
    hello vue3 + ts
  </div>
</template>

在main.ts中引入router并挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

再次启动项目可以看到我们已经可以通过路由访问了：http://localhost:3000/home

初始化项目

安装 vue-router

安装 `vue-router`