Vue.js + TypeScript 脚手架套装用法介绍

本文以一个 To-do list 项目（又是这个...）介绍如何使用 Vue.js + TypeScript + Sass + Webpack 套装。

创建项目的目录结构

这里我们使用 vue-cli：

npm install -g @vue/cli
# 或者如果你更喜欢用 Yarn 的话：yarn global add @vue/cli
vue create v2do
shell

选择手工配置特性（Manually select features）。根据你的需求选择，例如我就选择了这几个：

Babel
TypeScript
CSS Pre-processors
Linter / Formatter

按空格勾选/取消勾选，按回车确认。之后是各种配置，个人的选择：

? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus
? Pick a linter / formatter config: (Use arrow keys)
❯ TSLint 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json
? Save this as a preset for future projects? (y/N) N
plain

等 npm 好长时间^1^，然后我们就有了一个开箱即用的目录结构及配置。

这里其实也可以选择用淘宝的 npm 镜像源：vue create v2do -r https://registry.npm.taobao.org

组件

Vue.js 的一个重要概念就是「组件系统」。在我们的示例中，组件保存在 src/components 中，以 .vue 格式结尾，格式和 Vue 的单文件组件相似，类似于：

<template>
  <!-- 模板 -->
</template>

<script lang="ts">
// 组件定义。这里是 TypeScript 格式（lang="ts"）。
</script>

<style scoped lang="scss">
/* 样式定义。这里是 SCSS 格式（lang="scss"）。
   scoped 表示此格式仅应用于此组件。
*/
</style>
html

模板和样式定义，不多说了，和一般的 Vue.js 写法没什么不同。组件定义部分，则需要用一种有点特别的写法。

import { Component, Emit, Prop, Vue } from 'vue-property-decorator';
import TagList from './TagList.vue';
import TaskBtn from './TaskBtn.vue';  // 引用要用的组件
import { tsTodoItem } from './tsUtils'; // 当然也可以引用 ts 模块里的东西

@Component({
  components: { TaskBtn, TagList },
  // 这里放置引用了的组件，类似于
  // new Vue({.. , components: { TaskBtn, TagList }, ..})
})
export default class TodoItem extends Vue { // 欲导出的组件
  
  // 组件的 Prop
  @Prop() public index!: number;
  @Prop() public item!: tsTodoItem;

  // 也可以有其它的自有属性...
  public a!: number;
  private b!: number;

  // ...和自有方法(methods)，computed、getter 和 setter 也算在这里
  public getDomain() {
    return this.item; // 取对象属性要用 this.
  }

  get getDomainName() {
    return "";
  }

  // 触发事件($emit)，配合父组件的 v-on:{eventName}="functionName" 属性使用
  @Emit('toggle-item')  // 待触发事件的名称
  public toggleItem(index: number) {
    return index; // 返回值为待触发事件的参数
  }
  // 不过也可以
  this.$emit('test', 'hi')

  // 监听属性($watch)
  @Watch('todos', { deep: true })
  onTodoChange(val: tsTodoItem[], oldval: tsTodoItem[]) {
    saveToLocalStorage(val);
  }
}
typescript

这里列举了 Vue.js 常用的几个属性。其它属性在示例项目中可能亦有所体现。

生成时的配置

默认 npm run build 给出的文件只能在 host 在根目录的时候才能使用。如果要放到子目录的话，需要写一下 vue.config.js 的配置：

module.exports = {
    publicPath: '/v2do/'  // 页面所在的子目录
  }
js

添加外部脚本/CSS

因为 v2do 中用到了 Fomantic UI（Semantic UI 长期停更后社区维护的分支版），需要引入相关的 JS/CSS。我是直接放到 public/index.html 里了。