vue与TypeScript集成配置最简教程

https://segmentfault.com/a/1190000011878086  这个是另一个typescript配置的文件

>npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

vue与TypeScript集成配置最简教程

 

vue与TypeScript集成配置最简教程 前言 初始化项目 配置 测试 进阶

 

前言

Vue的官方文档没有给出与TypeScript集成的具体步骤，网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异，让人无从下手。

下面我就给出vue-cli建立的项目与TypeScript集成的最简配置。

初始化项目

首先用vue-cli建立webpack项目。这里为了演示方便，没有打开router和eslint等，可以根据自身情况打开。

  # vue init webpack vue-typescript

?  Project name vue-typescript
?  Project description A Vue.js  project
? Author
? Vue build standalone
?  Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No      

1 2 3 4 5 6 7 8 9 10

安装TypeScript相关依赖和项目其余依赖，用npm或cnpm

  # cd /vue-typescript
 # npm install typescript ts-loader --save-dev
 # npm install    

1 2 3

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

配置

修改目录下 bulid/webpack.base.conf.js 文件，在文件内 module>rules 添加以下规则

 {
  test: /\.tsx?$/,
  loader: 'ts-loader',
  exclude: /node_modules/,
  options: {
    appendTsSuffixTo: [/\.vue$/],
  }
},
 

  // 从这里复制下面的代码就可以了
         // 如果之前按照起手式配置的同学，请替换配置
      {
         test:  /\.tsx?$/,
         exclude:  /node_modules/,
         enforce:  'pre',
         loader:  'tslint-loader'
      },
      {
         test:  /\.vue$/,
         loader:  'vue-loader',
         options:  Object.assign(vueLoaderConfig, {
           loaders: {
             ts:  "ts-loader",
             tsx:  "babel-loader!ts-loader"
          }
        })
      },
      {
         test:  /\.tsx?$/,
         exclude:  /node_modules/,
         use: [
           "babel-loader",
          {
             loader:  "ts-loader",
             options: {  appendTsxSuffixTo: [ /\.vue$/] }
          }
        ]
      },
       // 复制截止                                  

1 2 3 4 5 6 7 8

在src目录下新建一个文件 vue-shims.d.ts ，用于识别单文件vue内的ts代码

 declare module  "*.vue" {
  import Vue from  "vue";
  export  default Vue;
}
    

1 2 3 4 5

在项目根目录下建立TypeScript配置文件 tsconfig.json

 {
  " compilerOptions":  {
    " strict":   true,
    " module":   "es2015",
    " moduleResolution":   "node",
    " target":   "es5",
    " allowSyntheticDefaultImports":   true,
    " lib":  [
       "es2017",
       "dom"
    ]
  }
}
                      

然后在  tsconfig.json 中，添加对 jsx 的支持

 

    "compilerOptions": {
     "jsx":  "preserve"
    }    

1 2 3 4 5 6 7 8 9 10 11 12 13 14

重命名src下的 main.js 为 main.ts

修改 webpack.base.conf.js 下的 entry>app 为 './src/main.ts'

修改src下的App.vue文件，在

  < script  lang= "ts">     

1

测试

下面可以测试是否集成成功，编辑 src/components/Hello.vue 文件，修改

  < script  lang= "ts"> 
  import Vue, {ComponentOptions} from  'vue'
  export  default {
    name:  'hello',
    data() {
       return {
        msg:  'this is a typescript project now'
      }
    }
  } as ComponentOptions<Vue>
 </ script>             

1 2 3 4 5 6 7 8 9 10 11

运行项目

  # npm run dev  

1

测试成功，现在是一个TypeScipt项目了

进阶

配置官方推荐的 vue-class-component ， https://cn.vuejs.org/v2/guide/typescript.html

安装开发依赖

  # npm install --save-dev vue-class-component  

1

修改ts配置文件，增加以下两项配置

  "allowSyntheticDefaultImports":  true,
 "experimentalDecorators":  true,     

1 2

改写我们的Hello组件

 <script lang= "ts">
   import Vue from  'vue'
   import Component from  'vue-class-component'
   @Component
  export  default   class  Hello  extends  Vue {
    msg: string =  'this is a typescript project now'    
  }
</script>              

1 2 3 4 5 6 7 8

使用 vue-class-component 后，初始数据可以直接声明为实例的属性，而不需放入 data() {return{}} 中，组件方法也可以直接声明为实例的方法，如官方实例，更多使用方法可以参考其官方文档

https://github.com/vuejs/vue-class-component#vue-class-component

  import Vue from  'vue'
 import Component from  'vue-class-component'
 // @Component 修饰符注明了此类为一个 Vue 组件
 @Component({
   // 所有的组件选项都可以放在这里
  template:  '<button @click="onClick">Click!</button>'
})
export  default   class  MyComponent  extends  Vue {
   // 初始数据可以直接声明为实例的属性
  message: string =  'Hello!'
   // 组件方法也可以直接声明为实例的方法
  onClick (): void {
    window.alert( this.message)
  }
}                   

查看更多关于vue与TypeScript集成配置最简教程的详细内容...