TS + Vue：搭建开发环境

前言

本篇重点介绍在 TS 的开发环境下使用 Vue，所以不赘述 TS 的环境搭建，直接基于 ➡️【hello TS】（搭建流程自取）项目进行开发。

另外，vue-cli 也提供一键式集成 typescript，但本篇的手动配置相信可以带给你更深入的理解。

安装

NPM

$ npm i vue

因为 Vue 自带声明文件，所以不需要额外安装。

创建实例

/*
 ** src/index.ts
 */

// let hello: string = "hello typescript";
// document.querySelectorAll(".app")[0].innerHTML = hello;

import Vue from "vue";

let app = new Vue({
  el: ".app",
  data: { name: "Vue & Typescript" },
  template: `<h1>{{ name }}</h1>`,
});

编译运行，你会发现报错了

vue.runtime.esm.js:623 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

“您正在使用 Vue 的仅运行时版本，而模板编译器不可用。可以将模板预编译为渲染函数，也可以使用包含编译器的内部版本。”

runtime-only？运行时版本？

术语

• 完整版：同时包含编译器和运行时的版本。
• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
• 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

完整版 vs 仅运行时

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版；

当使用 vue-loader 或 vueify 的时候，.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

运行时版本相比完整版体积要小大约 30% 。

// 需要编译器
new Vue({
  template: "<div>{{ hi }}</div>",
});

// 不需要编译器
new Vue({
  render(h) {
    return h("div", this.hi);
  },
});

如何使用完整版本？

vue 的默认版本是仅运行时版本，想使用完整版本，我们可以在 webpack 里配置一个别名：

/*
 ** build/webpack.base.config.js
 */

module.exports = {
  // ...
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js", // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    },
  },
};

重新编译后 npm start，it's ok。

支持单文件组件 .vue

vetur

为 .vue 文件提供代码高亮和自动补全的功能。

添加 Hello.vue

• src/components/Hello.vue

  <template>
    <h1>Hello {{ name }}</h1>
  </template>
  
  <script lang="ts">
  import Vue from "vue";
  export default Vue.extend({
    data() {
      return { name: "Vue & Typescript" };
    },
  });
  </script>
  
  <style scoped>
  h1 {
    color: orange;
  }
  </style>
  

• src/index.ts

  import Vue from "vue";
  import Hello from "./components/Hello.vue";
  
  let app = new Vue({
    el: ".app",
    components: { Hello },
    template: `<hello/>`,
  });
  

又到了报错的时刻：

TS2307: Cannot find module './components/Hello.vue' or its corresponding type declarations.

找不到 './components/Hello.vue' 模块或其对应的类型声明。

因为 ts 是无法识别单文件组件的，所以这里要为 .vue 这类文件添加一个声明文件。

单文件组件的声明文件

将 .vue 文件声明为一个模块，导出的类型是 Vue 的构造器

• src/vue-shims.d.ts

  declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
  }
  

处理单文件组件的依赖

$ npm i -D vue-loader vue-template-compiler css-loader

• build/webpack.base.config.js

// webpack.config.js
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  // ...其他配置
  resolve: {
    // 添加 vue
    extensions: [".js", ".ts", ".tsx", ".vue"],
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.tsx?$/i,
        use: [
          {
            loader: "ts-loader",
            options: {
              // 为 vue 文件添加 .ts 扩展名，以方便 ts 处理
              appendTsSuffixTo: [/\.vue$/],
            },
          },
        ],
        exclude: /node_modules/,
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin(),
  ],
};

到这里，我们就手动搭建完了 Vue 的开发环境。