使用 JSX 包从基本 CLI 安装中获取 Vue.js 以使用 TypeScript 呈现 JSX [英] Getting Vue.js to render JSX with TypeScript from base CLI install with JSX package

查看:51
本文介绍了使用 JSX 包从基本 CLI 安装中获取 Vue.js 以使用 TypeScript 呈现 JSX的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经使用vue-创建了一个基本项目-cli,在此期间我使用了手动选择功能";安装,我选择了以下内容(除了 linter):

I've created a basic project with the vue-cli, during which I used the "Manually select features" to install, where I picked the following (besides a linter):

  • 选定 Babel、TypeScript、Vuex 和 Linter/Formatter
  • 已选择 2.x
  • 没有类样式的组件
  • 将 Babel 与 TypeScript 一起使用(现代模式需要,自动检测的 polyfill,转译 JSX)?
  • Selected Babel, TypeScript, Vuex, and Linter / Formatter
  • Selected 2.x
  • No to class-style components
  • Yes to Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?

然后,我还安装了jsx support(我验证安装的 Babel 版本是 7,因为那是该 jsx 支持 repo 所必需的).

Then afterwards, I also installed the jsx support (and I verified the Babel version installed was 7, since that is required for that jsx support repo).

在我的 bable.config.js 文件中,我添加(没有替换 vue-cli 生成的内容)jsx repo 请求的预设:>

In my bable.config.js file I added (did not replace what was generated by the vue-cli) the preset requested by the jsx repo:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    '@vue/babel-preset-jsx', //<-- Added this
  ],
};

我已确认自动生成 tsconfig.json 具有所需的配置(至少据我所知):

I've confirmed that the auto-generated tsconfig.json has the needed configuration (at least as I understand it):

"compilerOptions": {
    ...
    "jsx": "preserve",
    ...
}

我已确认自动生成 shims-tsx.d.ts 文件具有所需的配置(至少据我所知):

I've confirmed that the auto-generated shims-tsx.d.ts file has the needed configuration (at least as I understand it):

import Vue, { VNode } from 'vue';

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

在生成的自动生成 ma​​in.ts 文件中,JSX 似乎已成功使用(即使它不是 .tsx 扩展,我相信 webpack,在幕后,正在改变事情的工作:

In the resulting auto-generated main.ts file, the JSX appears to be successfully used (even though it is not a .tsx extension, as I believe webpack, behind the scenes, is transforming things to work:

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

所以自动生成的 App.vue 文件有这个(我忽略了