vue2与typescript2整合环境配置

# vue2与typescript2整合环境配置


增加开发包的依赖
``` bash
npm install typescript ts-loader --save-dev
```


增加运行依赖包
``` bash
npm i vue-class-component --save
```


修改src目录中的内容  
main.js修改为main.ts  
修改app.vue内容,将script内替换为如下内容  
``` typescript
<script  lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component';
 
@Component({
  name:"app"
})
export default class App extends Vue {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
```
配置tsconfig.json,重点  
allowSyntheticDefaultImports  
lib  
module  
moduleResolution  
``` json
{
    "compilerOptions": {
      "target": "es5",
      "allowSyntheticDefaultImports": true,
      "lib": [
        "dom",
        "es5",
        "es2015.promise"
      ],
      "module": "es2015",
      "moduleResolution": "node",
      "outDir": "lib",
      "isolatedModules": false,
      "experimentalDecorators": true,
      "declaration": true,
      "noImplicitAny": true,
      "noImplicitThis": true,
      "strictNullChecks": true,
      "removeComments": true,
      "suppressImplicitAnyIndexErrors": true
    },
     "exclude": [
          "node_modules"
      ],
    "include": [
      "src/**/*.ts"
    ],
    "compileOnSave": false
  }
``` 


修改webpack配置  
webpack.config.js  
 
1.修改入口  
将entry.app的main.js修改为main.ts
如下所示
``` json
module.exports = {
  entry: {
    app: './src/main.ts'
  },
```
在resolve中添加 extensions: ['.ts','.js', '.json']  
如下所示  
``` json
module.exports = {
  resolve: {
    extensions: ['.ts','.js', '.json']
  },
```
 
在module.rules中添加ts-loader和raw-loader  
``` json
module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
 
``` 
运行测试  
npm run dev


自动打开浏览器  
http://localhost:8080