English | 简体中文

Ant Design Pro Vue With TypeScript

An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on Ant Design of Vue

Modified from Ant Design Pro Vue

Introduction

Project setup

yarn install

Compiles and hot-reloads for development

yarn dev

Compiles and minifies for production

yarn build

Run your unit tests

yarn test:unit

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

Project development progress

• Ant Design Pro Vue With TypeScript
  • App.vue
  • custom.d.ts
  • main.ts
  • permission.ts
  • shims-ant-design-vue-type.d.ts
  • shims-ant-design-vue.d.ts
  • shims-tsx.d.ts
  • shims-vue.d.ts
  • vue-axios.d.ts
  • api
    • index.ts
    • login.ts
    • manage.ts
  • assets
    • background.svg
    • logo.png
    • logo.svg
      • icons
        • bx-analyse.svg
  • components
    • global.less
    • index.less
    • index.ts
    • ArticleListContent
      • ArticleListContent.vue
      • index.ts
    • AvatarList
      • index.less
      • index.md
      • index.ts
      • Item.vue
      • List.vue
    • Charts
      • Bar.vue
      • chart.less
      • ChartCard.vue
      • Liquid.vue
      • MiniArea.vue
      • MiniBar.vue
      • MiniProgress.vue
      • MiniSmoothArea.vue
      • Radar.vue
      • RankList.vue
      • smooth.area.less
      • TagCloud.vue
      • TransferBar.vue
      • Trend.vue
    • CountDown
      • CountDown.vue
      • index.md
      • index.ts
    • DescriptionList
      • DescriptionList.vue
      • DescriptionListItem.vue
      • index.ts
    • Editor
      • QuillEditor.vue
      • WangEditor.vue
    • Ellipsis
      • Ellipsis.vue
      • index.md
      • index.ts
    • Exception
      • ExceptionPage.vue
      • index.ts
      • type.ts
    • FooterToolbar
      • FooterToolBar.vue
      • index.less
      • index.md
      • index.ts
    • GlobalFooter
      • GlobalFooter.vue
      • index.ts
    • GlobalHeader
      • GlobalHeader.vue
      • index.ts
    • IconSelector
      • icons.ts
      • IconSelector.vue
      • index.ts
      • README.md
    • Menu
      • index.ts
      • menu.render.tsx
      • menu.tsx
      • SideMenu.vue
    • MultiTab
      • events.ts
      • index.less
      • index.ts
      • MultiTab.vue
      • multiTabs.ts
    • NoticeIcon
      • index.ts
      • NoticeIcon.vue
    • NProgress
      • nprogress.less
    • NumberInfo
      • index.less
      • index.md
      • index.ts
      • NumberInfo.vue
    • PageHeader
      • index.ts
      • PageHeader.vue
    • PageLoading
      • index.ts
      • LoadingPlugin.tsx
      • PageLoading.tsx
    • Result
      • index.ts
      • Result.vue
    • Search
      • GlobalSearch.tsx
      • index.less
      • index.ts
    • SettingDrawer
      • index.ts
      • settingConfig.ts
      • SettingDrawer.vue
      • SettingItem.vue
      • themeColor.ts
    • StandardFormRow
      • index.ts
      • StandardFormRow.vue
    • Table
      • index.ts
      • README.md
      • Table.tsx
    • TagSelect
      • index.ts
      • TagSelect.tsx
      • TagSelectOption.tsx
    • TextArea
      • index.ts
      • style.less
      • TextArea.tsx
    • tools
      • Breadcrumb.vue
      • DetailList.vue
      • HeadInfo.vue
      • index.ts
      • LangSelect.vue
      • Logo.vue
      • TwoStepCaptcha.vue
      • UserMenu.vue
    • Tree
      • Tree.tsx
    • Trend
      • index.less
      • index.md
      • index.ts
      • Trend.vue
  • config
    • defaultSettings.ts
  • core
    • bootstrap.ts
    • icons.ts
    • lazy_use.ts
    • use.ts
    • directives
      • action.ts
    • lazy_lib
      • components_use.ts
  • interfaces
    • router-interface.ts
    • service-interface.ts
    • store-interface.ts
  • layouts
    • BasicLayout.vue
    • BlankLayout.vue
    • index.ts
    • PageView.vue
    • RouteView.vue
    • UserLayout.vue
  • mock
    • index.js
    • util.js
    • services
      • article.js
      • auth.js
      • manage.js
      • other.js
      • tagCloud.js
      • user.js
  • router
    • async-router-map.ts
    • generator-routers.ts
    • index.ts
    • README.md
  • shared
    • mixins
      • app-device-enquire.ts
      • mixin-device.ts
      • mixin.ts
  • store
    • getters.ts
    • index.ts
    • mutation-types.ts
    • modules
      • app.ts
      • async-router.ts
      • permission.ts
      • user.ts
  • utils
    • axios.ts
    • device.ts
    • domUtil.ts
    • filter.ts
    • permissions.ts
    • request.ts
    • util.ts
    • utils.less
    • vue-plugins.ts
    • helper
      • permission.ts
  • views
    • 404.vue
    • Home.vue
    • account
      • Login.vue
      • Register.vue
      • RegisterResult.vue
    • dashboard
      • Analysis.vue
      • Monitor.vue
      • TestWork.vue
      • Workplace.vue
    • exception
      • 403.vue
      • 404.vue
      • 500.vue
    • form
      • BasicForm.vue
      • advancedForm
        • AdvancedForm.vue
        • RepositoryForm.vue
        • TaskForm.vue
      • stepForm
        • Step1.vue
        • Step2.vue
        • Step3.vue
        • StepForm.vue
    • list
      • CardList.vue
      • QueryList.vue
      • StandardList.vue
      • TableList.vue
      • modules
        • CreateForm.vue
        • StepByStepModal.vue
        • TaskForm.vue
      • search
        • Applications.vue
        • Article.vue
        • Projects.vue
        • SearchLayout.vue
        • components
          • CardInfo.vue
          • IconText.vue
      • table
        • Edit.vue
        • List.vue
    • other
      • IconSelectorView.vue
      • PermissionList.vue
      • RoleList.vue
      • TableInnerEditList.vue
      • TreeList.vue
      • UserList.vue
      • modules
        • OrgModal.vue
        • RoleModal.vue
    • personal
      • center
        • Index.vue
        • page
          • App.vue
          • Article.vue
          • Project.vue
      • settings
        • AvatarModal.vue
        • BaseSetting.vue
        • Binding.vue
        • Custom.vue
        • Index.vue
        • Notification.vue
        • Security.vue
    • profile
      • advanced
        • Advanced.vue
      • basic
        • Index.vue
    • result
      • Error.vue
      • Success.vue
    • role RoleList.vue

Optimize

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

import Vue from 'vue'

import Component from 'vue-class-component'

any

import MultiTabs from '@/components/NoticeIcon'
import MultiTabs from '@/components/MultiTab/multiTabs'
import LoadingPlugin from '@/components/PageLoading/LoadingPlugin'
import GlobalSearch from '@/components/Search'
import SideMenu from '@/components/Menu/SideMenu.vue'
import GlobalHeader from '@/components/GlobalHeader'
import GlobalFooter from '@/components/GlobalFooter'
import SettingDrawer from '@/components/SettingDrawer'
import PageHeader from '@/components/PageHeader'
import FooterToolBar from '@/components/FooterToolbar'
import Trend from '@/components/Trend'
import AvatarList from '@/components/AvatarList'
import CountDown from '@/components/CountDown/CountDown.vue'
import Ellipsis from '@/components/Ellipsis'
import NumberInfo from '@/components/NumberInfo'
import IconSelector from '@/components/IconSelector'
import STree from '@/components/Tree/Tree'
import { colorList } from '@/components/SettingDrawer/settingConfig'

Lifecycle

beforeCreate() {
  console.log('===================== beforeCreate =================================')
  console.error(this)
}

created() {
  console.log('===================== created =================================')
  console.error(this)
}

beforeMount() {
  console.log('===================== beforeMount =================================')
  console.error(this)
}

mounted() {
  console.log('===================== mounted =================================')
  console.error(this)
}

beforeUpdate() {
  console.log('===================== beforeUpdate =================================')
  console.error(this)
}

updated() {
  console.log('===================== updated =================================')
  console.error(this)
}

beforeDestroy () {
  console.log('===================== beforeDestroy =================================')
  console.error(this)
}

destroyed () {
  console.log('===================== destroyed =================================')
  console.error(this)
}