vue-cli集成TypeScript

1- 安装ts-loader和typescript

npm install --save-dev ts-loader@3 typescript
[email protected]使用的webpack为3, 所以必须使用ts-loader@3

2- 修改webpack.base.conf.js配置文件

修改webpack.base.conf.js下的entry>app为'./src/main.ts'
extensions: ['.js', '.vue', '.json', '.ts', '.tsx']//添加'.ts', '.tsx' 文件引入不用写后缀
    rules: [
    {
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/\.vue$/],
      }
    },//添加tsloader加载器
    ...其他
  ]

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

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

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

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

5- 修改main.js后缀改为ts, 添加引入文件的的后缀.
6- 修改router.js后缀改为ts.
7- 测试

//下面可以测试是否集成成功，编辑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>

8- 配置官方推荐的，vue-class-component

修改ts配置文件，增加以下两项配置
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,

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

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)
  }
}

问题
1- ts 无法识别 require
yarn add @types/webpack-env -D

vue-cli集成TypeScript

评论 (0)