vue與ts的使用模版

[源碼地址](https://github.com/jielanglang/simple-vue)

[項目demo](https://xll.netlify.com/)

# 這里講下使用中注意的事項? 具體的使用在項目源碼中

## 關于typescript詳細配制

[tsconfig配制詳情](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Compiler%20Options.html)

## 關于命令

**`npm run creat [paths...]`**

本人對于不斷的創建組件文件夾已經很煩惱所以參考網上 生成了基于node的腳本!

運行

```shell

npm run creat views/Home

// or

npm run creat components/Home

```

會在對應的文件`views`or`components`夾中生成 `index.ts`,`home.html`,`home.scss`

生成的文件內部都有基本的使用代碼? 如果對這個生成的文件有個人需求 可以參考 項目目錄下的`generator.js` 文件自行修改

## Vue-Property-Decorator

vue-property-decorator 是在 vue-class-component 上增強了更多的結合 Vue 特性的裝飾器,新增了這 7 個裝飾器

- @Emit

- @Inject

- @Model

- @Prop

- @Provide

- @Watch

- @Component (從 vue-class-component 繼承)

## 項目中的語法使用方法

```js

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

@Component

export default class App extends Vue {

? name:string = 'Simon Zhang'

? // computed

? get MyName():string {

? ? return `My name is ${this.name}`

? }

? // methods

? sayHello():void {

? ? alert(`Hello ${this.name}`)

? }

? mounted() {

? ? this.sayHello();

? }

}

```

類似vue中的

```js

export default {

? data () {

? ? return {

? ? ? name: 'Simon Zhang'

? ? }

? },

? mounted () {

? ? this.sayHello()

? },

? computed: {

? ? MyName() {

? ? ? return `My name is ${this.name}`

? ? }

? },

? methods: {

? ? sayHello() {

? ? ? alert(`Hello ${this.name}`)

? ? },

? }

}

```

## Vuex-Class

vuex-class是基于基于vue-class-component對Vuex提供的裝飾器。它的作者同時也是vue-class-component的主要貢獻者,質量還是有保證的。

```

npm i vuex-class -S

```

使用方法

```js

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

import { State, Action, Getter } from "vuex-class";

@Component

export default class App extends Vue {

? name:string = 'Simon Zhang'

? @State login: boolean;

? @Action initAjax: () => void;

? @Getter load: boolean;

? get isLogin(): boolean {

? ? return this.login;

? }

? mounted() {

? ? this.initAjax();

? }

}

```

類似vue中

```js

export default {

? data() {

? ? return {

? ? ? name: 'Simon Zhang'

? ? }

? },

? mounted() {

? ? this.initAjax()

? },

? computed: {

? ? login() {

? ? ? return this.$store.state.login

? ? },

? ? load() {

? ? ? return this.$store.getters.load

? ? }

? },

? methods: {

? ? initAjax() {

? ? ? this.$store.dispatch('initAjax')

? ? }

? }

}

```

## 支持 mixin

```js

import MixinsType from "@/mixins/xxx";

@Component({

mixins:[MixinsType]

})

```

## 需要注意的事

> 引入部分第三方庫的時候需要額外聲明文件

比如說我想引入vue-lazyload,雖然已經在本地安裝,但是typescript還是提示找不到模塊。原因是typescript是從node_modules/@types目錄下去找模塊聲明,有些庫并沒有提供typescript的聲明文件,所以就需要自己去添加

解決辦法:在`src`目錄下建一個`tools.d.ts`文件,聲明這個模塊即可

```js

declare module 'vue-awesome-swiper' {

? export const swiper: any

? export const swiperSlide: any

}

declare module 'vue-lazyload'

```

> 在需要的window屬性的.ts文件 中添加屬性

```js

declare global {

? interface Window {FileReader:any}

}

window.FileReader = window.FileReader || {}

```

??

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容