vue3+ts开发效率提升

        pnpm&＃xff1a; 比npm或yarn快10倍

        pnpm与其他包管理器&＃xff08;如npm和Yarn&＃xff09;的不同之处在于它使用一种称为“硬链接”的独特安装方法。当你使用PNPM安装一个包时&＃xff0c;它并不会将包的文件复制到每个项目的node_modules目录中&＃xff0c;而是在一个中心存储位置创建硬链接。这意味着多个项目可以共享同一个包文件&＃xff0c;从而节省磁盘空间并减少安装时间。

        pnpm还支持一种称为“虚拟包”的特性&＃xff0c;它允许你为包创建别名。虚拟包可用于同时安装多个版本的包&＃xff0c;或者在不改变其他包的依赖关系的情况下替换一个包。

pnpm旨在快速高效&＃xff0c;它的开发者声称在某些情况下可以比npm或yarn快10倍。它还支持广泛的包锁定文件格式&＃xff0c;包括npm、yarn使用的格式。

        vite&＃xff1a; 比vue-cli快

        Vite 不需要提前将所有的代码打包成一个或多个静态文件。相反&＃xff0c;Vite 会在浏览器请求资源时动态地编译和提供所需的模块&＃xff0c;并在内存中生成对应的静态文件。这种方式可以提高开发体验和构建速度。它还支持热更新和代码分割等功能&＃xff0c;使得开发者能够更快地进行开发、调试和部署。

        使用&＃xff1a;

&＃xff08;1&＃xff09;不用写setup函数&＃xff0c;以及默认导出export default{}

&＃xff08;2&＃xff09;组件只需要引入不需要注册

&＃xff08;3&＃xff09;属性和方法也不需要再返回&＃xff0c;可以直接在template模板中使用

   

                未使用setup语法糖&＃xff0c;App.vue文件





                使用setup语法糖&＃xff0c;App.vue文件




        可以自动导入component、vue等第三方插件库&＃xff0c;不用手动import&＃xff0c;需要如下配置&＃xff1a;

  // 安装自动导入插件

  pnpm add unplugin-auto-import unplugin-vue-components -D

        vite.config.ts配置

import { defineConfig } from &＃39;vite&＃39;
import vue from &＃39;&＃64;vitejs/plugin-vue&＃39;
import AutoImport from &＃39;unplugin-auto-import/vite&＃39;
import Components from &＃39;unplugin-vue-components/vite&＃39;// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({// 配置需要自动导入的库imports: [&＃39;vue&＃39;],// 生成到的地址dts: &＃39;types/auto-imports.d.ts&＃39;,// 配置本地需要自动导入的库dirs: [],}),Components({// 生成组件的地址dts: &＃39;types/components.d.ts&＃39;,}),],
})

        types/auto-imports.d.ts&＃xff1a;系统自动生成&＃xff0c;显示按需导入的第三方库

        types/components.d.ts&＃xff1a;系统自动生成&＃xff0c;显示导入了哪些组件 

        把import全去掉&＃xff0c;ref标红&＃xff0c;且不能提示已导入的B组件

        原因&＃xff1a;我们看到types/components.d.ts的目录中发现&＃xff0c;插件使用的是&＃64;vue/runtime-core来实现的类型&＃xff0c;以及ts配置不能识别types文件夹下的包

         解决上述问题&＃xff1a;

pnpm add &＃64;vue/runtime-core -D

        打开tsconfig.json &＃xff0c;添加如下代码

        配置&＃xff1a;

pnpm add &＃64;types/node -D

        vite.config.ts配置如下

import { fileURLToPath } from &＃39;url&＃39;
import { defineConfig } from &＃39;vite&＃39;const baseSrc &＃61; fileURLToPath(new URL(&＃39;./src&＃39;, import.meta.url))// https://vitejs.dev/config/
export default defineConfig({resolve: {alias: {&＃39;~&＃39;: baseSrc,&＃39;~&＃64;&＃39;: baseSrc,},}
})


        tsconfig.json&＃xff1a;配置 baseUrl 和 paths

{"compilerOptions": {"target": "ESNext","useDefineForClassFields": true,"module": "ESNext","moduleResolution": "Node","strict": true,"jsx": "preserve","resolveJsonModule": true,"isolatedModules": true,"esModuleInterop": true,"lib": ["ESNext","DOM"],"skipLibCheck": true,"noEmit": true,// 路径配置"baseUrl": ".","paths": {"~/*": ["src/*"],"~&＃64;/*": ["src/*"]}&＃xff0c;},"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","types/env.d.ts","types/**/*.d.ts",],"references": [{"path": "./tsconfig.node.json"}]
}

        配置之后 

        默认情况下&＃xff0c;vite会使用dotenv来读取一下的文件&＃xff0c;作为我们的环境变量。默认情况下&＃xff0c;为了防止意外地将一些环境变量泄露到客户端&＃xff0c;只有以VITE_为前缀的变量才会暴露给vite处理的代码

.env # 所有情况下都会加载
.env.local # 所有情况下都会加载&＃xff0c;但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载&＃xff0c;但会被 git 忽略

未配置前不会有代码提示   

        将src/vite-env.d.ts移动到types文件夹中&＃xff0c;改名为env.d.ts ,并在env.d.ts 添加如下代码&＃xff1a;

///
declare module &＃39;*.vue&＃39; {import type { DefineComponent } from &＃39;vue&＃39;const component: DefineComponent<{}, {}, any>export default component
}interface ImportMetaEnv {readonly VITE_BASE: string
}interface ImportMeta {readonly env: ImportMetaEnv
}

~~~持续更新~~~