Skip to content
使用Tsx写Vue的简单Demo
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode chore(vscode): add config Nov 5, 2018
public
screenshot refactor(screenshot): del Feb 16, 2019
src chore(tsx): 增加 jsx-sync jsx-v-model cssModule Nov 5, 2018
types init Sep 29, 2018
.browserslistrc init Sep 27, 2018
.eslintrc.js init Sep 29, 2018
.gitignore
README.md feat(config): update Feb 16, 2019
babel.config.js chore(tsx): 增加 jsx-sync jsx-v-model cssModule Nov 5, 2018
package.json chore(version): update Nov 5, 2018
postcss.config.js init Sep 27, 2018
tsconfig.json init Sep 29, 2018
vue.config.js
yarn.lock chore(tsx): 增加 jsx-sync jsx-v-model cssModule Nov 5, 2018

README.md

Vue-Cli3 中虽然提供了 TypeScript 写 Vue,但是由于插件的支持度不够,Vue 文件里写 Ts,体验貌似也没什么提升,所以,我决定使用 TSX 来写 Vue

接下来,我以 Vue 初始项目为例,演示怎么将 Vue 文件转换成 Tsx

新建项目

我们使用 Vue-Cli3 新建一个项目,配置如下

vue-cli-options

vue-tsx-support 增强提示

yarn add vue-tsx-support -D

专门为了 Vue Tsx 文件,而编写的一个依赖,详细请阅读官网

或者参考我的项目里 https://github.com/JuZiSang/blog 的用法

Tsx 热重置

所需依赖

yarn add vue-jsx-hot-loader -D

vue.config.js

chainWebpack 增加如下 loader,支持热重置

config.module
  .rule("tsx")
  .test(/\.tsx$/)
  .use("vue-jsx-hot-loader")
  .before("babel-loader")
  .loader("vue-jsx-hot-loader");

CSSModule 支持

Tsx 中,Vue 原来的 scoped 方案就失效了,所以我决定使用 css-module 解决这个问题,并且配合 typings-for-css-modules-loader 生成 *.d.ts 增加提示

依赖

yarn add typings-for-css-modules-loader node-sass sass-loader -D

vue.config.js

["css", "less", "scss", "sass", "stylus", "postcss"].forEach(rule => {
  // rules for *.module.* files
  // 将 css-loader 替换为 typings-for-css-modules-loader
  const cssRule = config.module
    .rule(rule)
    .oneOf("normal-modules")
    .uses.get("css-loader")
    .set("loader", "typings-for-css-modules-loader");
});

我们可以继续在 vue.config.js 的 css 选项中配置我们的 css,详情戳这里

{
  loaderOptions: {
    css: {
      // name 导出
      namedExport: true,
      // 是否使用驼峰
      camelCase: true,
      // html 中 实际的 css 类名
      localIdentName: process.env.NODE_ENV !== "production" ? "[local]-[hash:base64:5]" : "[hash:base64:5]"
    }
  }
};

支持 sync v-model

依赖

yarn add babel-plugin-jsx-v-model babel-plugin-vue-jsx-sync -D

babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: ["vue-jsx-sync", "jsx-v-model"]
};

总结

yarn add vue-tsx-support vue-jsx-hot-loader typings-for-css-modules-loader node-sass sass-loader babel-plugin-jsx-v-model babel-plugin-vue-jsx-sync -D

经过如上改造,就能愉快的编写 Tsx 了

You can’t perform that action at this time.