• 周四. 8月 11th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

vue-typescript-element-template使用总结

admin

11月 28, 2021

vue-typescript-element-template使用总结

一、请求
1、定义接口
import request from '@/utils/request'

export const 方法 = (params: params类型, data: data类型) =>
  request({
    url: '地址',
    method: 'get/post/put/delete',
    params,
    data
  })
2、请求拦截器
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000
})

// Request interceptors
service.interceptors.request.use(
  (config) => {
    config.headers['token'] = 'token'

    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// Response interceptors
service.interceptors.response.use(
  (response) => {
    return response
  },
  (error) => {
    return Promise.reject(error)
  }
)

interface IResult<T> {
  code: number
  data: T
  message: string
}

export default function <T>(config: AxiosRequestConfig) {
  return service(config).then((value: AxiosResponse): IResult<T> => {
    return value.data
  })
}
二、组件
1、Component
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'name'
})
export default class extends Vue {
  // 可在模板(template)中使用
  private 属性: 属性类型 = 值;

  // 可在模板(template)中使用
  private 方法(参数: 参数类型): 返回值类型 {
    // 可以使用this
    return 返回值;
  }

  // 生命周期
  created() {
    // 可以使用this
  }
}
2、watch
import { Component, Vue, Watch } from 'vue-property-decorator'

@Component({
  name: 'name'
})
export default class extends Vue {
  @Watch('监听属性')
  private 方法(监听属性: 属性类型) {
    // 可以使用this
  }
}
3、prop
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  name: 'name'
})
export default class extends Vue {

  // !表示非null和非undefined的断言,否则属性的类型后面需要加上undefined类型
  @Prop({ 
    type: Boolean,
    required: true,
    default: false,
    validator(value: any): boolean {
      return !!value
    }
  })
  private 属性!: 类型   
}
4、$emit
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'name'
})
export default class extends Vue {
  private 方法() {
    this.$emit('事件', 参数)
  }
}
5、$route和$router
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'name'
})
export default class extends Vue {
  private 方法() {
    console.log(this.$route)
    this.$router.push(路径)
  }
}
6、computed和store
import { Component, Vue } from 'vue-property-decorator'
import { TestModule } from '@/store/modules/test'

@Component({
  name: 'name'
})
export default class extends Vue {
  get 计算属性() {
    return TestModule
  }
}
7、filters
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'name',
  filters: {
    过滤器() {
      return '返回值'
    }
  }
})
export default class extends Vue {}
三、路由
1、路由配置
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  // 默认'hash'
  // mode: 'history',
  // 滚动行为(前进后退页面记录滚动值)
  scrollBehavior: (to, from, savedPosition) => {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  // 实操,未出结果
  base: 路径,
  routes: [
    {
      path: 路径,
      component: 组件,
      redirect: 重定向路径,
      children: [
        {
          // 组件<keep-alive>时一定要配置,且与组件name一致,且唯一
          name: 'name',
          path: 路径(前面不加/:父路径/子路径),
          component: () => import(组件路径),
          meta: {
            hidden: true,
            title: 'title',
            icon: 'icon',
            affix: true,
            // 与<keep-alive>配合使用
            noCache: true
          }
        }
      ]
    }
  ]
})
2、路由守卫
import router from './router'
import { Route } from 'vue-router'

/**
 * next用法:
 *   next({ path: '/' })
 *   next({ ...to, replace: true })
 *   next(`/login?redirect=${to.path}`)
 *   next()
 */
router.beforeEach(async(to: Route, from: Route, next: any) => {
  next()
})

router.afterEach((to: Route) => {
})
3、main.js
import Vue from 'vue'
import router from '@/router'
import '@/permission'
import App from '@/App.vue'

new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app')
四、存储
1、store
import Vue from 'vue'
import Vuex from 'vuex'
import { IAppState } from './modules/app'

Vue.use(Vuex)

export interface IRootState {
  app: IAppState
}

export default new Vuex.Store<IRootState>({})
2、modules
import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators'
import store from '@/store'

export interface IAppState {
  bool: boolean
}

@Module({ dynamic: true, store, name: 'app' })
class App extends VuexModule implements IAppState {
  public bool = false
  
  // getter
  get getBool(): boolean {
    return this.bool
  }

  @Mutation
  private SET_BOOL(bool: boolean) {
    this.bool = bool
  }

  @Action
  public setBool(bool: boolean) {
    this.SET_BOOL(bool)
  }
}

export const AppModule = getModule(App)
3、main.js
import Vue from 'vue'
import store from '@/store'
import App from '@/App.vue'

new Vue({
  store,
  render: (h) => h(App)
}).$mount('#app')

发表评论

您的电子邮箱地址不会被公开。