我是Vue.js的新手,想知道生成Vue项目后,typescript配置文件的作用是什么。我执行npm create vue@latest
命令,选择**“添加Typescript?"和“为单页应用程序开发添加Vue Router?"**选项。它生成了以下文件夹结构。
frontend
┣ .vscode
┃ ┗ extensions.json
┣ public
┃ ┗ favicon.ico
┣ src
┃ ┣ assets
┃ ┃ ┣ base.css
┃ ┃ ┣ logo.svg
┃ ┃ ┗ main.css
┃ ┣ components
┃ ┃ ┣ icons
┃ ┃ ┃ ┣ IconCommunity.vue
┃ ┃ ┃ ┣ IconDocumentation.vue
┃ ┃ ┃ ┣ IconEcosystem.vue
┃ ┃ ┃ ┣ IconSupport.vue
┃ ┃ ┃ ┗ IconTooling.vue
┃ ┃ ┣ HelloWorld.vue
┃ ┃ ┣ TheWelcome.vue
┃ ┃ ┗ WelcomeItem.vue
┃ ┣ router
┃ ┃ ┗ index.ts
┃ ┣ views
┃ ┃ ┣ AboutView.vue
┃ ┃ ┗ HomeView.vue
┃ ┣ App.vue
┃ ┗ main.ts
┣ .gitignore
┣ env.d.ts // What is the goal of this file?
┣ index.html
┣ package.json
┣ README.md
┣ tsconfig.app.json // What is the goal of this file?
┣ tsconfig.json // What is the goal of this file?
┣ tsconfig.node.json // What is the goal of this file?
┗ vite.config.ts // What is the goal of this file?
字符串
我对src
文件夹很满意。但是,根文件夹感觉很拥挤。我确实更喜欢typescript的强类型特性,但是这些配置文件对初学者来说会产生很多问题。
这些打印脚本配置的目的是什么?我可以删除它们以减少文件数量,从而减少维护工作量吗?
1条答案
按热度按时间avwztpqn1#
您询问的文件对应用构建至关重要,因此不能删除,但可以简化一点。它们与本地构建服务器(Vite)和Typescript编译器相关。
env.d.ts //这个文件的目标是什么?
这个文件导入了
vite/client
命名空间,所以它的TS类型可以全局使用。https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-path-它是通过
tsconfig.app.json
中的"include": ["env.d.ts", ...
包含的,所以它只是一个文件,没有什么魔力。(起初我以为它是一个“env”文件,但它只是另一个TS脚本)老实说,我不确定这些命名空间会在哪里使用--可能是在测试期间,或者是在构建系统本身。你的应用不应该需要这个命名空间,因为它只是关于本地托管。这个博客提到了它们的用法:https://www.jsgarden.co/blog/create-a-vue-3-component-with-typescript
tsv. json//这个文件的目标是什么?
tsconfig.json
是Typescript编译器的主要配置文件,详情请访问https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#handbook-content你会看到里面有
"references"
到其他类型脚本项目文件tsconfig.app.json
和tsconfig.node.json
和vitest
。看起来Vite“创建项目”脚本的作者认为把tsconfig
分成不同的位是个好主意-显然是和the Nx toolset一致。tsll. app. json//这个文件的目标是什么?
“app”项目用于浏览器中的Vue Web应用程序。
tslog. node. json//这个文件的目标是什么?
我猜这将是Vue的服务器端编译。
ts //这个文件的目标是什么?
这是Vite的配置,如下所示:https://vitejs.dev/config/
Vite是Vue CLI的替代品,它在您的开发环境中运行Vue。它有一个本地Web服务器,可以热加载,并通过Typescript,Babel,Nightwatch和/或您在安装过程中选择的任何其他方式为您执行所有编译。理论上,您(作为开发人员)只需要启动Vite,它将处理其他一切(构建明智)。
如果你对应用框架进行了重大更改,你只需要配置Vite。例如,我只在安装前端框架(Vuetify)时才更改了我的框架,因为所有其他的东西,如JSX和Nightwatch都是由“create Vue”脚本配置的。