一、安装

/**********************新项目生成************************
用脚手架直接生成

vue init webpack vue-typescript
cd /vue-typescript
npm install typescript ts-loader --save-dev
npm install

然后到检查配置
***********************************************************/
/**********************旧项目改造************************
如果项目已经有了，要引入typescript我们可以使用

npm install typescript ts-loader --save-dev

来配置typescript环境
********************************************************/

如果不能用，检查以下配置

• packge.json中是否有typescript和ts-loader，如果没有，重新安装typescript或者ts-loader依赖，或者复制如下内容到packge.json重新安装node_modules

"ts-loader": "^2.3.3",
"typescript": "^2.4.2",

• 是否有tsconfig.json文件在你的项目目录下，如果没有创建该文件

里面内容如下

{
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "module": "es2015",
    "target": "es5",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "isolatedModules": true,
    "lib": [
      "es2017",
      "dom"
    ],
    "sourceMap": true,
    "pretty": true
  }
}

• build目录下的webpack.base.conf.js

  • module.exports中入口文件改成ts结尾

    
    main.ts

  • resolve

    
    增加.ts.tsx

  • rules

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

如果在命令行见到

说明你的typescript已经成功嵌入vue了