2024年Vite2+TypeScript4+Vue3如何入手开发新项目_vue3 typescript4，浅谈C C++消息机制原理

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

{
“compilerOptions”: {
“target”: “esnext”,
“module”: “esnext”,
“strict”: true,
“jsx”: “preserve”,
“importHelpers”: true,
“moduleResolution”: “node”,
“experimentalDecorators”: true,
“skipLibCheck”: true,
“esModuleInterop”: true,
“allowSyntheticDefaultImports”: true,
“sourceMap”: true,
“baseUrl”: “.”,
“types”: [“vite/client”],
“paths”: {
“@/": [
"src/”
]
},
“lib”: [
“esnext”,
“dom”,
“dom.iterable”,
“scripthost”
]
},
“include”: [
“src//*.ts",
"src//.tsx",
"src/**/.vue”,
“tests//*.ts",
"tests//*.tsx”
],
“exclude”: [
“node_modules”
]
}

2. 配置vite配置文件


为什么需要配置这个文件呢？是因为我们开发这个demo项目，需要局部引入Element Plus UI框架，另外，让我们简单了解下怎么配置Vite。在之前我们使用VueCLI3.x创建项目时配置项目是在根目录下`vue.config.js`文件下进行配置。这个文件应该导出一个包含了选项的对象。

module.exports = {
// 选项…
}

而`vite.config.ts`也与其相似。

export default {
// 配置选项
}

因为 Vite 本身附带 Typescript 类型，所以可以通过 IDE 和 jsdoc 的配合来进行智能提示，另外你可以使用`defineConfig` 帮手函数，这样不用 jsdoc 注解也可以获取类型提示。这里呢，我们这样配置`vite.config.ts`。

import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})

你会发现，Vue在这里被当做vite的一个内置插件引入进来。刚才，我们说要局部引入Element Plus UI框架，我们打开Element Plus UI局部引入网址：(https://element-plus.gitee.io/#/zh-CN/component/quickstart)，发现这里需要配置`babel.config.js`，而我们使用的是TS，所以使用另一个插件[vite-plugin-imp](https://bbs.csdn.net/topics/618668825)（ 一个自动导入组件库样式的vite插件），在`vite.config.ts`文件中这样配置：

import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import vitePluginImp from “vite-plugin-imp”;

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
vitePluginImp({
libList: [
{
libName: ‘element-plus’,
style: (name) => {
return element-plus/lib/theme-chalk/${name}.css
}
}
]
})],
})

#### 主要项目文件夹Src一览


以下是最初始的项目文件目录。

assets —静态文件夹
components —组件文件夹
App.vue —页面文件
main.ts —项目入口文件
shims-vue.d.ts —类型定义文件（描述文件）

这么多文件，我们不一一展示了，主要看下`App.vue`、`main.ts`、`shims-vue.d.ts`。


App.vue

main.ts

import { createApp } from ‘vue’
import App from ‘./App.vue’

const app = createApp(App)
app.mount(‘#app’)

shims-vue.d.ts

declare module ‘*.vue’ {
import { DefineComponent } from ‘vue’
const component: DefineComponent<{}, {}, any>
export default component
}

这里，我们看到`defineComponent`这个Vue3的一个方法。为什么这里会使用它呢？引用官方的一句话：



> 
> 从实现上看，defineComponent 只返回传递给它的对象。但是，就类型而言，返回的值有一个合成类型的构造函数，用于手动渲染函数、TSX 和 IDE 工具支持。
> 
> 
> 


#### 引入vue-router4


看完之前的基础配置，我们现在准备开始引入Vue3的生态系统。


现在我们安装 vue-router 版本的时候，默认还是安装的 3.x 版本的，由于 vue3 的更新发生很大的变化，所以为了兼容处理，vue-router 也将发布最新版 4.x 版本了。


这是router4的官方网址：[Vue Router](https://bbs.csdn.net/topics/618668825)


1. 安装

yarn add vue-router@4

2. 配置文件


安装完依赖后，在项目文件夹src下创建一个router文件夹，里面创建一个`index.ts`文件（因为这里我们基于TS的项目）。

import { createRouter, createWebHashHistory, RouteRecordRaw } from “vue-router”;
import Index from “…/views/index.vue”;

const routes: Array = [
{
path: “/”,
name: “Index”,
component: Index
},
{
path: “/help”,
name: “Help”,
component: () =>
import(“…/views/help.vue”)
}
];

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

export default router;

另外，你需要在`main.ts`文件中引入它，并且注册一下。

import { createApp } from “vue”;
import App from “./App.vue”;
import router from “./router”;

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

为了实验一下效果，我们在src文件夹下创建一个views文件夹，里面创建两个页面文件。分别是`index.vue`和`help.vue`。


`index.vue`

index

index1

`about.vue`

Help

Help1

最后，你在App.vue文件中。

index | help

 这样，vue-router4就这么成功引入了。


#### 引入css预处理语言


这里呢，我们引入scss。因为我们使用的vite这个构建工具构建的项目，所以我们只需要这样。

yarn add sass -D

我们可以看到官方解释：



> 
> Vite 同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为他们安装特定的 vite 插件，但相应的预处理器依赖本身必须安装。
> 
> 
> 


所以，你可以这样使用scss。

index

index1

#### 使用Element Plus UI


我们在上面已经成功配置局部引入Element Plus框架，那我们可以这样使用它。

index

index1

默认按钮