VUE使用typescript搭建項目

時間 2020-06-08

標籤 vue 使用 typescript 搭建項目简体版

原文原文鏈接

使用腳手架`vueCli`工具搭建選擇自定義模塊

選擇自定義模塊（做者選擇是如下幾種）

注意：這裏一路y下去就好了須要本身選擇的根據本身的喜愛選擇想用的工具 javascript

安裝完成在這裏進行開發還有點吃力

做者推薦三個插件vue
- vue-property-decorator 這個插件是對 vue-class-component(官方)插件的一個擴展 npm插件地址java
  
  經常使用插件方法以下git
  - @Prop
  - @PropSync
  - @Model
  - @Watch
  - @Provide
  - @Inject
  - @ProvideReactive
  - @InjectReactive
  - @Emit
  - @Ref
  - @Component (provided by vue-class-component)
  - Mixins (the helper function named mixins provided by vue-class-component)
- vuex-class綁定vuex和vue的助手插件 npm插件地址es6
  
  經常使用插件方法以下github
  - ```
  State,
  Getter,
  Action,
  Mutation,
  namespace
  複製代碼
```
- vuex-persistedstate 這個插件顧名思義的意思就是vuex狀態持久保存插件具體的使用方法請看文檔 npm地址 vuex-persistedstatevuex
  
  經常使用插件方法以下typescript
  - ```
  plugins: [
      createPersistedState({
        storage: {
          window.sessionStorage
        },
      }),
    ],
  複製代碼
```

好了安裝完成就開始ts版本的開發體驗了npm

組件的使用

須要引入Component方法，能夠在vue-class-component中引入也能夠在本身安裝的插件vue-property-decorator中引入session

注意：在書寫頁面中若是不使用 Component 方法會報錯
導出組件須要使用es6類繼承的方法繼承Vue

如：export default class HelloWorld extends Vue

若果須要定義props須要使用@Prop，使用方法以下：

定義HelloWord.vue組件

import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class HelloWord extend Vue{
	// private使用的是typescript語法，具體理解爲：私有的 
    @Prop() private msg!: string;
}
複製代碼

父組件中如何使用HelloWord.vue組件哪？方法以下：

import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue";
@Component({
    name: 'Home',
    components: {
        HelloWorld
    }
})
export default class Home extends Vue {
    // 常規js中的data屬性能夠直接在下面書寫
    msg = '123'
	// vue聲明周期函數方法和以前同樣
	mounted() {
        console.log(this.msg)
    }
}
複製代碼

computed計算屬性的使用
- 使用 get 和 set

watch的使用使用@Watch裝飾器

import { Watch } from 'vue-property-decorator'
@Wtach('phone')
// 這裏是裝飾器執行的方法
phoneType(newValue, oldValue){
    conosle.log(newValue, oldValue)
}

複製代碼

接下來vueCli使用typescript基礎搭建完畢