Vite+Vue2+Compositionapi+scriptsetup+TypeScript搭配如何开发项目？

前言

Vite相信大家都用过&＃xff0c;它是一种新型前端开发与构建工具&＃xff0c;能够显著提升前端开发体验。我们在搭建Vite项目&＃xff0c;选择Vue模板之后&＃xff0c;默认会下载Vue3模板。如果你的公司现在还没有准备使用Vue3&＃xff0c;而在使用Vue2&＃xff0c;那么这篇文章值得你继续看下去。下面&＃xff0c;我将带大家如何搭建一个 Vite&＃43;Vue2&＃43;Composition-api&＃43;


package.json

这个文件定义了这个项目所需要的各种模块&＃xff0c;以及项目的配置信息&＃xff08;比如名称、版本、许可证等元数据&＃xff09;。这里&＃xff0c;需要注意的是我们自定义了"scripts"字段&＃xff0c;有三个命令&＃xff1a;"vite --open"、"vite preview"、"vite build"。

{"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": {"&＃64;vue/composition-api": "^1.1.5","vue": "^2.6.14"},"devDependencies": {"&＃64;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 以来&＃xff0c;一个主要未解决的问题是 refs 与reactive的使用&＃xff0c;到处使用 .value可能很麻烦&＃xff0c;如果不使用类型系统&＃xff0c;很容易错过。一些用户特别倾向于只使用reactive&＃xff0c;这样他们就不必处理refs。

为了优化&＃xff0c;官方提出了一个RFC&＃xff0c;大家可以打开下面这个网址 https://github.com/vuejs/rfcs/discussions/369 了解一下。

下面&＃xff0c;可以看下一个简单的例子。

// declaring a reactive variable backed by an underlying ref
let count &＃61; $ref(1)// no need for .value anymore!
console.log(count) // 1function inc() {// assignments are reactivecount&＃43;&＃43;
}

另外&＃xff0c;这是一项实验性功能。实验性功能可能会改变补丁版本之间的行为。建议将您的 vue 依赖项固定到确切的版本以避免损坏。

言归正传&＃xff0c;我们来看下ref-macros.d.ts文件中的内容。

import type {Ref,UnwrapRef,ComputedRef,WritableComputedOptions,WritableComputedRef,ShallowUnwrapRef,
} from &＃39;&＃64;vue/composition-api&＃39;declare const RefMarker: unique symboltype RefValue &＃61; T & { [RefMarker]?: any }declare const ComputedRefMarker: unique symboltype ComputedRefValue &＃61; T & { [ComputedRefMarker]?: any }declare const WritableComputedRefMarker: unique symboltype WritableComputedRefValue &＃61; T & { [WritableComputedRefMarker]?: any }type ToRawRefs &＃61; {[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): ToRawRefsdeclare function _$ref(arg?: T | Ref): RefValue>declare function _$shallowRef(arg?: T): RefValuedeclare function _$computed(getter: () &＃61;> T,// debuggerOptions?: DebuggerOptions
): ComputedRefValue
declare function _$computed(options: WritableComputedOptions,// debuggerOptions?: DebuggerOptions
): WritableComputedRefValuedeclare global {const $: typeof _$const $$: typeof _$$const $ref: typeof _$refconst $shallowRef: typeof _$shallowRefconst $computed: typeof _$computed
}

tsconfig.json

tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。

我们这里需要注意如果您的 IDE 缺少全局类型。

{"compilerOptions": {"types": ["unplugin-vue2-script-setup/types"]}
}

Volar 优先支持 Vue 3。Vue 3 和 Vue 2 模板有些不同。您需要设置 ExperimentCompatMode 选项以支持 Vue 2 模板。

{"compilerOptions": {...},"vueCompilerOptions": {"experimentalCompatMode": 2},
}

最后&＃xff0c;文件内容如下&＃xff1a;

{"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 时&＃xff0c;Vite 会自动解析项目根目录下名为 vite.config.js(或vite.config.ts) 的文件。

这里需要注意 refTransform 现在是插件根级选项&＃xff0c;需要手动定义为true。&＃xff08;为什么配置refTransform&＃xff0c;可以看上面ref-macros.d.ts文件中对refs处理&＃xff0c;不使用.value的介绍&＃xff09;。

另外&＃xff0c;如果想支持



HelloWorld.vue

然后&＃xff0c;我们再看下这个文件中什么内容。这里需要注意的是$ref()、$computed()方法&＃xff0c;这就是之前提到的refTransform语法&＃xff0c;不得不说&＃xff0c;这比以前使用.value处理方便多了。

其他文件就不过多介绍了&＃xff0c;就只是简单的模板文件。

Foo.vue

Bar.vue

Async.vue

结语

最后&＃xff0c;我们启动下项目。

yarn dev

如上图所示&＃xff0c;启动成功。

相信这样可以在一定程度上提升你 Vue 2 的开发体验&＃xff0c;赶快来&＃xff01;

以下是本篇文章的源码地址&＃xff1a;

https://github.com/maomincoding/viteVue2p