vue全家桶 + typescript 起手一個後臺管理系統

時間 2020-02-23

標籤 vue 全家 typescript 一個後臺管理系統欄目應用數學简体版

原文原文鏈接

在家隔離，把以前的項目框架改改，加入typescript的使用。html

功能：登陸，權限菜單，請求封裝， layout配置vue

明人不說暗話，先上git地址git

更多優秀資源參考 github.com/Armour/vue-…github

配置

能夠參考我以前的一篇文章兩行命令! 搞定vue+typescript配置vuex

執行 vue add @vue/typescript完成下面的提示配置typescript

* Use class-style component syntax：  y

* Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? ：y

* Convert all .js files to .ts? Yes

* Allow .js files to be compiled? Yes
複製代碼

warning 建議使用3.6如下的版本

SUPPORTED TYPESCRIPT VERSIONS: >=3.2.1 <3.6.0

YOUR TYPESCRIPT VERSION: 3.7.5
複製代碼

變化

1.tslint

能夠看到全部的.js文件都變成了.ts文件，有語法提示錯誤，逐個進行修改，通常是沒有進行類型定義npm

script部分

須要加上 lang="ts"就能夠用ts進行編寫，能夠看到引入了vue-property-decorator"裝飾器bash

這裏寫幾個示例框架

import { Vue, Component,Prop,Watch} from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue" // 要指定.vue後綴的文件 

@Component({
    HelloWorld
})
export default class Login extends Vue {
    @Prop(Number) readonly propA: number | undefined 
    count:string = "1",
    array:any[] = []
    
    login(){}
    
    get list(){
        return this.array;
    }
    
    @Watch('child')
       onChildChanged(val: string, oldVal: string) {}
       
    mounted(){
        this.login();
    }
}
複製代碼

等同於ide

import HelloWorld from "@/components/HelloWorld"
expoer default {
    components:{
        HelloWorld
    },
    props: {
    propA: {
      type: Number
    },
  },
    data(){
        return{
          count:'1',
          array:[]
        }
    },
    computed: {
    list(){
        return this.array
    },
    watch: {
        child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false
      }
    ],}
    methods:{
        login(){},
        onChildChanged(val, oldVal) {},
    },
    mounted(){
        this.login()
    }
}
複製代碼

具體用法參考官方文檔

vuex

能夠看到引入了"vuex-module-decorators"裝飾器，官方文檔

install

npm install -D vuex-module-decorators
複製代碼

vuex新用法

import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'

@Module
export default class Counter2 extends VuexModule {
  count = 0

  @Mutation
  increment(delta: number) {
    this.count += delta
  }
  @Mutation
  decrement(delta: number) {
    this.count -= delta
  }

  // action 'incr' commits mutation 'increment' when done with return value as payload
  @Action({ commit: 'increment' })
  incr() {
    return 5
  }
  // action 'decr' commits mutation 'decrement' when done with return value as payload
  @Action({ commit: 'decrement' })
  decr() {
    return 5
  }
}
複製代碼

注意⚠️

action調用mutation的兩種用法

this.context.commit('mutationname', payload)

 Dynamic Module
@Module({ dynamic: true, store: store, name: 'mm' })
this.mutationname();
複製代碼