# vue-ts-boilerplate

> A Vue.js starter boilerplate with typescript

Latest version **1.0.1** (published 2018-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-ts-boilerplate
pnpm add vue-ts-boilerplate
yarn add vue-ts-boilerplate
bun add vue-ts-boilerplate
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-11-16 |
| First published | 2018-11-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 4 |
| Unpacked size | 53.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 11 |
| Author | wuxueqian |
| Maintainers | thundernet8 |

## Links

- npm: https://www.npmjs.com/package/vue-ts-boilerplate
- Repository: git@github.com:thundernet8/Vue-TS-Boilerplate
- npm.io page: https://npm.io/package/vue-ts-boilerplate

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.5.13
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.1
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.26.0
- [vue-tsx-helper](https://npm.io/package/vue-tsx-helper.md) ^0.1.3

## Recent versions

- 1.0.1 (latest) — 2018-11-16

## README

<div align="center">

## Vue-TS-Boilerplate

**A Vue.js starter boilerplate with typescript .**

[![GitHub issues](https://img.shields.io/github/issues/thundernet8/Vue-TS-Boilerplate.svg)](https://github.com/thundernet8/Vue-TS-Boilerplate/issues)
[![GitHub forks](https://img.shields.io/github/forks/thundernet8/Vue-TS-Boilerplate.svg)](https://github.com/thundernet8/Vue-TS-Boilerplate/network)
[![GitHub stars](https://img.shields.io/github/stars/thundernet8/Vue-TS-Boilerplate.svg)](https://github.com/thundernet8/Vue-TS-Boilerplate/stargazers)
[![dependency status](https://img.shields.io/david/thundernet8/Vue-TS-Boilerplate.svg?maxAge=3600&style=flat)](https://david-dm.org/thundernet8/Vue-TS-Boilerplate)
[![Build Status](https://travis-ci.org/thundernet8/Vue-TS-Boilerplate.svg?branch=master)](https://travis-ci.org/thundernet8/Vue-TS-Boilerplate)
[![GitHub license](https://img.shields.io/github/license/thundernet8/Vue-TS-Boilerplate.svg)](https://github.com/thundernet8/Vue-TS-Boilerplate/blob/master/LICENSE)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

</div>

<br>

## Usage

```
npm run build // 生产打包

npm run dev // 开发模式

npm run analyze // 生产打包并bundle分析

npm run lint // 代码Lint
```

## Note

三种方式写一个Vue组件

## Component.vue

这种方式仍沿用了Vue SFC，只是script部分的语法改成TypeScript，script内部能够利用一些TypeScript的静态类型检查优势，由于无法利用JSX语法，TypeScript无从检查template部分的数据和语法，且TSLint不支持vue文件


## Component.vue + Component.ts

一般建立组件名为名称的文件夹，内部包含`index.vue`和`index.ts`两个文件，`index.vue`为原始 SFC 代码，`index.ts`主要为了方便其他组件引入并添加类型支持，例:

```typescript
import HelloWorld from "./index.vue";
import Vue, { VueConstructor } from "vue";

declare module "vue/types/vue" {
    // Add global static props for Vue
    interface VueConstructor {}

    // Add global instance props for Vue
    interface Vue {}
}

interface IProps {
    propMessage: string;
}

interface IHelloWorld extends Vue {
    msg: string;
    hello: () => void;
    props: IProps;
}

export default HelloWorld as VueConstructor<IHelloWorld>;
```
## Component.tsx

完全TSX语法，不使用vue SFC，需要引入[vue-tsx-helper](https://github.com/thundernet8/Vue-TSX-Helper)

```typescript
// ComponentA
import { Component, Prop } from "vue-property-decorator";
import { VueComponent } from "vue-tsx-helper";

/**
 * Vue component props types
 */
interface IProps {
    msg: string;
}

const mixin = {
    created() {
        console.log("mixin created");
    }
};

@Component({
    name: "ComponentA",
    mixins: [mixin]
})
export default class TestComponent extends VueComponent<IProps> {
    @Prop() msg;

    created() {
        console.log("created");
    }

    render(h) {
        return (
            <div class="container">
                {"parent message: " + this.msg}
                {this.$slots.default}
            </div>
        );
    }
}
```

```typescript
// WrapComponent
import { Component, Prop } from "vue-property-decorator";
import { VueComponent } from "vue-tsx-helper";
import ComponentA from "./ComponentA";

/**
 * Vue component props types
 */
interface IProps {}

@Component
export default class WrapComponent extends VueComponent<IProps> {
    @Prop() msg;

    render(h) {
        return (
            <ComponentA msg={"msg from parent"}>
                <h2>Page writed without .vue but plain tsx</h2>
                <anyslot is="router-link" to="/">
                    Back to home
                </anyslot>
            </ComponentA>
        );
    }
}
```

---
_Source: https://npm.io/package/vue-ts-boilerplate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._