Vue + TypeScript 简单项目完善

加入 Webpack

1. 安装 $npm install -g webpack 及命令行工具 $npm install -g webpack-cli
2. 然后使用 $webpack-cli --init 创建初始的 webpack.config.js 配置脚本。
3. 安装 webpack 的 ts-loader ， $npm install -D ts-loader
   编辑脚本如下：

const webpack = require('webpack');
const path = require('path');
module.exports = {
    mode: 'development',
    entry: './app.ts',
    output: {
        filename: 'app.bundle.js',
        path: path.resolve(__dirname, '.')
    },
    module: {
        rules: [
            { 
                test: /\.tsx?$/, exclude: /node_modules/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                }
            },
        ]
    },
    resolve:{
        extensions: ['.tsx','.ts', '.js', '.json'],
        alias:{
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
};

运行 $webpack 即可完成打包，然后 index.html 的 JS 引用改为：
<script src="app.bundle.js"> </script> 即可。
遇到过以下错误：

ERROR in ./app.ts
Module build failed: Could not load TypeScript. Try installing with yarn add typescript or npm install typescript. If TypeScript is installed globally, try using yarn link typescript or npm link typescript.

由于我的 typescript 确实是全局安装的，那要求执行即可:$npm link typescript

使用类风格构造 App 对象。

1. 安装 $npm install vue-class-component
2. 将 app.ts 改写如下：

import Vue from "vue"
import Component from "vue-class-component"

@Component
class App extends Vue{
  greeting = 'Welcome to your Vue.js app!'
  docsURL = 'http://vuejs.org/guide/'
  discordURL = 'https://chat.vuejs.org'
  forumURL = 'http://forum.vuejs.org/'

  humanizeURL(url:string): string{
    return url
      .replace(/^https?:\/\//, '')
      .replace(/\/$/, '')
  }
}
const app = new App({ el: '#app', })

到此这个 Vue + TypeScript 的简单项目已经基本完善。后面继续实现 ToDo 功能。