十步创建一个（vue-cli+webpack+typescript）项目

1、vue init webpack test 初始化项目
初始化项目选择配置步骤省略…(根据项目需求选择即可)

2、安装ts所需要的依赖

cnpm i typescript ts-loader@^3.5.0 --save-dev

3、webpack.base.conf.js 添加rules

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

4、添加识别（声明）文件在src目录下新建vue-shims.d.ts

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

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

{
  "include": ["src/**/*"],
  "exclude": ["node_modules","dist"],
  "compilerOptions":{
      "strict": true,
      "module": "es2015",
      "moduleResolution": "node",
      "target": "es5",
      "allowSyntheticDefaultImports": true,
      "declaration": false,
      "strictNullChecks": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "allowJs": true,
      "lib": [
          "es2017",
          "es2016",
          "dom",
          "ES2015",
          "ES2015.Promise"
      ]
  }
}

6、重命名主入口文件src/main.js 改为main.ts，同时修改build/webpack.base.config.js中的entry中的
main.js >> main.ts，并添加文件扩展.ts、.tsx

entry: {
    app: './src/main.ts'
}
...其他内容
resolve: {
    extensions: ['.js','.vue','.jason','.ts','.tsx'],
}

7、修改src/App.vue的script标签的lang属性

8、修改main.ts中，App组件的引入 后缀要带上.vue 因为ts只识别.ts结尾的

import App from './App.vue'

9、安装vue官方推荐插件vue-class-componentvue-property-decorator

cnpm i vue-class-component vue-property-decorator --save
//vue-class-component:强化Vue组件，使用TypeScript/装饰器 增强Vue组件
//vue-property-decorator:在vue-class-component上增强更多的结合Vue特性的装饰器

10、使用npm或yarn，顺便你，个人建议使用cnpm下载依赖包，项目创建成功后可以使用yarn日常更新包（优点，下载快速），最后执行npm run dev 命令后等待它启动成功吧