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

Re:Linked
本文为专题「 前端组件示例 」的一部分。

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

示例项目地址

创建项目的目录结构

这里我们使用 vue-cli:

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

选择手工配置特性(Manually select features)。根据你的需求选择,例如我就选择了这几个:

  • Babel
  • TypeScript
  • CSS Pre-processors
  • Linter / Formatter

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
? 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

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

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

组件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<!-- 模板 -->
</template>

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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);
}
}

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

生成时的配置

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

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

添加外部脚本/CSS

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


评论