vite构建vue3+TS项目及可能会遇见的问题

vite构建vue3项目

1、在要创建的文件夹位置单击右键打开PowerShell命令行工具

2、在PowerShell里面输入 npm init vite@latest

@latest是用最新的vite去构建
3、输入项目名字和包名 然后选择下面的vue

4、选择下面的TypeScript

5、一个vue3 + ts就创建好了

运行项目

打开刚构建好的项目文件夹，在项目文件夹中打开PowerShell，或者用vs code打开终端，输入npm install 下载项目所依赖的包，下载好之后输入npm run dev即可

可能会遇见的问题

1、输入启动命令后报错

(node:19596) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??='
    at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:19596) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:19596) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

这个时候去检查一下自己的node 版本 ??= 是node16版本以上才支持的，输入node -v看看自己是不是低于这个版本

2、打开项目发现TS类型报错，例如：

Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

Property 'count' does not exist on type '{}'.

这个时候去找到tsconfig.json里面的moduleResolution这个选项，把bundler改成node,就已经好了


3、下载依赖的时候npm i 卡在 ：#################] / reify:@esbuild/android-arm: timing reifyNode:node_modules/@esbuild/android-arm64 Completed in 45ms：
这个问题是淘宝的镜像源有一些问题，npm的默认镜像源又是淘宝导致的，这里可以换成cnpm，下载cnpm命令

npm install cnpm -g