vue配置typescript指南

2018.05.21 14:23 阅读 634 评论 0
  1. 首先在项目中安装ts-loader和typescript依赖

注:查看项目的webpack版本,如果是webpack3.x需要安装ts-loader3.x版本,如果是webpack4.x的版本需要安装ts-loader4.x版本。

npm install ts-loader@3 typescript -D
  1. 将webpack的入口文件名修改为main.ts,同时修改webpack.base.js中entry选项
  2. 在module.rules中添加loader,来解析ts文件类型
module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/]
        } 
      }
    }
  }
}
  1. 在项目根目录下新建tsconfig.json,添加如下内容
// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node"
  }
}
  1. 在src目录下新建vue-shim.d.ts文件,添加如下内容,处理vue文件
declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
  1. 修改好以上内容后,在ts文件中引入vue文件需要加上文件后缀,来识别文件名。
import App from './App.vue'
  1. 在vue文件中写vue语法时候需要类的写法,并在script标签上添加lang="ts"
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'App'
})
</script>
0 条评论
发布