vue2 in typescript2 (4) - hello

hello

增加开发包的依赖

npm install typescript ts-loader raw-loader --save-dev

增加运行依赖包

npm i vue-class-component --save

安装node类型
npm install @types/node –save

修改src目录中的内容
hello.html

<div>
    <p>{{msg}}</p>
    <input v-model="msg"></input>
</div>

hello.ts

"use strict"
import Component from 'vue-class-component';
import * as Vue from 'vue';

@Component({
  name:'hello',
  template:require('./hello.html')
})

export class Hello extends Vue {
  data() {
    return {
      msg: 'Hello Vue2 in Typescript2'
    };
  }
}

main.js修改为main.ts

import Vue from 'vue'
import {Hello} from './components/hello'

new Vue({
  el: '#app',
  render: h => h(Hello)
})

配置tsconfig.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
如下所示

module.exports = {
  entry: {
    app: './src/main.ts'
  },

在resolve中
修改别名为vue.js
添加extensions: [‘.ts’,’.js’, ‘.json’]
如下所示

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    },
    extensions: ['.ts','.js', '.json']
  },

在module.rules中添加ts-loader和raw-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
       {
        test: /\.html$/,
        loader: 'raw-loader',
        exclude: ['./index.html']
      },

运行测试
npm run dev

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