{"id":120,"date":"2025-07-02T20:25:44","date_gmt":"2025-07-02T12:25:44","guid":{"rendered":"https:\/\/www.rbfwq.com\/blog\/?p=120"},"modified":"2025-07-02T20:25:44","modified_gmt":"2025-07-02T12:25:44","slug":"vue-%e4%b8%ad-tsx-%e7%bb%84%e4%bb%b6%e7%9a%84%e5%88%b7%e6%96%b0%e6%96%b9%e6%b3%95%e6%98%af%e4%bb%80%e4%b9%88","status":"publish","type":"post","link":"https:\/\/www.idc61.com\/blog\/120.html","title":{"rendered":"Vue \u4e2d TSX \u7ec4\u4ef6\u7684\u5237\u65b0\u65b9\u6cd5\u662f\u4ec0\u4e48"},"content":{"rendered":"

Vue \u4f7f\u7528 TSX \u7ec4\u4ef6\u5237\u65b0<\/h2>\n<\/p>\n

\"Vue<\/p>\n

\u5728 Vue \u9879\u76ee\u4e2d\uff0c\u4f7f\u7528 TSX \u7f16\u5199\u7ec4\u4ef6\u662f\u4e00\u4e2a\u8d8a\u6765\u8d8a\u6d41\u884c\u7684\u9009\u62e9\uff0c\u5b83\u7ed3\u5408\u4e86 TypeScript \u7684\u7c7b\u578b\u68c0\u67e5\u548c JSX \u7684\u7075\u6d3b\u6027\u3002\u672c\u6587\u5c06\u6df1\u5165\u63a2\u8ba8\u5982\u4f55\u5728 Vue \u4e2d\u4f7f\u7528 TSX \u6765\u5b9e\u73b0\u7ec4\u4ef6\u7684\u5237\u65b0\u529f\u80fd\u3002\u6211\u4eec\u5c06\u63d0\u4f9b\u8be6\u7ec6\u7684\u64cd\u4f5c\u6b65\u9aa4\u3001\u793a\u4f8b\u547d\u4ee4\u53ca\u4ee3\u7801\uff0c\u786e\u4fdd\u4f60\u53ef\u4ee5\u8f7b\u677e\u5b9e\u73b0\u8fd9\u4e00\u529f\u80fd\u3002<\/p>\n<\/p>\n

\u4e00\u3001\u73af\u5883\u51c6\u5907<\/h3>\n<\/p>\n

\u9996\u5148\uff0c\u786e\u4fdd\u4f60\u7684\u5f00\u53d1\u73af\u5883\u4e2d\u5df2\u5b89\u88c5 Node.js \u548c Vue CLI\u3002\u5982\u679c\u672a\u5b89\u88c5\uff0c\u8bf7\u8bbf\u95ee Node.js \u5b98\u7f51<\/a> \u8fdb\u884c\u5b89\u88c5\uff0c\u968f\u540e\u901a\u8fc7\u4ee5\u4e0b\u547d\u4ee4\u5b89\u88c5 Vue CLI\uff1a<\/p>\n<\/p>\n

npm install -g @vue\/cli<\/code><\/pre>\n<\/p>\n
\u63a5\u4e0b\u6765\uff0c\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 Vue \u9879\u76ee\u5e76\u9009\u62e9 TypeScript \u652f\u6301\uff1a<\/p>\n<\/p>\n
vue create my-tsx-app<\/code><\/pre>\n<\/p>\n
\u5728\u521b\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u9009\u62e9\u4ee5\u4e0b\u9009\u9879\uff1a<\/p>\n<\/p>\n
    \n
  • Manually select features<\/li>\n
  • Choose TypeScript<\/li>\n
  • \u4f7f\u7528 Babel \u548c ESLint\uff08\u53ef\u9009\uff09<\/li>\n<\/ul>\n
    \u521b\u5efa\u5b8c\u6210\u540e\uff0c\u8fdb\u5165\u9879\u76ee\u76ee\u5f55\uff1a<\/p>\n<\/p>\n
    cd my-tsx-app<\/code><\/pre>\n<\/p>\n
    \u4e8c\u3001\u5b89\u88c5 TSX \u652f\u6301<\/h3>\n<\/p>\n
    \u8981\u5728 Vue \u9879\u76ee\u4e2d\u4f7f\u7528 TSX\uff0c\u9700\u8981\u989d\u5916\u5b89\u88c5\u4e00\u4e9b\u4f9d\u8d56\u5305\u3002\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n<\/p>\n
    npm install --save-dev @vue\/babel-plugin-transform-vue-jsx @vue\/babel-helper-vue-jsx-merge-props<\/code><\/pre>\n<\/p>\n
    \u4e09\u3001\u914d\u7f6e Babel<\/h3>\n<\/p>\n
    \u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e2d\u627e\u5230\u6216\u521b\u5efa\u4e00\u4e2a Babel \u914d\u7f6e\u6587\u4ef6\uff08\u4f8b\u5982 babel.config.js<\/strong>\uff09\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u914d\u7f6e\u4ee5\u542f\u7528 TSX \u652f\u6301\uff1a<\/p>\n<\/p>\n
    <\/p>\r\n
    module.exports = {<\/p>\r\n
      presets: [<\/p>\r\n
        '@vue\/app'<\/p>\r\n
      ],<\/p>\r\n
      plugins: [<\/p>\r\n
        '@vue\/babel-plugin-transform-vue-jsx'<\/p>\r\n
      ]<\/p>\r\n
    }<\/p>\r\n
    <\/code><\/pre>\n<\/p>\n
    \u56db\u3001\u521b\u5efa TSX \u7ec4\u4ef6<\/h3>\n<\/p>\n
    \u5728 src\/components<\/strong> \u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 TSX \u6587\u4ef6\uff0c\u4f8b\u5982 HelloWorld.tsx<\/strong>\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9\uff1a<\/p>\n<\/p>\n
    <\/p>\r\n
    import { defineComponent } from 'vue';<\/p>\r\n\r\n
    export default defineComponent({<\/p>\r\n
      name: 'HelloWorld',<\/p>\r\n
      props: {<\/p>\r\n
        msg: String<\/p>\r\n
      },<\/p>\r\n
      setup(props) {<\/p>\r\n
        const refresh = () => {<\/p>\r\n
          \/\/ \u5237\u65b0\u903b\u8f91\uff0c\u8fd9\u91cc\u53ef\u4ee5\u91cd\u65b0\u8bbe\u7f6e props \u6216\u505a\u5176\u4ed6\u5904\u7406<\/p>\r\n
        };<\/p>\r\n\r\n
        return () => (<\/p>\r\n
          
    <\/p>\r\n        \r\n
    {props.msg}<\/h1><\/p>\r\n\r\n