Vue 项目添加 TypeScript 支持

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

前言

如果原有项目 webpack 版本低于 4 ,建议直接用 vue-cli 新建项目然后把项目文件迁移过去

原有项目添加 TypeScript

  1. 添加 TypeScript 及代码检查

    npm install typescript ts-loader tslint tslint-loader -D
  2. 初始化 TypeScript 及代码检查配置
    详细配置


    • TypeScript
    • Tslint
    • 注: 推荐使用 Eslint 进行代码检查,这里是因为我操作的项目eslint 版本较低不支持 ts 代码检查

      ./node_modules/.bin/tsc --init
      ./node_modules/.bin/eslint --init
  3. 修改 webpack 配置
    添加 .ts .tsx 用于搜索 ts 文件的扩展名

    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.vue', '.json']
    }

    对于 ts 文件添加 loader 配置

    { // 加入对文件的ts识别
        test: /.ts$/,
        enforce: 'pre',
        loader: 'tslint-loader'
    },
    {
        test: /.tsx?$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/.vue$/],
        }
    },
  4. 添加 vue 对 ts 的支持

    npm install vue-property-decorator vue-class-component -S
  5. 改造 vue 文件
    只需要在 script 标签加上 lang="ts"
    并且引入 vue-property-decorator

    具体用法参考 vue-property-decorator 在 npm 的介绍以及TypeScript文档

新项目添加 TypeScript

如果项目是vue-cli创建的可以直接使用vue add @vue/typescript 添加,具体可参考vue typescript 插件

  1. 安装 vue-cli,已有 vue 脚手架 可以忽略直接进行下一步
    安装:

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
  2. 创建一个项目

    vue create my-project
  3. 选择自定义配置
    选择自定义配置
  4. 选中 TypeScript
    选中TypeScript
  5. 选择代码风格格式化检测工具
    选择eslint
  6. 等待完成
    等待完成
  7. 同样的具体用法

    参考 vue-property-decorator 在 npm 的介绍以及TypeScript文档

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看