小知识，大挑战！本文正在参与“[程序员必备小知识](https://juejin.cn/post/7008476801634680869 "https://juejin.cn/post/7008476801634680869")”创作活动。 *** 好久没写文章了，今天终于有时间可以安安静静写文章了。 ## 前言 Vite相信大家都用过，它是一种新型前端开发与构建工具，能够显著提升前端开发体验。我们在搭建Vite项目，选择Vue模板之后，默认会下载Vue3模板。如果你的公司现在还没有准备使用Vue3，而在使用Vue2，那么这篇文章值得你继续看下去。下面，我将带大家如何搭建一个 **Vite+Vue2+Composition-api+` ``` **package.json** 这个文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。这里，需要注意的是我们自定义了` "scripts"`字段，有三个命令：`"vite --open"`、`"vite preview"`、`"vite build"`。 ```json { "name": "vitevue2p", "version": "0.1.1", "description": "", "keywords": [], "license": "MIT", "main": "dist/index.js", "module": "dist/index.mjs", "scripts": { "dev": "vite --open", "serve": "vite preview", "build": "vite build" }, "dependencies": { "@vue/composition-api": "^1.1.5", "vue": "^2.6.14" }, "devDependencies": { "@vue/runtime-dom": "3.2.11", "typescript": "^4.4.3", "unplugin-vue2-script-setup": "^0.6.4", "vite": "^2.5.7", "vite-plugin-vue2": "^1.8.1", "vue-template-compiler": "^2.6.14" } } ``` **ref-macros.d.ts** 以`d.ts`后缀结尾的是TypeScript中的类型定义文件。我们知道自从引入 Composition API 以来，一个主要未解决的问题是 `refs` 与`reactive`的使用，到处使用 `.value `可能很麻烦，如果不使用类型系统，很容易错过。一些用户特别倾向于只使用`reactive`，这样他们就不必处理` refs`。为了优化，官方提出了一个**RFC**，大家可以打开下面这个网址 `https://github.com/vuejs/rfcs/discussions/369` 了解一下。下面，可以看下一个简单的例子。 ```js // declaring a reactive variable backed by an underlying ref let count = $ref(1) // no need for .value anymore! console.log(count) // 1 function inc() { // assignments are reactive count++ } ``` 另外，这是一项实验性功能。实验性功能可能会改变补丁版本之间的行为。建议将您的 vue 依赖项固定到确切的版本以避免损坏。言归正传，我们来看下`ref-macros.d.ts`文件中的内容。 ```ts import type { Ref, UnwrapRef, ComputedRef, WritableComputedOptions, WritableComputedRef, ShallowUnwrapRef, } from '@vue/composition-api' declare const RefMarker: unique symbol type RefValue = T & { [RefMarker]?: any } declare const ComputedRefMarker: unique symbol type ComputedRefValue = T & { [ComputedRefMarker]?: any } declare const WritableComputedRefMarker: unique symbol type WritableComputedRefValue = T & { [WritableComputedRefMarker]?: any } type ToRawRefs = { [K in keyof T]: T[K] extends ComputedRefValue ? ComputedRefValue : T[K] extends WritableComputedRefValue ? WritableComputedRef : T[K] extends RefValue ? Ref : T[K] extends object ? T[K] extends | Function | Map | Set | WeakMap | WeakSet ? T[K] : ToRawRefs : T[K]; } /** * Vue ref transform macro for binding refs as reactive variables. */ declare function _$(arg: ComputedRef): ComputedRefValue declare function _$( arg: WritableComputedRef ): WritableComputedRefValue declare function _$(arg: Ref): RefValue declare function _$(arg?: T): ShallowUnwrapRef /** * Vue ref transform macro for accessing underlying refs of reactive varaibles. */ declare function _$$(value: T): ComputedRef declare function _$$( value: WritableComputedRefValue ): WritableComputedRef declare function _$$(value: RefValue): Ref declare function _$$(arg: T): ToRawRefs declare function _$ref(arg?: T | Ref): RefValue> declare function _$shallowRef(arg?: T): RefValue declare function _$computed( getter: () => T, // debuggerOptions?: DebuggerOptions ): ComputedRefValue declare function _$computed( options: WritableComputedOptions, // debuggerOptions?: DebuggerOptions ): WritableComputedRefValue declare global { const $: typeof _$ const $$: typeof _$$ const $ref: typeof _$ref const $shallowRef: typeof _$shallowRef const $computed: typeof _$computed } ``` **tsconfig.json** `tsconfig.json`文件中指定了用来编译这个项目的根文件和编译选项。我们这里需要注意如果您的 IDE 缺少全局类型。 ```json { "compilerOptions": { "types": [ "unplugin-vue2-script-setup/types" ] } } ``` Volar 优先支持 Vue 3。Vue 3 和 Vue 2 模板有些不同。您需要设置 ExperimentCompatMode 选项以支持 Vue 2 模板。 ```json { "compilerOptions": { ... }, "vueCompilerOptions": { "experimentalCompatMode": 2 }, } ``` 最后，文件内容如下： ```json { "compilerOptions": { "target": "es2017", "module": "esnext", "moduleResolution": "node", "esModuleInterop": true, "strict": true, "strictNullChecks": true, "resolveJsonModule": true, "types": [ "unplugin-vue2-script-setup/types" ] }, "vueCompilerOptions": { "experimentalCompatMode": 2 } } ``` **vite.config.ts** 这个文件是Vite的配置文件。当以命令行方式运行 `vite` 时，Vite 会自动解析项目根目录下名为 `vite.config.js`(或`vite.config.ts`) 的文件。这里需要注意 `refTransform` 现在是插件根级选项，需要手动定义为`true`。（为什么配置`refTransform`，可以看上面`ref-macros.d.ts`文件中对refs处理，不使用`.value`的介绍）。另外，如果想支持` ``` **HelloWorld.vue** 然后，我们再看下这个文件中什么内容。这里需要注意的是`$ref()`、` $computed()`方法，这就是之前提到的`refTransform`语法，不得不说，这比以前使用`.value`处理方便多了。 ```html ``` 其他文件就不过多介绍了，就只是简单的模板文件。 **Foo.vue** ```html ``` **Bar.vue** ```html ``` **Async.vue** ```html ``` ## 结语最后，我们启动下项目。 ```bash yarn dev ``` ![截屏2021-09-25 21.44.19.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8748bc0544314d959f4212d21231f6db~tplv-k3u1fbpfcp-watermark.image?) 如上图所示，启动成功。相信这样可以在一定程度上提升你 Vue 2 的开发体验，赶快来！以下是本篇文章的源码地址： ``` https://github.com/maomincoding/viteVue2p ``` 如果觉得这篇文章对你有帮助，感谢点赞哦~ 另外，我有一个公众号：**前端历劫之路**，如果有缘，可以关注一下哦~

{{ msg }}, {{ name }}