feat: 支持 TypeScript 和 Composition API #161
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Deploy preview for femessage-create-nuxt-app ready! Built with commit b27fee8 https://deploy-preview-161--femessage-create-nuxt-app.netlify.app |
gd4Ark
commented
Nov 18, 2020
gd4Ark
commented
Nov 18, 2020
gd4Ark
commented
Nov 18, 2020
snowlocked
approved these changes
Nov 18, 2020
shoyuf
approved these changes
Nov 19, 2020
levy9527
approved these changes
Nov 20, 2020
docs/typescript-faq.md
Outdated
| @@ -0,0 +1,240 @@ | |||
| ## TypeScript FAQ | |||
|
|
|||
| <span style="color: red; font-weight: bold;">注意</span>：本文内容不一定能及时更新，建议到 [《如何在 Nuxt 项目中引入 TypeScript》](https://deepexi.yuque.com/docs/share/ec81b0e7-b1b4-426c-a66c-8c293e7185c2) 查看最新内容。 | |||
|
🎉 This PR is included in version 2.3.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Why
随着技术栈更新，有必要为项目模板加入 TypeScript 和 Composition API 支持。
How
支持 TypeScript
增加询问 “Programming language”:
理由：官方
create-nuxt-app采用该方式，默认值为JavaScript。如果选择使用 TypeScript，则自动做以下事情：
tsconfig.json文件vue-shim.d.ts类型文件login.vue文件（写两份 login.vue）参考：如何在 Nuxt 项目中引入 TypeScript
Composition API
长远来看，@nuxtjs/composition-api 是比 @vue/composition-api 更好的选择，理由：
但由于目前 Nuxt 版本为 v2.11.0，在这个版本无法正常使用 @nuxtjs/composition-api，具体可以看这个 issue，但将 Nuxt 升级到目前的最新版本（v2.14.7），已解决该问题。
相关文档：https://composition-api.nuxtjs.org
默认添加 @nuxtjs/composition-api 依赖，也即不作任何询问，同时将 login 页面使用 composition-api 重构。
除此之外，增加
babel-preset-vca-jsx依赖，解决 JSX 的问题。参考：如何在 Nuxt 项目中引入 Composition API
Other
i. 经测试 fix 后的这部分文件，即便在不用 typescript（也就是没有 @nuxtjs/eslint-config-typescript），eslint 也依旧正常
.babelrc需要在 template 时改名为_.babelrc，否则 test:snapshot 时会报找不到 babel/preset-env 模块（该问题是本次引入的，之前没有这个问题Preview
Test
Docs
README.md，将这里的 Vue Composition API 经验分享 和 TypeScript FAQ 链接补充上去。