初始化项目

课程使用 vue-cli -->vite

我们直接使用vite

vite创建项目

pnpm create vite demo-name --template vue-ts

“npm create vite” 是怎么实现初始化 Vite 项目

比起vue参数创建项目，vue-ts 会把js文件转为ts

并在根目录生成 tsconfig.node.json 和 tsconfig.json 同时自动安装 vue-tsc 单文件组件依赖

安装依赖并删除初始代码

pnpm i

编写空路由配置

安装路由

pnpm i vue-router

新建 router/index.ts

• import 创建路由函数 import { createRouter,createWebHashHistory } from 'vue-router'

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: []
})

export default router

修改路由为变量

const routes = []

这样使用变量，ts会提示是any类型 const routes:[] = [] 可以解决，但是我们可以使用vue-router的类型推导，定义住routes数组项的类型

import { type RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = []

全局vue实例挂载router 👇 main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

安装element-plus并全局vue实例挂载

pnpm i -D element-plus

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

createApp(App).use(router).use(ElementPlus).mount('#app')