vue-cli 中使用 TypeScript

三毛丶

于 2017-12-11 11:53:20 发布

阅读量9.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue typescript 前端

本文链接：https://blog.youkuaiyun.com/github_36978270/article/details/78771262

本文详述了在vue-cli项目中引入和配置TypeScript的过程，包括环境设置、.vue文件的改造、Vue Router和Vuex的集成。在遇到ESlint无法校验.vue文件以及部分插件缺少声明文件的问题时，通过调整tsconfig.json配置、添加.d.ts文件以及利用vue-class-component和vue-property-decorator等插件，成功实现了TypeScript在项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学以致用，这篇文章是对在 vue-cli 中使用 TypeScript 的一次小结。

环境

npm

// typescript
npm install typescript --save-dev

// ts-loader
npm install ts-loader --save-dev

webpack.base.conf.js

module.exports = {
  // 修改入口文件
  entry: './src/main.ts',
  // 引入 ts/tsx 文件时不必后缀 
  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    // 对 ts 使用 ts-loader
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: [
        "babel-loader",
        {
          loader: "ts-loader",
          options: { appendTsxSuffixTo: [/\.vue$/