Vite+Vue2+Composition-api+ +TypeScript搭配如何开发项目?

时间:2022-02-03 03:23:16

  Vite+Vue2+Composition-api+ +TypeScript搭配如何开发项目?

前言

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

安装所需依赖

又到了实战环节,下面可以一步步跟着我哦!我这里使用的是yarn 依赖管理工具。

初始化项目

这里使用快捷初始化命令:

  1. yarn init -y 

创建完package.json文件之后,我们可以手动修改下项目名称字段name:vitevue2p。

初始化Vite

安装Vite。

  1. yarn add vite -D 

初始化Vue2

我们需要安装Vue2,所以直接这样安装。

  1. yarn add vue 

目前,我安装的版本是^2.6.14。

另外,我们还需要安装vue-template-compiler这个依赖,此包可用于将Vue 2.0模板预编译为渲染函数,以避免运行时编译开销和CSP限制。在编写具有非常特定需求的构建工具时,才需要单独使用它。所以,我们这里单独安装。

  1. yarn add vue-template-compiler -D 

最后,如果想让Vite支持Vue2,就必须安装这个依赖vite-plugin-vue2。

  1. yarn add vite-plugin-vue2 -D 

支持Composition-api

Composition-api字面意思是组合API,它是为了实现基于函数的逻辑复用机制而产生的。这也是Vue3亮点之一,那么我们如何才能够在Vue2项目中使用呢?这需要安装@vue/composition-api依赖。

  1. yarn add @vue/composition-api 

支持<script setup>语法

<script setup>是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖,是Vue3.2新加入的语法。那么,我们也可以在Vue2项目中使用它。

你需要安装unplugin-vue2-script-setup依赖。

  1. yarn add unplugin-vue2-script-setup -D 

了解更多,可以查看https://github.com/antfu/unplugin-vue2-script-setup。

在Vue2项目中使用Volar

以下是官方的解释:

我们建议将 VS Code 与 Volar 结合使用以获得最佳体验(如果您拥有 Vetur,您可能希望禁用它)。使用 Volar 时,您需要安装 @vue/runtime-dom 作为 devDependencies 以使其在 Vue 2 上工作。

  1. yarn add @vue/runtime-dom -D 

支持TypeScript语法

随着应用的增长,静态类型系统可以帮助防止许多潜在的运行时错误,所以我们推荐使用TypeScript。

  1. yarn add typescript -D 

最后,我把安装的所有依赖列出来,可以参照有没有漏的。

  1. "dependencies": { 
  2.   "@vue/composition-api""^1.1.5"
  3.   "vue""^2.6.14"
  4. }, 
  5. "devDependencies": { 
  6.   "@vue/runtime-dom""^3.2.11"
  7.   "typescript""^4.4.3"
  8.   "unplugin-vue2-script-setup""^0.6.4"
  9.   "vite""^2.5.7"
  10.   "vite-plugin-vue2""^1.8.1"
  11.   "vue-template-compiler""^2.6.14"

搭建项目架构

首先,我先列出我自己搭建的项目文件目录,我是参照Vite默认模板而创建的文件目录。

  1. public
  2.   -- favicon.ico
  3. - src 
  4.   -- assets
  5.     --- logo.png
  6.   -- components
  7.     --- Async.vue
  8.     --- Bar.vue
  9.     --- Foo.vue
  10.     --- HelloWorld.vue
  11.   -- App.vue
  12.   -- main.ts
  13.   -- shims-vue.d.ts
  14. index.html 
  15. - package.json 
  16. - ref-macros.d.ts 
  17. - tsconfig.json 
  18. - vite.config.ts 

下面,我们按排列顺序分别看下文件中都放了什么东西?

public文件夹中放着一个ico图标文件,这个不再说明。src文件夹中文件有点多,我们放在最后讨论。

index.html

谈到index.html这个文件,我们需要引入Vite官网一段话:

你可能已经注意到,在一个 Vite 项目中,index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的:在开发期间 Vite 是一个服务器,而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ,这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外,index.html 中的 URL 将被自动转换,因此不再需要 %PUBLIC_URL% 占位符了。

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3.  
  4. <head> 
  5.   <meta charset="UTF-8"
  6.   <link rel="icon" href="/favicon.ico" /> 
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0"
  8.   <title>Vite App</title> 
  9. </head> 
  10.  
  11. <body> 
  12.   <div id="app"></div> 
  13.   <script type="module" src="/src/main.ts"></script> 
  14. </body> 
  15.  
  16. </html> 

package.json

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

  1.   "name""vitevue2p"
  2.   "version""0.1.1"
  3.   "description"""
  4.   "keywords": [], 
  5.   "license""MIT"
  6.   "main""dist/index.js"
  7.   "module""dist/index.mjs"
  8.   "scripts": { 
  9.     "dev""vite --open"
  10.     "serve""vite preview"
  11.     "build""vite build"
  12.   }, 
  13.   "dependencies": { 
  14.     "@vue/composition-api""^1.1.5"
  15.     "vue""^2.6.14"
  16.   }, 
  17.   "devDependencies": { 
  18.     "@vue/runtime-dom""3.2.11"
  19.     "typescript""^4.4.3"
  20.     "unplugin-vue2-script-setup""^0.6.4"
  21.     "vite""^2.5.7"
  22.     "vite-plugin-vue2""^1.8.1"
  23.     "vue-template-compiler""^2.6.14"
  24.   } 

ref-macros.d.ts

以d.ts后缀结尾的是TypeScript中的类型定义文件。我们知道自从引入 Composition API 以来,一个主要未解决的问题是 refs 与reactive的使用,到处使用 .value可能很麻烦,如果不使用类型系统,很容易错过。一些用户特别倾向于只使用reactive,这样他们就不必处理refs。

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

下面,可以看下一个简单的例子。

  1. // declaring a reactive variable backed by an underlying ref 
  2. let count = $ref(1) 
  3.  
  4. // no need for .value anymore! 
  5. console.log(count) // 1 
  6.  
  7. function inc() { 
  8.   // assignments are reactive 
  9.   count++ 

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

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

  1. import type { 
  2.   Ref, 
  3.   UnwrapRef, 
  4.   ComputedRef, 
  5.   WritableComputedOptions, 
  6.   WritableComputedRef, 
  7.   ShallowUnwrapRef, 
  8. from '@vue/composition-api'
  9.  
  10. declare const RefMarker: unique symbol 
  11.   type RefValue<T> = T & { [RefMarker]?: any } 
  12.  
  13. declare const ComputedRefMarker: unique symbol 
  14.   type ComputedRefValue<T> = T & { [ComputedRefMarker]?: any } 
  15.  
  16. declare const WritableComputedRefMarker: unique symbol 
  17.   type WritableComputedRefValue<T> = T & { [WritableComputedRefMarker]?: any } 
  18.  
  19.   type ToRawRefs<T extends object> = { 
  20.     [K in keyof T]: T[K] extends ComputedRefValue<infer V> 
  21.       ? ComputedRefValue<V> 
  22.       : T[K] extends WritableComputedRefValue<infer V> 
  23.         ? WritableComputedRef<V> 
  24.         : T[K] extends RefValue<infer V> 
  25.           ? Ref<V> 
  26.           : T[K] extends object 
  27.             ? T[K] extends 
  28.             | Function
  29.             | Map<anyany
  30.             | Set<any
  31.             | WeakMap<anyany
  32.             | WeakSet<any
  33.               ? T[K] 
  34.               : ToRawRefs<T[K]> 
  35.             : T[K]; 
  36.   } 
  37.  
  38. /** 
  39.    * Vue ref transform macro for binding refs as reactive variables. 
  40.    */ 
  41. declare function _$<T>(arg: ComputedRef<T>): ComputedRefValue<T> 
  42. declare function _$<T>( 
  43.   arg: WritableComputedRef<T> 
  44. ): WritableComputedRefValue<T> 
  45. declare function _$<T>(arg: Ref<T>): RefValue<T> 
  46. declare function _$<T extends object>(arg?: T): ShallowUnwrapRef<T> 
  47.  
  48. /** 
  49.    * Vue ref transform macro for accessing underlying refs of reactive varaibles. 
  50.    */ 
  51. declare function _$$<T>(value: T): ComputedRef<T> 
  52. declare function _$$<T>( 
  53.   value: WritableComputedRefValue<T> 
  54. ): WritableComputedRef<T> 
  55. declare function _$$<T>(value: RefValue<T>): Ref<T> 
  56. declare function _$$<T extends object>(arg: T): ToRawRefs<T> 
  57.  
  58. declare function _$ref<T>(arg?: T | Ref<T>): RefValue<UnwrapRef<T>> 
  59.  
  60. declare function _$shallowRef<T>(arg?: T): RefValue<T> 
  61.  
  62. declare function _$computed<T>( 
  63.   getter: () => T, 
  64.   // debuggerOptions?: DebuggerOptions 
  65. ): ComputedRefValue<T> 
  66. declare function _$computed<T>( 
  67.   options: WritableComputedOptions<T>, 
  68.   // debuggerOptions?: DebuggerOptions 
  69. ): WritableComputedRefValue<T> 
  70.  
  71. declare global { 
  72.   const $: typeof _$ 
  73.   const $$: typeof _$$ 
  74.   const $ref: typeof _$ref 
  75.   const $shallowRef: typeof _$shallowRef 
  76.   const $computed: typeof _$computed 

tsconfig.json

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

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

  1.   "compilerOptions": { 
  2.     "types": [ 
  3.       "unplugin-vue2-script-setup/types"
  4.     ] 
  5.   } 

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

  1.   "compilerOptions": { 
  2.     ... 
  3.   }, 
  4.   "vueCompilerOptions": { 
  5.     "experimentalCompatMode": 2 
  6.   }, 

最后,文件内容如下:

  1.   "compilerOptions": { 
  2.     "target""es2017"
  3.     "module""esnext"
  4.     "moduleResolution""node"
  5.     "esModuleInterop"true
  6.     "strict"true
  7.     "strictNullChecks"true
  8.     "resolveJsonModule"true
  9.     "types": [ 
  10.       "unplugin-vue2-script-setup/types"
  11.     ] 
  12.   }, 
  13.   "vueCompilerOptions": { 
  14.     "experimentalCompatMode": 2 
  15.   } 

vite.config.ts

这个文件是Vite的配置文件。当以命令行方式运行 vite 时,Vite 会自动解析项目根目录下名为 vite.config.js(或vite.config.ts) 的文件。

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

另外,如果想支持<script setup>语法,必须在这里以插件的形式配置。

  1. import { defineConfig } from 'vite'
  2. import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
  3. import ScriptSetup from 'unplugin-vue2-script-setup/vite'
  4.  
  5. export default defineConfig({ 
  6.   plugins: [ 
  7.     Vue2(), 
  8.     ScriptSetup({ 
  9.       refTransform: true
  10.     }), 
  11.   ], 
  12. }) 

介绍完这些文件,剩下的就是src文件夹中的文件了,因为文件过多,我们把它单独放在Src文件夹栏目中。

Src文件夹

assets文件中只有logo.png一个图片,你可以把静态文件放在当中,这里不多过介绍。

main.ts

这是Vue2的入口文件,我们可以看到这里VueCompositionAPI被当做插件引入。另外,我们引入的App.vue以及其他*.vue为后缀的文件,需要有专门的类型定义文件进行声明,在下面的shims-vue.d.ts文件中我们会讲到。

  1. import Vue from 'vue'
  2. import VueCompositionAPI from '@vue/composition-api'
  3. import App from './App.vue'
  4.  
  5. Vue.use(VueCompositionAPI) 
  6.  
  7. const app = new Vue({ render: h => h(App) }) 
  8. app.$mount('#app'

shims-vue.d.ts

  1. declare module '*.vue' { 
  2.   import Vue from 'vue'
  3.   export default Vue 

App.vue

这个文件是页面入口文件。我们来看下它是如何写的,这是Vue2项目,但是写法与Vue3项目无异,只不过在Vue2项目中需要'@vue/composition-api'使用Composition-api,而Vue3项目直接引入vue。

另外,这里看到我们直接使用<script setup>语法,替换了之前setup()方法,使代码更简洁。还有我们可以直接引入组件,直接在模板中使用。

更多关于<script setup>语法的内容可以看看https://v3.cn.vuejs.org/api/sfc-script-setup.html,了解更多使用方法。

  1. <template> 
  2.   <div id="app"
  3.     <img alt="Vue logo" src="./assets/logo.png"
  4.     <hello-world name="Vue 2 + TypeScript + Vite" @update="onUpdate" /> 
  5.     <async-component /> 
  6.   </div> 
  7. </template> 
  8.  
  9. <script setup lang="ts"
  10. import { defineAsyncComponent } from '@vue/composition-api'
  11.  
  12. import HelloWorld from './components/HelloWorld.vue'
  13.  
  14. const AsyncComponent = defineAsyncComponent(() => import('./components/Async.vue')) 
  15.  
  16. function onUpdate(e: any) { 
  17.   console.log(e) 
  18. </script> 
  19. <script lang="ts"
  20. export default { 
  21.   name'App'
  22. </script> 
  23. <style> 
  24. #app { 
  25.   font-family: Avenir, Helvetica, Arial, sans-serif; 
  26.   -webkit-font-smoothing: antialiased; 
  27.   -moz-osx-font-smoothing: grayscale; 
  28.   text-align: center; 
  29.   color: #2c3e50; 
  30.   margin-top: 60px; 
  31. </style> 

HelloWorld.vue

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

  1. <template> 
  2.   <div> 
  3.     <h1>{{ msg }}, {{ name }}</h1> 
  4.     <button @click="inc"
  5.       Inc 
  6.     </button> 
  7.     <div>{{ count }} x 2 = {{ doubled }}</div> 
  8.     <button @click="dec()" v-html="decText" /> 
  9.     <component :is="count > 2 ? Foo : Bar" /> 
  10.   </div> 
  11. </template> 
  12.  
  13. <script setup lang="ts"
  14. import { watch } from '@vue/composition-api'
  15. import Foo from './Foo.vue'
  16. import Bar from './Bar.vue'
  17.  
  18. const props = withDefaults(defineProps<{ msg: string; name: string | number }>(), { msg: 'Hello' }) 
  19. const emit = defineEmits(['update']) 
  20.  
  21. let count = $ref(1) 
  22. // eslint-disable-next-line prefer-const 
  23. let doubled = $computed(() => count * 2) 
  24.  
  25. function inc() { 
  26.   count += 1 
  27. function dec() { 
  28.   count -= 1 
  29.  
  30. const decText = '<b>Dec</b>'
  31.  
  32. watch(()=>count, value => emit('update', value)) 
  33. </script> 
  34. <style scoped> 
  35. button{ 
  36.   margin: 20px 0; 
  37. </style> 

其他文件就不过多介绍了,就只是简单的模板文件。

Foo.vue

  1. <template> 
  2.   <div>Foo</div> 
  3. </template> 

Bar.vue

  1. <template> 
  2.   <div>Bar</div> 
  3. </template> 

Async.vue

  1. <template> 
  2.   <div>Async Component</div> 
  3. </template> 

结语

最后,我们启动下项目。

  1. yarn dev 

Vite+Vue2+Composition-api+ +TypeScript搭配如何开发项目?

如上图所示,启动成功。

相信这样可以在一定程度上提升你 Vue 2 的开发体验,赶快来!

以下是本篇文章的源码地址:

  1. https://github.com/maomincoding/viteVue2p 

如果觉得这篇文章对你有帮助,感谢点赞哦~

原文链接:https://mp.weixin.qq.com/s/qFZo0hE7iGDsVqtxgrE79g