vue+TypeScript构建第一个项目

安装项目

因为本机vue脚手架是2.0,webpack3.0版本所以本文只适用vue/cli2.0版本。

//新建项目
vue init webpack vue-ts


后面一系列路由，测试单元配置忽略。

 

//新建项目后我们安装ts
npm install typescript ts-loader --save-dev

//安装一下官方插件
npm i vue-class-component vue-property-decorator --save

vue-class-component：强化 Vue 组件，使用 TypeScript/装饰器 增强 Vue 组件
vue-property-decorator：在 vue-class-component 上增强更多的结合 Vue 特性的装饰器
ts-loader：TypeScript 为 Webpack 提供了 ts-loader，其实就是为了让webpack识别 .ts .tsx文件   ！重点ts-loader安装3.1.1版本配合webpack3.0版本使用否则无法兼容！

 在项目根目录下新建tsconfig.json文件

//这是我的文件配置
{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "isolatedModules": true,