Vue3+Ts+Vite2+Pinia 搭建开发框架

一、使用vite快速创建脚手架

1. 使用yarn运行安装命令：yarn create vite

2. 选择vue vue-ts 完成安装

3. 进入vue3_ts_vite_pinia项目，使用yarn命令安装依赖,依赖安装完成后，使用yarn dev启动项目

二、路由配置（vue-router@4）

1. 使用yarn安装vue-router@4： yarn add vue-router@4

2. src文件夹下新建router文件夹,router文件夹下新建index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [ //注:RouteRecordRaw为内置类型
{
path: '/',
name: 'Index',
component: () => import('@/pages/index/Index.vue'),
}
]
const router = createRouter({
history: createWebHistory(),
routes,
})

export default router

1. 在main.ts中，引入router并注册

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