Vue + TypeScript项目搭建

关于TypeScript

TS官网定义：

TypeScript is JavaScript with syntax for types.

TypeScript是带有类型语法的JavaScript，类型系统可以更方便地检查错误，提高代码的质量和可维护性。TS代码最终会编译成JS代码。

搭建TS - Vue项目

使用Vue/Cli搭建

环境

我使用的环境是：

Node v12.11.1
@vue/cli 4.1.1

创建项目

vue create ts-vue-demo

创建项目时的选项

首先选择Manually select features，会出现配置界面。进行如下选择：

项目配置选项

启动

cd ts-vue-demo
yarn serve

项目配置

配置文件

tsconfig.json TS配置文件
vue.config.js vue配置，可以配置一些打包工具之类的
.eslintrc.js eslint配置文件

开发

vue-property-decorator

vue-property-decorator是一个基于vue-class-component的库，提供了一些@装饰器：

@Prop修饰Prop

@Inject 指定依赖注入

@Model 指定 model

@Watch 修饰 watch方法

@Component 修饰类

具体查看文档。

class风格组件

使用@Component注解我们可以定义类风格的组件：

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Counter extends Vue {

  // Class properties will be component data
  count = 0
  
  // Prop
  @Prop({default: 0}) private prop1 !: number;

  // Methods will be component methods
  increment() {
    this.count++
  }

  decrement() {
    this.count--
  }
  
  @Watch('count')
  onCountChanged (val: number, oldVal: number) {
    console.log(`count更新了，旧值：${oldVal}，新值：${val}`);
  }
  
  // 生命周期
  private created ()：void { },
  private mounted ()：void { },
  private updated ()：void { },
  private destroyed ()：void {}
}

mixin

mixin的写法：

定义mixin：

@Component
export default class Helper extends Vue {
  // mixin代码
}

使用：

@Component
export default class TaskEditor extends mixins(Helper) {
  // 组件代码
}

部署

一键部署到github pages

首先需要为项目准备一个github仓库。

然后，在项目目录下新建deploy.sh文件：

#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
yarn build

# cd 到构建输出的目录下 
cd dist

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<PROJECT-NAME>.git master:gh-pages

cd -

使用命令./deploy.sh即可一键部署到项目仓库的gh-pages分支。

Author: kpt

Permalink: http://kpt.ink/2021/07/05/Vue-Typescript-Project/

文章默认使用 CC BY-NC-SA 4.0 协议进行许可，使用时请注意遵守协议。

updated at 2021-09-26

# Vue # TypeScript