Vue3 + Vite + TS 项目创建

全局安装create-vite-app

yarn global add create-vite-app或者 npm i -g create-vite-app

使用cva创建项目

//创建目录名为project1的项目
cva project1

创建项目后根据提示运行三行代码

cd project1
npm install (or `yarn`)
npm run dev (or `yarn dev`)

小知识

vite文档给出的命令是

npm init vite-app <project-name>
yarn create vite-app <project-name>

等价于 全局安装create-vite-app，然后创建项目
等价于

npx create vite-app <project-name>

安装并初始化vue-router

yarn add vue-router //安装

初始化vue-router：

// main.ts
import 模块名 from './components/模块名.vue'

const history = createWebHashHistory() // 新建history对象
const router = createRouter({ //新建router对象
	history: history,
	routes: [{ path: '/', component: 模块名 }],
})

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

在App.vue中添加RouterView和RouterLink

// App.vue
<template>
  <RouterLink to="/">New</RouterLink>
  <RouterLink to="xxx">New2</RouterLink>
  <RouterView/>
</template>

ts报错找不到.vue文件

在main.ts中导入模块后ts报错提示找不到模块名.vue，因为TypeScript只能理解.ts文件，无法理解.vue文件
解决方法为在src目录中创建shims-vue.d.ts文件

// shims-vue.d.ts
declare module '*.vue' {
	import { ComponentOptions } from 'vue'
	const componentOptions: ComponentOptions
	export default componentOptions
}

如果出现关闭.d.ts文件后又找不到.vue文件，尝试在项目根目录中创建tsconfig.json

// tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
	"module": "commonjs",
	"noImplicitAny": false,
	"removeComments": false,
	"preserveConstEnums": true,
	"sourceMap": true,
	"outDir": "dist",
	"moduleResolution": "node"
    },
    "exclude": ["dist", "node_modules"]
}

Error: Cannot find module 'sass'

手动安装sacc yarn add -D sass