手把手教你用webpack+vue+typeScript搭建项目(非vue-cli篇)

第一步

新建一个文件夹，命名为ts

进入ts文件夹，在当前目录打开命令行

第二步

执行npm init初始化项目

第三步

配置package.json文件，安装项目所需要的依赖

这里需要注意一个问题，这三个包的版本都会对整个项目是否能启动有很大的影响，在命令行执行npm install 安装依赖。

第四步

创建webpack.config.js 内容如下

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
              css: 'vue-style-loader!css-loader',
              less: 'vue-style-loader!css-loader!less-loader'
          },
        }
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

注：如果是vue-loader@15版本以上的，必须引入vue Plugin

第五步

创建入口文件index.ts和首页index.html

index.html

<!doctype html>
<html>
<head></head>

<body>
    <div id="app"></div>
</body>
<script src="./dist/build.js"></script>

</html>

index.ts

import Vue from "vue";
import HelloComponent from "./components/Hello.vue";
import HelloDecoratorComponent from "./components/HelloDecorator.vue";


let v = new Vue({
    el: "#app",
    template: `
    <div>
        Name: <input v-model="name" type="text">
        <hello-component :name="name" :initialEnthusiasm="5" />
        <h1>Hello Decorator Component</h1>
        <hello-decorator-component :name="name" :initialEnthusiasm="5" />
    </div>
    `,
    data: { name: "World" },
    components: {
        HelloComponent,
        HelloDecoratorComponent
    }
});

在入口文件index.ts中，我们新建了一个vue对象，引入了两个用ts写的组件HelloComponent， HelloDecoratorComponent

第六步

创建文件夹components，在文件夹下新建两个文件Hello.vue，HelloDecorator.vue

Hello.vue

<template>
    <div>
        <div class="greeting">Hello {{name}}{{exclamationMarks}}</div>
        <button @click="decrement">-</button>
        <button @click="increment">+</button>
    </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
    props: ['name', 'initialEnthusiasm'],
    data() {
        return {
            enthusiasm: this.initialEnthusiasm,
        }
    },
    methods: {
        increment(): void { this.enthusiasm++; },
        decrement(): void {
            if (this.enthusiasm > 1) {
                this.enthusiasm--;
            }
        },
    },
    computed: {
        exclamationMarks(): string {
            return Array(this.enthusiasm + 1).join('!');
        }
    }
});
</script>
<style>
.greeting {
    font-size: 20px;
}
</style>

在这里，为了使代码更符合ES6 class的写法，我们引入vue-property-decorator包，创建HelloDecorator.vue

<template>
    <div>
        <div class="greeting">Hello {{name}}{{exclamationMarks}}</div>
        <button @click="decrement">-</button>
        <button @click="increment">+</button>
    </div>
</template>

<script lang="ts">
// 引入组件申明,属性申明
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class HelloDecorator extends Vue {
    // 申明父级属性
    @Prop() name!: string;
    @Prop() initialEnthusiasm!: number;

    //申明组件内部变量
    enthusiasm = this.initialEnthusiasm;

    // 申明methods方法
    increment(): void {
        this.enthusiasm++;
    }

    decrement(): void {
        if (this.enthusiasm > 1) {
            this.enthusiasm--;
        }
    }

    // 申明computed方法
    get exclamationMarks(): string {
        return Array(this.enthusiasm + 1).join('!');
    }
}
</script>

<style>
.greeting {
    font-size: 20px;
}
</style>

注：这段代码系统无法识别为JavaScript，所以代码样式并没有显示

第七步

我们加入tslint.json和tsconfig.json配置文件，前者是对ts文件的代码校验，后者指定了用来编译这个项目的根文件和编译选项

tslint.json

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "quotemark": [
            true,
            "single"
        ],
        "indent": [
            true
        ],
        "interface-name": [
            false
        ],
        "arrow-parens": false,

        "object-literal-sort-keys": false
    },
    "rulesDirectory": []
}

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "experimentalDecorators": true
    },
    "include": [
        "./src/**/*"
    ]
}