diff --git a/mock/role/routes.ts b/mock/role/routes.ts
index b08dd4ff6..3ee330e19 100644
--- a/mock/role/routes.ts
+++ b/mock/role/routes.ts
@@ -249,7 +249,7 @@ export const asyncRoutes = [
       {
         path: 'bar-chart',
         component: 'views/charts/bar-chart',
-        name: 'BarChart',
+        name: 'BarChartDemo',
         meta: {
           title: 'barChart',
           noCache: true
@@ -258,7 +258,7 @@ export const asyncRoutes = [
       {
         path: 'line-chart',
         component: 'views/charts/line-chart',
-        name: 'LineChart',
+        name: 'LineChartDemo',
         meta: {
           title: 'lineChart',
           noCache: true
@@ -267,7 +267,7 @@ export const asyncRoutes = [
       {
         path: 'mixedchart',
         component: 'views/charts/mixed-chart',
-        name: 'MixedChart',
+        name: 'MixedChartDemo',
         meta: {
           title: 'mixedChart',
           noCache: true
diff --git a/src/App.vue b/src/App.vue
index fa646a957..9d213d1e4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class App extends Vue {}
+@Component({
+  name: 'App'
+})
+export default class extends Vue {}
 </script>
diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue
index 5e7a9ec22..645333e81 100644
--- a/src/components/BackToTop/index.vue
+++ b/src/components/BackToTop/index.vue
@@ -17,8 +17,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class BackToTop extends Vue {
+@Component({
+  name: 'BackToTop'
+})
+export default class extends Vue {
   @Prop({ default: 400 }) private visibilityHeight!: number
   @Prop({ default: 'fade' }) private transitionName!: string
   @Prop({ default: 0 }) private backPosition!: number
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index d081b7643..006a9b91a 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -26,8 +26,10 @@ import pathToRegexp from 'path-to-regexp'
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import { RouteRecord, Route } from 'vue-router'
 
-@Component
-export default class Breadcrumb extends Vue {
+@Component({
+  name: 'Breadcrumb'
+})
+export default class extends Vue {
   private breadcrumbs: RouteRecord[] = []
 
   @Watch('$route')
diff --git a/src/components/Charts/BarChart.vue b/src/components/Charts/BarChart.vue
index f40080fbe..0ae3ecc4d 100644
--- a/src/components/Charts/BarChart.vue
+++ b/src/components/Charts/BarChart.vue
@@ -12,8 +12,10 @@ import { Component, Prop } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
 import ResizeMixin from './mixins/resize'
 
-@Component
-export default class BarChart extends mixins(ResizeMixin) {
+@Component({
+  name: 'BarChart'
+})
+export default class extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: 'chart' }) private id!: string
   @Prop({ default: '200px' }) private width!: string
diff --git a/src/components/Charts/LineChart.vue b/src/components/Charts/LineChart.vue
index d399389c4..979df6a1d 100644
--- a/src/components/Charts/LineChart.vue
+++ b/src/components/Charts/LineChart.vue
@@ -12,8 +12,10 @@ import { Component, Prop } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
 import ResizeMixin from './mixins/resize'
 
-@Component
-export default class LineChart extends mixins(ResizeMixin) {
+@Component({
+  name: 'LineChart'
+})
+export default class extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: 'chart' }) private id!: string
   @Prop({ default: '200px' }) private width!: string
diff --git a/src/components/Charts/MixedChart.vue b/src/components/Charts/MixedChart.vue
index 8c999c789..3f4ab41d5 100644
--- a/src/components/Charts/MixedChart.vue
+++ b/src/components/Charts/MixedChart.vue
@@ -12,8 +12,10 @@ import { Component, Prop } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
 import ResizeMixin from './mixins/resize'
 
-@Component
-export default class MixedChart extends mixins(ResizeMixin) {
+@Component({
+  name: 'MixedChart'
+})
+export default class extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: 'chart' }) private id!: string
   @Prop({ default: '200px' }) private width!: string
diff --git a/src/components/Charts/mixins/resize.ts b/src/components/Charts/mixins/resize.ts
index 4ea73ec96..158077379 100644
--- a/src/components/Charts/mixins/resize.ts
+++ b/src/components/Charts/mixins/resize.ts
@@ -1,8 +1,10 @@
 import { ECharts } from 'echarts'
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class ResizeMixin extends Vue {
+@Component({
+  name: 'ResizeMixin'
+})
+export default class extends Vue {
   protected chart!: ECharts | null
   private sidebarElm?: Element
 
diff --git a/src/components/DraggableKanban/index.vue b/src/components/DraggableKanban/index.vue
index 055d10804..6971e50e2 100644
--- a/src/components/DraggableKanban/index.vue
+++ b/src/components/DraggableKanban/index.vue
@@ -24,11 +24,12 @@ import Draggable from 'vuedraggable'
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
 @Component({
+  name: 'DraggableKanban',
   components: {
     Draggable
   }
 })
-export default class DraggableKanban extends Vue {
+export default class extends Vue {
   @Prop({ default: 'header' }) private headerText!: string
   @Prop({ default: () => [] }) private list!: object[]
   @Prop({ default: () => {} }) private options!: object
diff --git a/src/components/DraggableList/index.vue b/src/components/DraggableList/index.vue
index 570f4c650..296326966 100644
--- a/src/components/DraggableList/index.vue
+++ b/src/components/DraggableList/index.vue
@@ -65,11 +65,12 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 import { IArticleData } from '@/api/types'
 
 @Component({
+  name: 'DraggableList',
   components: {
     Draggable
   }
 })
-export default class DraggableList extends Vue {
+export default class extends Vue {
   @Prop({ default: () => [] }) private list1!: IArticleData[]
   @Prop({ default: () => [] }) private list2!: IArticleData[]
   @Prop({ default: 'list1' }) private list1Title!: string
diff --git a/src/components/DraggableSelect/index.vue b/src/components/DraggableSelect/index.vue
index 6c2c74b87..35569018f 100644
--- a/src/components/DraggableSelect/index.vue
+++ b/src/components/DraggableSelect/index.vue
@@ -16,8 +16,10 @@ import Sortable from 'sortablejs'
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Select } from 'element-ui'
 
-@Component
-export default class DraggableSelect extends Vue {
+@Component({
+  name: 'DraggableSelect'
+})
+export default class extends Vue {
   @Prop({ required: true }) private value!: string[]
 
   private sortable: Sortable | null = null
diff --git a/src/components/DropdownMenu/index.vue b/src/components/DropdownMenu/index.vue
index 85070deb2..1de59ddd9 100644
--- a/src/components/DropdownMenu/index.vue
+++ b/src/components/DropdownMenu/index.vue
@@ -27,8 +27,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class DropdownMenu extends Vue {
+@Component({
+  name: 'DropdownMenu'
+})
+export default class extends Vue {
   @Prop({ default: () => [] }) private items!: object[]
   @Prop({ default: 'vue' }) private title!: string
 
diff --git a/src/components/Dropzone/index.vue b/src/components/Dropzone/index.vue
index d1d5ae913..27891283a 100644
--- a/src/components/Dropzone/index.vue
+++ b/src/components/Dropzone/index.vue
@@ -27,11 +27,12 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 import { SettingsModule } from '@/store/modules/settings'
 
 @Component({
+  name: 'Dropzone',
   components: {
     VueDropzone
   }
 })
-export default class Dropzone extends Vue {
+export default class extends Vue {
   // You can add more Prop, see: https://www.dropzonejs.com/#configuration
   @Prop({ required: true }) private id!: string
   @Prop({ required: true }) private url!: string
diff --git a/src/components/ErrorLog/index.vue b/src/components/ErrorLog/index.vue
index 47cb3b0e4..8ef210055 100644
--- a/src/components/ErrorLog/index.vue
+++ b/src/components/ErrorLog/index.vue
@@ -78,8 +78,10 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { ErrorLogModule } from '@/store/modules/error-log'
 
-@Component
-export default class ErrorLog extends Vue {
+@Component({
+  name: 'ErrorLog'
+})
+export default class extends Vue {
   private dialogTableVisible = false
 
   get errorLogs() {
diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue
index ed71cd54e..26d4f83a6 100644
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@@ -31,8 +31,10 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class GithubCorner extends Vue {}
+@Component({
+  name: 'GithubCorner'
+})
+export default class extends Vue {}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index f81087425..5a28314b7 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -14,8 +14,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Hamburger extends Vue {
+@Component({
+  name: 'Hamburger'
+})
+export default class extends Vue {
   @Prop({ default: false }) private isActive!: boolean
 
   private toggleClick() {
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index 33f43bde6..f5e0bc698 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -39,8 +39,10 @@ import { AppModule } from '@/store/modules/app'
 import { PermissionModule } from '@/store/modules/permission'
 import i18n from '@/lang' // Internationalization
 
-@Component
-export default class HeaderSearch extends Vue {
+@Component({
+  name: 'HeaderSearch'
+})
+export default class extends Vue {
   private search = ''
   private show = false
   private options: RouteConfig[] = []
diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue
index c9d6709aa..4147a3373 100644
--- a/src/components/JsonEditor/index.vue
+++ b/src/components/JsonEditor/index.vue
@@ -18,8 +18,10 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 /* eslint-disable import/no-webpack-loader-syntax */
 require('script-loader!jsonlint')
 
-@Component
-export default class JsonEditor extends Vue {
+@Component({
+  name: 'JsonEditor'
+})
+export default class extends Vue {
   @Prop({ required: true }) private value!: string
 
   private jsonEditor?: Editor
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
index 59b13a847..8b2e4c925 100644
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@@ -43,8 +43,10 @@
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
 
-@Component
-export default class Login extends Vue {
+@Component({
+  name: 'Login'
+})
+export default class extends Vue {
   get language() {
     return AppModule.language
   }
diff --git a/src/components/MarkdownEditor/index.vue b/src/components/MarkdownEditor/index.vue
index bf1d9853c..e9b5fae07 100644
--- a/src/components/MarkdownEditor/index.vue
+++ b/src/components/MarkdownEditor/index.vue
@@ -12,8 +12,10 @@ import TuiEditor from 'tui-editor'
 
 const defaultId = () => 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
 
-@Component
-export default class MarkdownEditor extends Vue {
+@Component({
+  name: 'MarkdownEditor'
+})
+export default class extends Vue {
   @Prop({ required: true }) private value!: string
   @Prop({ default: defaultId }) private id!: string
   @Prop({ default: () => defaultOptions }) private options!: tuiEditor.IEditorOptions
diff --git a/src/components/MaterialInput/index.vue b/src/components/MaterialInput/index.vue
index 6369b72d1..aebe98b81 100644
--- a/src/components/MaterialInput/index.vue
+++ b/src/components/MaterialInput/index.vue
@@ -120,8 +120,10 @@
 // Source: https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 
-@Component
-export default class MaterialInput extends Vue {
+@Component({
+  name: 'MaterialInput'
+})
+export default class extends Vue {
   @Prop({ default: '' }) private icon!: string
   @Prop({ default: '' }) private name!: string
   @Prop({ default: 'text' }) private type!: string
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index e3f2c815f..975f09015 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -21,8 +21,10 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { scrollTo } from '@/utils/scroll-to'
 
-@Component
-export default class Pagination extends Vue {
+@Component({
+  name: 'Pagination'
+})
+export default class extends Vue {
   @Prop({ required: true }) private total!: number
   @Prop({ default: 1 }) private page!: number
   @Prop({ default: 20 }) private limit!: number
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
index d57230aaf..a82352629 100644
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@@ -18,8 +18,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class PanThumb extends Vue {
+@Component({
+  name: 'PanThumb'
+})
+export default class extends Vue {
   @Prop({ required: true }) private image!: string
   @Prop({ default: '150px' }) private width!: string
   @Prop({ default: '150px' }) private height!: string
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index 9e5334a20..6b400313d 100644
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -25,8 +25,10 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 import { addClass, removeClass } from '@/utils'
 import { SettingsModule } from '@/store/modules/settings'
 
-@Component
-export default class RightPanel extends Vue {
+@Component({
+  name: 'RightPanel'
+})
+export default class extends Vue {
   @Prop({ default: false }) private clickNotClose!: boolean
   @Prop({ default: 250 }) private buttonTop!: number
 
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index cfed1cf29..5878752b3 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -13,8 +13,10 @@ import { Component, Vue } from 'vue-property-decorator'
 
 const sf = screenfull
 
-@Component
-export default class Screenfull extends Vue {
+@Component({
+  name: 'Screenfull'
+})
+export default class extends Vue {
   private isFullscreen = false
 
   mounted() {
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index 4453be709..d3ae2eac2 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -29,8 +29,10 @@ import { Component, Vue } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
 import { TagsViewModule } from '@/store/modules/tags-view'
 
-@Component
-export default class SizeSelect extends Vue {
+@Component({
+  name: 'SizeSelect'
+})
+export default class extends Vue {
   private sizeOptions = [
     { label: 'Default', value: 'default' },
     { label: 'Medium', value: 'medium' },
diff --git a/src/components/Sticky/index.vue b/src/components/Sticky/index.vue
index db92e1b8a..ff1e4b2da 100644
--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
@@ -14,8 +14,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Sticky extends Vue {
+@Component({
+  name: 'Sticky'
+})
+export default class extends Vue {
   @Prop({ default: 0 }) private stickyTop!: number
   @Prop({ default: 1 }) private zIndex!: number
   @Prop({ default: '' }) private className!: string
diff --git a/src/components/TextHoverEffect/Mallki.vue b/src/components/TextHoverEffect/Mallki.vue
index 261c57cee..c16e44d5a 100644
--- a/src/components/TextHoverEffect/Mallki.vue
+++ b/src/components/TextHoverEffect/Mallki.vue
@@ -13,8 +13,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class GithubCorner extends Vue {
+@Component({
+  name: 'Mallki'
+})
+export default class extends Vue {
   @Prop({ default: '' }) private className!: string
   @Prop({ default: 'vue-typescript-admin' }) private text!: string
 }
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index 921c4a5d3..faf969d1b 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -14,8 +14,10 @@ import { SettingsModule } from '@/store/modules/settings'
 const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color
 
-@Component
-export default class ThemePicker extends Vue {
+@Component({
+  name: 'ThemePicker'
+})
+export default class extends Vue {
   private chalk = '' // The content of theme-chalk css
   private theme = ''
 
diff --git a/src/components/Tinymce/components/EditorImage.vue b/src/components/Tinymce/components/EditorImage.vue
index a3e80559e..1a8fa0247 100644
--- a/src/components/Tinymce/components/EditorImage.vue
+++ b/src/components/Tinymce/components/EditorImage.vue
@@ -53,8 +53,10 @@ export interface IUploadObject {
   height: number
 }
 
-@Component
-export default class EditorImageUpload extends Vue {
+@Component({
+  name: 'EditorImageUpload'
+})
+export default class extends Vue {
   @Prop({ required: true }) private color!: string
 
   private dialogVisible = false
diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index 4254b4c55..c97df6983 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -66,12 +66,13 @@ import { plugins, toolbar } from './config'
 const defaultId = () => 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
 
 @Component({
+  name: 'Tinymce',
   components: {
     EditorImageUpload,
     TinymceEditor
   }
 })
-export default class Tinymce extends Vue {
+export default class extends Vue {
   @Prop({ required: true }) private value!: string
   @Prop({ default: defaultId }) private id!: string
   @Prop({ default: () => [] }) private toolbar!: string[]
diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue
index 28c5c57f6..c08490ae4 100644
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@@ -31,8 +31,10 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import XLSX from 'xlsx'
 
-@Component
-export default class UploadExcel extends Vue {
+@Component({
+  name: 'UploadExcel'
+})
+export default class extends Vue {
   @Prop({ required: true }) private beforeUpload!: Function
   @Prop({ required: true }) private onSuccess!: Function
 
diff --git a/src/components/UploadImage/index.vue b/src/components/UploadImage/index.vue
index b394a2436..2a1054e5d 100644
--- a/src/components/UploadImage/index.vue
+++ b/src/components/UploadImage/index.vue
@@ -48,8 +48,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class UploadImage extends Vue {
+@Component({
+  name: 'UploadImage'
+})
+export default class extends Vue {
   @Prop({ default: '' }) private value!: string
 
   private tempUrl = ''
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 520193b9b..31f2a6bcf 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -15,8 +15,10 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { TagsViewModule } from '@/store/modules/tags-view'
 
-@Component
-export default class AppMain extends Vue {
+@Component({
+  name: 'AppMain'
+})
+export default class extends Vue {
   get cachedViews() {
     return TagsViewModule.cachedViews
   }
diff --git a/src/layout/components/Navbar/index.vue b/src/layout/components/Navbar/index.vue
index f2510a142..7be2e31b6 100644
--- a/src/layout/components/Navbar/index.vue
+++ b/src/layout/components/Navbar/index.vue
@@ -80,6 +80,7 @@ import Screenfull from '@/components/Screenfull/index.vue'
 import SizeSelect from '@/components/SizeSelect/index.vue'
 
 @Component({
+  name: 'Navbar',
   components: {
     Breadcrumb,
     ErrorLog,
@@ -90,7 +91,7 @@ import SizeSelect from '@/components/SizeSelect/index.vue'
     SizeSelect
   }
 })
-export default class Navbar extends Vue {
+export default class extends Vue {
   get sidebar() {
     return AppModule.sidebar
   }
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 230715467..5a9827da3 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -54,11 +54,12 @@ import { SettingsModule } from '@/store/modules/settings'
 import ThemePicker from '@/components/ThemePicker/index.vue'
 
 @Component({
+  name: 'Settings',
   components: {
     ThemePicker
   }
 })
-export default class Settings extends Vue {
+export default class extends Vue {
   get fixedHeader() {
     return SettingsModule.fixedHeader
   }
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 41443265c..d6e87be00 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -66,7 +66,7 @@ import SidebarItemLink from './SidebarItemLink.vue'
     SidebarItemLink
   }
 })
-export default class SidebarItem extends Vue {
+export default class extends Vue {
   @Prop({ required: true }) private item!: RouteConfig
   @Prop({ default: false }) private isCollapse!: boolean
   @Prop({ default: true }) private isFirstLevel!: boolean
diff --git a/src/layout/components/Sidebar/SidebarItemLink.vue b/src/layout/components/Sidebar/SidebarItemLink.vue
index 615e79bdd..a6f68249f 100644
--- a/src/layout/components/Sidebar/SidebarItemLink.vue
+++ b/src/layout/components/Sidebar/SidebarItemLink.vue
@@ -20,11 +20,12 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 import { isExternal } from '@/utils/validate'
 
 @Component({
+  name: 'SidebarItemLink',
   methods: {
     isExternal
   }
 })
-export default class SidebarItemLink extends Vue {
+export default class extends Vue {
   @Prop({ required: true }) private to!: string
 }
 </script>
diff --git a/src/layout/components/Sidebar/SidebarLogo.vue b/src/layout/components/Sidebar/SidebarLogo.vue
index 691c5ba76..77afba591 100644
--- a/src/layout/components/Sidebar/SidebarLogo.vue
+++ b/src/layout/components/Sidebar/SidebarLogo.vue
@@ -36,8 +36,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class SidebarLogo extends Vue {
+@Component({
+  name: 'SidebarLogo'
+})
+export default class extends Vue {
   @Prop({ required: true }) private collapse!: boolean
 
   private title = 'Vue Typescript Admin'
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index ffa5feacb..0c3a3c6e6 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -37,12 +37,13 @@ import SidebarLogo from './SidebarLogo.vue'
 import variables from '@/styles/_variables.scss'
 
 @Component({
+  name: 'SideBar',
   components: {
     SidebarItem,
     SidebarLogo
   }
 })
-export default class SideBar extends Vue {
+export default class extends Vue {
   get sidebar() {
     return AppModule.sidebar
   }
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index af9701bf2..b2b70deac 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -14,8 +14,10 @@ import { Component, Vue } from 'vue-property-decorator'
 
 const tagSpacing = 4
 
-@Component
-export default class ScrollPane extends Vue {
+@Component({
+  name: 'ScrollPane'
+})
+export default class extends Vue {
   private handleScroll(e: MouseWheelEvent) {
     const eventDelta = (e as any).wheelDelta || -e.deltaY * 40
     const scrollContainer = this.$refs.scrollContainer as Vue
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index ab8a331e1..4a75c7fb5 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -55,17 +55,17 @@
 import path from 'path'
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import VueRouter, { Route, RouteRecord, RouteConfig } from 'vue-router'
-import { ElBreadcrumbItem } from 'element-ui/types/breadcrumb-item'
 import { PermissionModule } from '@/store/modules/permission'
 import { TagsViewModule, ITagView } from '@/store/modules/tags-view'
 import ScrollPane from './ScrollPane.vue'
 
 @Component({
+  name: 'TagsView',
   components: {
     ScrollPane
   }
 })
-export default class TagsView extends Vue {
+export default class extends Vue {
   private visible: boolean = false
   private top: number = 0
   private left: number = 0
@@ -145,7 +145,7 @@ export default class TagsView extends Vue {
   }
 
   private moveToCurrentTag() {
-    const tags = this.$refs.tag as ElBreadcrumbItem[]
+    const tags = this.$refs.tag as any[] // TODO: better typescript support for router-link
     this.$nextTick(() => {
       for (const tag of tags) {
         if ((tag.to as ITagView).path === this.$route.path) {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index efc2f03c9..1fee8a6a4 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -35,6 +35,7 @@ import RightPanel from '@/components/RightPanel/index.vue'
 import ResizeMixin from './mixin/resize'
 
 @Component({
+  name: 'Layout',
   components: {
     AppMain,
     Navbar,
@@ -44,7 +45,7 @@ import ResizeMixin from './mixin/resize'
     TagsView
   }
 })
-export default class Layout extends mixins(ResizeMixin) {
+export default class extends mixins(ResizeMixin) {
   get classObj() {
     return {
       hideSidebar: !this.sidebar.opened,
diff --git a/src/layout/mixin/resize.ts b/src/layout/mixin/resize.ts
index ef664687e..69df007ac 100644
--- a/src/layout/mixin/resize.ts
+++ b/src/layout/mixin/resize.ts
@@ -3,8 +3,10 @@ import { AppModule, DeviceType } from '@/store/modules/app'
 
 const WIDTH = 992 // refer to Bootstrap's responsive design
 
-@Component
-export default class ResizeMixin extends Vue {
+@Component({
+  name: 'ResizeMixin'
+})
+export default class extends Vue {
   get device() {
     return AppModule.device
   }
diff --git a/src/router/index.ts b/src/router/index.ts
index f61b72e7b..0cf979a23 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -14,12 +14,12 @@ Vue.use(Router)
 
 /*
   Note: sub-menu only appear when children.length>=1
-  Detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+  Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 */
 
 /*
-  name:'router-name'             the name is required when using <keep-alive>
-    https://vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
+  name:'router-name'             the name field is required when using <keep-alive>, it should also match its component's name property
+                                 detail see : https://vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
   redirect:                      if set to 'noredirect', no redirect action will be trigger when clicking the breadcrumb
   meta: {
     roles: ['admin', 'editor']   will control the page roles (allow setting multiple roles)
@@ -253,7 +253,7 @@ export const asyncRoutes: RouteConfig[] = [
       {
         path: '401',
         component: () => import(/* webpackChunkName: "error-page-401" */ '@/views/error-page/401.vue'),
-        name: 'ErrorPage401',
+        name: 'Page401',
         meta: {
           title: 'page401',
           noCache: true
@@ -262,7 +262,7 @@ export const asyncRoutes: RouteConfig[] = [
       {
         path: '404',
         component: () => import(/* webpackChunkName: "error-page-404" */ '@/views/error-page/404.vue'),
-        name: 'ErrorPage404',
+        name: 'Page404',
         meta: {
           title: 'page404',
           noCache: true
diff --git a/src/router/modules/charts.ts b/src/router/modules/charts.ts
index 7f0aea204..527aff9e6 100644
--- a/src/router/modules/charts.ts
+++ b/src/router/modules/charts.ts
@@ -14,7 +14,7 @@ const chartsRouter: RouteConfig = {
     {
       path: 'bar-chart',
       component: () => import(/* webpackChunkName: "bar-chart" */ '@/views/charts/bar-chart.vue'),
-      name: 'BarChart',
+      name: 'BarChartDemo',
       meta: {
         title: 'barChart',
         noCache: true
@@ -23,7 +23,7 @@ const chartsRouter: RouteConfig = {
     {
       path: 'line-chart',
       component: () => import(/* webpackChunkName: "line-chart" */ '@/views/charts/line-chart.vue'),
-      name: 'LineChart',
+      name: 'LineChartDemo',
       meta: {
         title: 'lineChart',
         noCache: true
@@ -32,7 +32,7 @@ const chartsRouter: RouteConfig = {
     {
       path: 'mixed-chart',
       component: () => import(/* webpackChunkName: "mixed-chart" */ '@/views/charts/mixed-chart.vue'),
-      name: 'MixedChart',
+      name: 'MixedChartDemo',
       meta: {
         title: 'mixedChart',
         noCache: true
diff --git a/src/utils/cookies.ts b/src/utils/cookies.ts
index 0d749ef84..b27d48048 100644
--- a/src/utils/cookies.ts
+++ b/src/utils/cookies.ts
@@ -1,7 +1,7 @@
 import Cookies from 'js-cookie'
 
 // App
-const sidebarStatusKey = 'sidebarStatus'
+const sidebarStatusKey = 'sidebar_status'
 export const getSidebarStatus = () => Cookies.get(sidebarStatusKey)
 export const setSidebarStatus = (sidebarStatus: string) => Cookies.set(sidebarStatusKey, sidebarStatus)
 
diff --git a/src/views/charts/bar-chart.vue b/src/views/charts/bar-chart.vue
index 11eb18dec..2d1f32da1 100644
--- a/src/views/charts/bar-chart.vue
+++ b/src/views/charts/bar-chart.vue
@@ -12,11 +12,12 @@ import { Component, Vue } from 'vue-property-decorator'
 import BarChart from '@/components/Charts/BarChart.vue'
 
 @Component({
+  name: 'BarChartDemo',
   components: {
     BarChart
   }
 })
-export default class BarChartDemo extends Vue {}
+export default class extends Vue {}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/charts/line-chart.vue b/src/views/charts/line-chart.vue
index f81d4bf3e..de3fbcdad 100644
--- a/src/views/charts/line-chart.vue
+++ b/src/views/charts/line-chart.vue
@@ -12,11 +12,12 @@ import { Component, Vue } from 'vue-property-decorator'
 import LineChart from '@/components/Charts/LineChart.vue'
 
 @Component({
+  name: 'LineChartDemo',
   components: {
     LineChart
   }
 })
-export default class LineChartDemo extends Vue {}
+export default class extends Vue {}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/charts/mixed-chart.vue b/src/views/charts/mixed-chart.vue
index 91b1699e8..8f98d992f 100644
--- a/src/views/charts/mixed-chart.vue
+++ b/src/views/charts/mixed-chart.vue
@@ -12,11 +12,12 @@ import { Component, Vue } from 'vue-property-decorator'
 import MixedChart from '@/components/Charts/MixedChart.vue'
 
 @Component({
+  name: 'MixedChartDemo',
   components: {
     MixedChart
   }
 })
-export default class MixedChartDemo extends Vue {}
+export default class extends Vue {}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue
index 19c31e562..92add0f78 100644
--- a/src/views/clipboard/index.vue
+++ b/src/views/clipboard/index.vue
@@ -46,6 +46,7 @@ import { clipboard } from '@/directives/clipboard' // use clipboard by v-directi
 import { handleClipboard, clipboardSuccess } from '@/utils/clipboard' // use clipboard directly
 
 @Component({
+  name: 'Clipboard',
   directives: {
     clipboard
   },
@@ -54,7 +55,7 @@ import { handleClipboard, clipboardSuccess } from '@/utils/clipboard' // use cli
     clipboardSuccess
   }
 })
-export default class Clipboard extends Vue {
+export default class extends Vue {
   private activeName = 'directly'
   private inputData = 'https://github.com/Armour/vue-typescript-admin-template'
 }
diff --git a/src/views/components-demo/back-to-top.vue b/src/views/components-demo/back-to-top.vue
index 01f74ffa6..6cf474e9f 100644
--- a/src/views/components-demo/back-to-top.vue
+++ b/src/views/components-demo/back-to-top.vue
@@ -133,11 +133,12 @@ import { Component, Vue } from 'vue-property-decorator'
 import BackToTop from '@/components/BackToTop/index.vue'
 
 @Component({
+  name: 'BackToTopDemo',
   components: {
     BackToTop
   }
 })
-export default class BackToTopDemo extends Vue {
+export default class extends Vue {
   private myBackToTopStyle = {
     right: '50px',
     bottom: '50px',
diff --git a/src/views/components-demo/count-to.vue b/src/views/components-demo/count-to.vue
index f05b3f0d5..9578f4c82 100644
--- a/src/views/components-demo/count-to.vue
+++ b/src/views/components-demo/count-to.vue
@@ -120,11 +120,12 @@ import { Component, Vue } from 'vue-property-decorator'
 import countTo from 'vue-count-to'
 
 @Component({
+  name: 'CountToDemo',
   components: {
     countTo
   }
 })
-export default class CountToDemo extends Vue {
+export default class extends Vue {
   private setStartVal = 0
   private setEndVal = 2017
   private setDuration = 4000
diff --git a/src/views/components-demo/draggable-dialog.vue b/src/views/components-demo/draggable-dialog.vue
index 13e563cac..e8539d5de 100644
--- a/src/views/components-demo/draggable-dialog.vue
+++ b/src/views/components-demo/draggable-dialog.vue
@@ -50,11 +50,12 @@ import { elDraggableDialog } from '@/directives/el-draggable-dialog'
 import { Select } from 'element-ui'
 
 @Component({
+  name: 'DraggableDialogDemo',
   directives: {
     elDraggableDialog
   }
 })
-export default class DraggableDialogDemo extends Vue {
+export default class extends Vue {
   private dialogTableVisible = false
   private options = [
     { value: '选项1', label: '黄金糕' },
diff --git a/src/views/components-demo/draggable-kanban.vue b/src/views/components-demo/draggable-kanban.vue
index 23ef6957b..7323bd3dd 100644
--- a/src/views/components-demo/draggable-kanban.vue
+++ b/src/views/components-demo/draggable-kanban.vue
@@ -29,11 +29,12 @@ import { Component, Vue } from 'vue-property-decorator'
 import DraggableKanban from '@/components/DraggableKanban/index.vue'
 
 @Component({
+  name: 'DraggableKanbanDemo',
   components: {
     DraggableKanban
   }
 })
-export default class DraggableKanbanDemo extends Vue {
+export default class extends Vue {
   private group = 'mission'
   private list1 = [
     { name: 'Mission', id: 1 },
diff --git a/src/views/components-demo/draggable-list.vue b/src/views/components-demo/draggable-list.vue
index b6bc34b25..0b0d419ae 100644
--- a/src/views/components-demo/draggable-list.vue
+++ b/src/views/components-demo/draggable-list.vue
@@ -24,11 +24,12 @@ import { getArticles } from '@/api/articles'
 import DraggableList from '@/components/DraggableList/index.vue'
 
 @Component({
+  name: 'DraggableListDemo',
   components: {
     DraggableList
   }
 })
-export default class DraggableListDemo extends Vue {
+export default class extends Vue {
   private list1 = []
   private list2 = []
   private listLoading = true
diff --git a/src/views/components-demo/draggable-select.vue b/src/views/components-demo/draggable-select.vue
index cdfc15b21..3d6df83cd 100644
--- a/src/views/components-demo/draggable-select.vue
+++ b/src/views/components-demo/draggable-select.vue
@@ -31,11 +31,12 @@ import { Component, Vue } from 'vue-property-decorator'
 import DraggableSelect from '@/components/DraggableSelect/index.vue'
 
 @Component({
+  name: 'DraggableSelectDemo',
   components: {
     DraggableSelect
   }
 })
-export default class DraggableSelectDemo extends Vue {
+export default class extends Vue {
   private value = ['Apple', 'Banana', 'Orange']
   private options = [{
     value: 'Apple',
diff --git a/src/views/components-demo/dropzone.vue b/src/views/components-demo/dropzone.vue
index a9d5ace2f..5d2939bbb 100644
--- a/src/views/components-demo/dropzone.vue
+++ b/src/views/components-demo/dropzone.vue
@@ -23,11 +23,12 @@ import { Component, Vue } from 'vue-property-decorator'
 import Dropzone from '@/components/Dropzone/index.vue'
 
 @Component({
+  name: 'DropzoneDemo',
   components: {
     Dropzone
   }
 })
-export default class DropzoneDemo extends Vue {
+export default class extends Vue {
   private dropzoneSuccess(file: File, response: any) {
     this.$message({ message: 'Upload success', type: 'success' })
   }
diff --git a/src/views/components-demo/json-editor.vue b/src/views/components-demo/json-editor.vue
index 94b3efbac..7694b8050 100644
--- a/src/views/components-demo/json-editor.vue
+++ b/src/views/components-demo/json-editor.vue
@@ -26,11 +26,12 @@ import JsonEditor from '@/components/JsonEditor/index.vue'
 const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
 
 @Component({
+  name: 'JsonEditorDemo',
   components: {
     JsonEditor
   }
 })
-export default class JsonEditorDemo extends Vue {
+export default class extends Vue {
   private value = JSON.parse(jsonData)
 }
 </script>
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
index f0501bb7a..68fff6fa1 100644
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@@ -88,11 +88,12 @@ const content = `
 `
 
 @Component({
+  name: 'MarkdownDemo',
   components: {
     MarkdownEditor
   }
 })
-export default class MarkdownDemo extends Vue {
+export default class extends Vue {
   private content1 = content
   private content2 = content
   private content3 = content
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index 3f59e9fae..0b5b48ac8 100644
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -205,6 +205,7 @@ import DropdownMenu from '@/components/DropdownMenu/index.vue'
 import { waves } from '@/directives/waves'
 
 @Component({
+  name: 'ComponentMixinDemo',
   components: {
     DropdownMenu,
     MaterialInput,
@@ -215,7 +216,7 @@ import { waves } from '@/directives/waves'
     waves
   }
 })
-export default class ComponentMixinDemo extends Vue {
+export default class extends Vue {
   private validateLength = (rule: any, value: string, callback: Function) => {
     if (value.length !== 6) {
       callback(new Error('请输入六个字符'))
diff --git a/src/views/components-demo/sticky.vue b/src/views/components-demo/sticky.vue
index be3721d8f..3a025912b 100644
--- a/src/views/components-demo/sticky.vue
+++ b/src/views/components-demo/sticky.vue
@@ -134,11 +134,12 @@ import { Component, Vue } from 'vue-property-decorator'
 import Sticky from '@/components/Sticky/index.vue'
 
 @Component({
+  name: 'StickyDemo',
   components: {
     Sticky
   }
 })
-export default class StickyDemo extends Vue {
+export default class extends Vue {
   private time = Date
   private url = ''
   private platforms = ['a-platform']
diff --git a/src/views/components-demo/tinymce.vue b/src/views/components-demo/tinymce.vue
index 79195f657..faae40d0f 100644
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@@ -10,6 +10,7 @@
     </aside>
     <div>
       <tinymce
+        v-if="tinymceActive"
         v-model="content"
         :height="400"
       />
@@ -27,15 +28,25 @@ import { Component, Vue } from 'vue-property-decorator'
 import Tinymce from '@/components/Tinymce/index.vue'
 
 @Component({
+  name: 'TinymceDemo',
   components: {
     Tinymce
   }
 })
-export default class MarkdoTinymceDemownDemo extends Vue {
+export default class extends Vue {
   private content =
     `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /><ul>
       <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li><li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
     </ul>`
+  private tinymceActive = true
+
+  deactivated() {
+    this.tinymceActive = false
+  }
+
+  activated() {
+    this.tinymceActive = true
+  }
 }
 </script>
 
diff --git a/src/views/dashboard/admin/components/BarChart.vue b/src/views/dashboard/admin/components/BarChart.vue
index 4ad129195..c702290c2 100644
--- a/src/views/dashboard/admin/components/BarChart.vue
+++ b/src/views/dashboard/admin/components/BarChart.vue
@@ -13,8 +13,10 @@ import ResizeMixin from '@/components/Charts/mixins/resize'
 
 const animationDuration = 6000
 
-@Component
-export default class BarChart extends mixins(ResizeMixin) {
+@Component({
+  name: 'BarChart'
+})
+export default class extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: '100%' }) private width!: string
   @Prop({ default: '300px' }) private height!: string
diff --git a/src/views/dashboard/admin/components/BoxCard.vue b/src/views/dashboard/admin/components/BoxCard.vue
index 41d5f5f4f..fff9eccc2 100644
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ b/src/views/dashboard/admin/components/BoxCard.vue
@@ -51,12 +51,13 @@ import PanThumb from '@/components/PanThumb/index.vue'
 import Mallki from '@/components/TextHoverEffect/Mallki.vue'
 
 @Component({
+  name: 'BoxCard',
   components: {
     PanThumb,
     Mallki
   }
 })
-export default class BoxCard extends Vue {
+export default class extends Vue {
   get name() {
     return UserModule.name
   }
diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue
index 4a755424f..49217af7c 100644
--- a/src/views/dashboard/admin/components/LineChart.vue
+++ b/src/views/dashboard/admin/components/LineChart.vue
@@ -11,8 +11,10 @@ import { Component, Prop, Watch } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
 import ResizeMixin from '@/components/Charts/mixins/resize'
 
-@Component
-export default class LineChart extends mixins(ResizeMixin) {
+@Component({
+  name: 'LineChart'
+})
+export default class extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: '100%' }) private width!: string
   @Prop({ default: '350px' }) private height!: string
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
index b9a9440ef..7e4329df3 100644
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -127,11 +127,12 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 import CountTo from 'vue-count-to'
 
 @Component({
+  name: 'PanelGroup',
   components: {
     CountTo
   }
 })
-export default class PanelGroup extends Vue {
+export default class extends Vue {
   private handleSetLineChartData(type: string) {
     this.$emit('handleSetLineChartData', type)
   }
diff --git a/src/views/dashboard/admin/components/PieChart.vue b/src/views/dashboard/admin/components/PieChart.vue
index c78a0516c..93f1ec298 100644
--- a/src/views/dashboard/admin/components/PieChart.vue
+++ b/src/views/dashboard/admin/components/PieChart.vue
@@ -11,8 +11,10 @@ import { Component, Prop } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
 import ResizeMixin from '@/components/Charts/mixins/resize'
 
-@Component
-export default class PieChart extends mixins(ResizeMixin) {
+@Component({
+  name: 'PieChart'
+})
+export default class extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: '100%' }) private width!: string
   @Prop({ default: '300px' }) private height!: string
diff --git a/src/views/dashboard/admin/components/RaddarChart.vue b/src/views/dashboard/admin/components/RaddarChart.vue
index bed6f5fb5..38bdc00ef 100644
--- a/src/views/dashboard/admin/components/RaddarChart.vue
+++ b/src/views/dashboard/admin/components/RaddarChart.vue
@@ -13,8 +13,10 @@ import ResizeMixin from '@/components/Charts/mixins/resize'
 
 const animationDuration = 3000
 
-@Component
-export default class RaddarChart extends mixins(ResizeMixin) {
+@Component({
+  name: 'RaddarChart'
+})
+export default class extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: '100%' }) private width!: string
   @Prop({ default: '300px' }) private height!: string
diff --git a/src/views/dashboard/admin/components/TodoList/Todo.vue b/src/views/dashboard/admin/components/TodoList/Todo.vue
index dfddb36e8..f7c4f32b0 100644
--- a/src/views/dashboard/admin/components/TodoList/Todo.vue
+++ b/src/views/dashboard/admin/components/TodoList/Todo.vue
@@ -40,6 +40,7 @@ export interface ITodo {
 }
 
 @Component({
+  name: 'TodoDemo',
   directives: {
     focus: (el, { value }, { context }) => {
       if (value) {
@@ -52,7 +53,7 @@ export interface ITodo {
     }
   }
 })
-export default class Todo extends Vue {
+export default class extends Vue {
   @Prop({ default: { text: '', done: false } }) private todo!: ITodo
 
   private editing = false
diff --git a/src/views/dashboard/admin/components/TodoList/index.vue b/src/views/dashboard/admin/components/TodoList/index.vue
index 0eddfef9b..1e05cc860 100644
--- a/src/views/dashboard/admin/components/TodoList/index.vue
+++ b/src/views/dashboard/admin/components/TodoList/index.vue
@@ -82,6 +82,7 @@ const defalutList = [
 ]
 
 @Component({
+  name: 'TodoList',
   components: {
     Todo
   },
@@ -90,7 +91,7 @@ const defalutList = [
     capitalize: (s: string) => s.charAt(0).toUpperCase() + s.slice(1)
   }
 })
-export default class TodoList extends Vue {
+export default class extends Vue {
   private visibility = 'all'
   private todos = defalutList
 
diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue
index 5671e6ca5..a827a7ffa 100644
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@@ -39,6 +39,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import { getTransactions } from '@/api/transactions'
 
 @Component({
+  name: 'TransactionTable',
   filters: {
     transactionStatusFilter: (status: string) => {
       const statusMap: { [key: string]: string } = {
@@ -54,7 +55,7 @@ import { getTransactions } from '@/api/transactions'
     }
   }
 })
-export default class TransactionTable extends Vue {
+export default class extends Vue {
   private list: any[] = []
 
   created() {
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 42438c547..06c7e8440 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -107,6 +107,7 @@ const lineChartData: { [type: string]: { expectedData: number[], actualData: num
 }
 
 @Component({
+  name: 'DashboardAdmin',
   components: {
     GithubCorner,
     BarChart,
@@ -119,7 +120,7 @@ const lineChartData: { [type: string]: { expectedData: number[], actualData: num
     TransactionTable
   }
 })
-export default class DashboardAdmin extends Vue {
+export default class extends Vue {
   private lineChartData = lineChartData.newVisitis
 
   private handleSetLineChartData(type: string) {
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
index 772393121..79bdb7968 100644
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@@ -34,12 +34,13 @@ import PanThumb from '@/components/PanThumb/index.vue'
 import GithubCorner from '@/components/GithubCorner/index.vue'
 
 @Component({
+  name: 'DashboardEditor',
   components: {
     PanThumb,
     GithubCorner
   }
 })
-export default class DashboardEditor extends Vue {
+export default class extends Vue {
   private emptyGif = 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
 
   get name() {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 238d1c702..3208b3cfc 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -11,12 +11,13 @@ import AdminDashboard from './admin/index.vue'
 import EditorDashboard from './editor/index.vue'
 
 @Component({
+  name: 'Dashboard',
   components: {
     AdminDashboard,
     EditorDashboard
   }
 })
-export default class Dashboard extends Vue {
+export default class extends Vue {
   private currentRole = 'admin-dashboard'
 
   get roles() {
diff --git a/src/views/error-log/components/ErrorTestA.vue b/src/views/error-log/components/ErrorTestA.vue
index f353641b5..009f45542 100644
--- a/src/views/error-log/components/ErrorTestA.vue
+++ b/src/views/error-log/components/ErrorTestA.vue
@@ -9,6 +9,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class ErrorTestA extends Vue {}
+@Component({
+  name: 'ErrorTestA'
+})
+export default class extends Vue {}
 </script>
diff --git a/src/views/error-log/components/ErrorTestB.vue b/src/views/error-log/components/ErrorTestB.vue
index dc4952f57..e860b6336 100644
--- a/src/views/error-log/components/ErrorTestB.vue
+++ b/src/views/error-log/components/ErrorTestB.vue
@@ -9,6 +9,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class ErrorTestB extends Vue {}
+@Component({
+  name: 'ErrorTestB'
+})
+export default class extends Vue {}
 </script>
diff --git a/src/views/error-log/index.vue b/src/views/error-log/index.vue
index 6858e431f..695212e07 100644
--- a/src/views/error-log/index.vue
+++ b/src/views/error-log/index.vue
@@ -25,12 +25,13 @@ import ErrorA from './components/ErrorTestA.vue'
 import ErrorB from './components/ErrorTestB.vue'
 
 @Component({
+  name: 'ErrorLog',
   components: {
     ErrorA,
     ErrorB
   }
 })
-export default class ErrorLogPage extends Vue {}
+export default class extends Vue {}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/error-page/401.vue b/src/views/error-page/401.vue
index 4dacc5722..aa0bec901 100644
--- a/src/views/error-page/401.vue
+++ b/src/views/error-page/401.vue
@@ -62,8 +62,10 @@
 import { Component, Vue } from 'vue-property-decorator'
 import errGif from '@/assets/401-images/401.gif'
 
-@Component
-export default class Page401 extends Vue {
+@Component({
+  name: 'Page401'
+})
+export default class extends Vue {
   private errGif = errGif + '?' + +new Date()
   private ewizardClap = 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646'
   private dialogVisible = false
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
index 35e7fcf5d..27bd4dac5 100644
--- a/src/views/error-page/404.vue
+++ b/src/views/error-page/404.vue
@@ -53,8 +53,10 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Page404 extends Vue {
+@Component({
+  name: 'Page404'
+})
+export default class extends Vue {
   private message = '404 Page Not Found'
 }
 </script>
diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue
index d198e837d..618ebee74 100644
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@@ -135,6 +135,7 @@
           style="margin-bottom: 30px;"
         >
           <tinymce
+            v-if="tinymceActive"
             ref="editor"
             v-model="postForm.fullContent"
             :height="400"
@@ -168,6 +169,7 @@ import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown
 import { Form } from 'element-ui'
 
 @Component({
+  name: 'ArticleDetail',
   components: {
     CommentDropdown,
     PlatformDropdown,
@@ -179,7 +181,7 @@ import { Form } from 'element-ui'
     Warning
   }
 })
-export default class ArticleDetail extends Vue {
+export default class extends Vue {
   @Prop({ default: false }) private isEdit!: boolean
 
   private validateRequire = (rule: any, value: string, callback: Function) => {
@@ -225,6 +227,7 @@ export default class ArticleDetail extends Vue {
     sourceURL: [{ validator: this.validateSourceUrl, trigger: 'blur' }]
   }
   private tempTagView?: ITagView
+  private tinymceActive = true
 
   get abstractContentLength() {
     return this.postForm.abstractContent.length
@@ -259,6 +262,14 @@ export default class ArticleDetail extends Vue {
     this.tempTagView = Object.assign({}, this.$route)
   }
 
+  deactivated() {
+    this.tinymceActive = false
+  }
+
+  activated() {
+    this.tinymceActive = true
+  }
+
   private async fetchData(id: string) {
     try {
       const { data } = await getArticle({ id })
diff --git a/src/views/example/components/Dropdown/Comment.vue b/src/views/example/components/Dropdown/Comment.vue
index 2b3ce5e06..db48f0307 100644
--- a/src/views/example/components/Dropdown/Comment.vue
+++ b/src/views/example/components/Dropdown/Comment.vue
@@ -31,8 +31,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class CommentDropdown extends Vue {
+@Component({
+  name: 'CommentDropdown'
+})
+export default class extends Vue {
   @Prop({ default: false }) private value!: boolean
 
   get disableComment() {
diff --git a/src/views/example/components/Dropdown/Platform.vue b/src/views/example/components/Dropdown/Platform.vue
index 4c116271c..ad867b665 100644
--- a/src/views/example/components/Dropdown/Platform.vue
+++ b/src/views/example/components/Dropdown/Platform.vue
@@ -28,8 +28,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class PlatformDropdown extends Vue {
+@Component({
+  name: 'PlatformDropdown'
+})
+export default class extends Vue {
   @Prop({ default: () => [] }) private value!: string[]
 
   private platformsOptions = [
diff --git a/src/views/example/components/Dropdown/SourceUrl.vue b/src/views/example/components/Dropdown/SourceUrl.vue
index 5a97f0979..f499672ed 100644
--- a/src/views/example/components/Dropdown/SourceUrl.vue
+++ b/src/views/example/components/Dropdown/SourceUrl.vue
@@ -33,8 +33,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class CommentDropdown extends Vue {
+@Component({
+  name: 'SourceUrlDropdown'
+})
+export default class extends Vue {
   @Prop({ default: '' }) private value!: string
 
   get sourceURL() {
diff --git a/src/views/example/components/Warning.vue b/src/views/example/components/Warning.vue
index 190358bc5..3fec653e2 100644
--- a/src/views/example/components/Warning.vue
+++ b/src/views/example/components/Warning.vue
@@ -11,6 +11,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class ExampleWarning extends Vue {}
+@Component({
+  name: 'Warning'
+})
+export default class extends Vue {}
 </script>
diff --git a/src/views/example/create.vue b/src/views/example/create.vue
index 827147e77..b8946f92f 100644
--- a/src/views/example/create.vue
+++ b/src/views/example/create.vue
@@ -7,9 +7,10 @@ import { Component, Vue } from 'vue-property-decorator'
 import ArticleDetail from './components/ArticleDetail.vue'
 
 @Component({
+  name: 'CreateArticle',
   components: {
     ArticleDetail
   }
 })
-export default class CreateForm extends Vue {}
+export default class extends Vue {}
 </script>
diff --git a/src/views/example/edit.vue b/src/views/example/edit.vue
index a14456145..36cd9d511 100644
--- a/src/views/example/edit.vue
+++ b/src/views/example/edit.vue
@@ -7,9 +7,10 @@ import { Component, Vue } from 'vue-property-decorator'
 import ArticleDetail from './components/ArticleDetail.vue'
 
 @Component({
+  name: 'EditArticle',
   components: {
     ArticleDetail
   }
 })
-export default class EditForm extends Vue {}
+export default class extends Vue {}
 </script>
diff --git a/src/views/example/list.vue b/src/views/example/list.vue
index 585480865..6ab1d9171 100644
--- a/src/views/example/list.vue
+++ b/src/views/example/list.vue
@@ -113,11 +113,12 @@ import { getArticles } from '@/api/articles'
 import Pagination from '@/components/Pagination/index.vue'
 
 @Component({
+  name: 'ArticleList',
   components: {
     Pagination
   }
 })
-export default class ArticleList extends Vue {
+export default class extends Vue {
   private total = 0
   private list: any[] = []
   private listLoading = true
diff --git a/src/views/excel/components/AutoWidthOption.vue b/src/views/excel/components/AutoWidthOption.vue
index 8fb8b7660..470f53307 100644
--- a/src/views/excel/components/AutoWidthOption.vue
+++ b/src/views/excel/components/AutoWidthOption.vue
@@ -21,8 +21,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class AutoWidthOption extends Vue {
+@Component({
+  name: 'AutoWidthOption'
+})
+export default class extends Vue {
   @Prop({ default: true }) private value!: boolean
 
   get autoWidth() {
diff --git a/src/views/excel/components/BookTypeOption.vue b/src/views/excel/components/BookTypeOption.vue
index 54ea21447..04a255022 100644
--- a/src/views/excel/components/BookTypeOption.vue
+++ b/src/views/excel/components/BookTypeOption.vue
@@ -18,8 +18,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class BookTypeOption extends Vue {
+@Component({
+  name: 'BookTypeOption'
+})
+export default class extends Vue {
   @Prop({ default: 'xlsx' }) private value!: string
 
   private options = ['xlsx', 'csv', 'txt']
diff --git a/src/views/excel/components/FilenameOption.vue b/src/views/excel/components/FilenameOption.vue
index 5c63e9ac7..720502c14 100644
--- a/src/views/excel/components/FilenameOption.vue
+++ b/src/views/excel/components/FilenameOption.vue
@@ -16,8 +16,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class FilenameOption extends Vue {
+@Component({
+  name: 'FilenameOption'
+})
+export default class extends Vue {
   @Prop({ default: '' }) private value!: string
 
   get filename() {
diff --git a/src/views/excel/export-excel.vue b/src/views/excel/export-excel.vue
index c6e5a3331..456bc7677 100644
--- a/src/views/excel/export-excel.vue
+++ b/src/views/excel/export-excel.vue
@@ -86,13 +86,14 @@ import AutoWidthOption from './components/AutoWidthOption.vue'
 import BookTypeOption from './components/BookTypeOption.vue'
 
 @Component({
+  name: 'ExportExcel',
   components: {
     AutoWidthOption,
     BookTypeOption,
     FilenameOption
   }
 })
-export default class ExportExcel extends Vue {
+export default class extends Vue {
   private list: any[] = []
   private listLoading = true
   private downloadLoading = false
diff --git a/src/views/excel/merge-header.vue b/src/views/excel/merge-header.vue
index 1bddd997e..39bbb460e 100644
--- a/src/views/excel/merge-header.vue
+++ b/src/views/excel/merge-header.vue
@@ -76,8 +76,10 @@ import { getArticles } from '@/api/articles'
 import { formatJson } from '@/utils'
 import { exportJson2Excel } from '@/utils/excel'
 
-@Component
-export default class MergeHeader extends Vue {
+@Component({
+  name: 'MergeHeader'
+})
+export default class extends Vue {
   private list: any[] = []
   private listLoading = true
   private downloadLoading = false
diff --git a/src/views/excel/select-excel.vue b/src/views/excel/select-excel.vue
index 904a5a793..bb488bf97 100644
--- a/src/views/excel/select-excel.vue
+++ b/src/views/excel/select-excel.vue
@@ -89,8 +89,10 @@ import { formatJson } from '@/utils'
 import { exportJson2Excel } from '@/utils/excel'
 import { Table } from 'element-ui'
 
-@Component
-export default class SelectExcel extends Vue {
+@Component({
+  name: 'SelectExcel'
+})
+export default class extends Vue {
   private list: any[] = []
   private listLoading = true
   private multipleSelection = []
diff --git a/src/views/excel/upload-excel.vue b/src/views/excel/upload-excel.vue
index 42e7f0c62..ea9ed02f5 100644
--- a/src/views/excel/upload-excel.vue
+++ b/src/views/excel/upload-excel.vue
@@ -25,11 +25,12 @@ import { Component, Vue } from 'vue-property-decorator'
 import UploadExcelComponent from '@/components/UploadExcel/index.vue'
 
 @Component({
+  name: 'UploadExcel',
   components: {
     UploadExcelComponent
   }
 })
-export default class UploadExcel extends Vue {
+export default class extends Vue {
   private tableData: any = []
   private tableHeader: string[] = []
 
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
index 9d46357da..0a0eba2f5 100644
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -23,8 +23,10 @@ import 'driver.js/dist/driver.min.css'
 import { Component, Vue } from 'vue-property-decorator'
 import steps from './steps'
 
-@Component
-export default class Guide extends Vue {
+@Component({
+  name: 'Guide'
+})
+export default class extends Vue {
   private driver: Driver | null = null
 
   mounted() {
diff --git a/src/views/i18n-demo/index.vue b/src/views/i18n-demo/index.vue
index 0cfbbe285..1fd169566 100644
--- a/src/views/i18n-demo/index.vue
+++ b/src/views/i18n-demo/index.vue
@@ -160,8 +160,10 @@ import { Component, Vue, Watch } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
 import local from './local'
 
-@Component
-export default class I18n extends Vue {
+@Component({
+  name: 'I18n'
+})
+export default class extends Vue {
   private date = ''
   private value = ''
   private options: any[] = []
diff --git a/src/views/icons/index.vue b/src/views/icons/index.vue
index 596d3be10..7bd9992b0 100644
--- a/src/views/icons/index.vue
+++ b/src/views/icons/index.vue
@@ -56,11 +56,12 @@ import elementIcons from './element-icons'
 import svgIcons from './svg-icons'
 
 @Component({
+  name: 'Icons',
   methods: {
     handleClipboard
   }
 })
-export default class Icons extends Vue {
+export default class extends Vue {
   private svgIcons = svgIcons
   private elementIcons = elementIcons
 
diff --git a/src/views/login/auth-redirect.vue b/src/views/login/auth-redirect.vue
index 18a5f2db6..2a5818393 100644
--- a/src/views/login/auth-redirect.vue
+++ b/src/views/login/auth-redirect.vue
@@ -1,8 +1,10 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class AuthRedirect extends Vue {
+@Component({
+  name: 'AuthRedirect'
+})
+export default class extends Vue {
   created() {
     const hash = window.location.search.slice(1)
     if (window.localStorage) {
diff --git a/src/views/login/components/SocialSignin.vue b/src/views/login/components/SocialSignin.vue
index e8cd0d5c0..c0abfa8dc 100644
--- a/src/views/login/components/SocialSignin.vue
+++ b/src/views/login/components/SocialSignin.vue
@@ -25,8 +25,10 @@
 // import openWindow from '@/utils/openWindow'
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class SocialSignin extends Vue {
+@Component({
+  name: 'SocialSignin'
+})
+export default class extends Vue {
   private wechatHandleClick(thirdpart: any) {
     alert('ok')
     // this.$store.commit('SET_AUTH_TYPE', thirdpart)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index ddc60991e..b66cbc203 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -104,12 +104,13 @@ import LangSelect from '@/components/LangSelect/index.vue'
 import SocialSign from './components/SocialSignin.vue'
 
 @Component({
+  name: 'Login',
   components: {
     LangSelect,
     SocialSign
   }
 })
-export default class Login extends Vue {
+export default class extends Vue {
   private validateUsername = (rule: any, value: string, callback: Function) => {
     if (!isValidUsername(value)) {
       callback(new Error('Please enter the correct user name'))
diff --git a/src/views/nested/menu1/index.vue b/src/views/nested/menu1/index.vue
index e83924442..64d4f7ccf 100644
--- a/src/views/nested/menu1/index.vue
+++ b/src/views/nested/menu1/index.vue
@@ -17,6 +17,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Menu1 extends Vue {}
+@Component({
+  name: 'Menu1'
+})
+export default class extends Vue {}
 </script>
diff --git a/src/views/nested/menu1/menu1-1/index.vue b/src/views/nested/menu1/menu1-1/index.vue
index c0f226cb2..d81d26c75 100644
--- a/src/views/nested/menu1/menu1-1/index.vue
+++ b/src/views/nested/menu1/menu1-1/index.vue
@@ -13,6 +13,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Menu11 extends Vue {}
+@Component({
+  name: 'Menu1-1'
+})
+export default class extends Vue {}
 </script>
diff --git a/src/views/nested/menu1/menu1-2/index.vue b/src/views/nested/menu1/menu1-2/index.vue
index ed5c7bc00..fbd013ac0 100644
--- a/src/views/nested/menu1/menu1-2/index.vue
+++ b/src/views/nested/menu1/menu1-2/index.vue
@@ -18,6 +18,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Menu12 extends Vue {}
+@Component({
+  name: 'Menu1-2'
+})
+export default class extends Vue {}
 </script>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
index 4f2d55f42..b2913cae5 100644
--- a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
+++ b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
@@ -11,6 +11,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Menu121 extends Vue {}
+@Component({
+  name: 'Menu1-2-1'
+})
+export default class extends Vue {}
 </script>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
index dec3a5582..cf3fde924 100644
--- a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
+++ b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
@@ -11,6 +11,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Menu122 extends Vue {}
+@Component({
+  name: 'Menu1-2-2'
+})
+export default class extends Vue {}
 </script>
diff --git a/src/views/nested/menu1/menu1-3/index.vue b/src/views/nested/menu1/menu1-3/index.vue
index 156bf20a2..c488c9d1f 100644
--- a/src/views/nested/menu1/menu1-3/index.vue
+++ b/src/views/nested/menu1/menu1-3/index.vue
@@ -11,6 +11,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Menu13 extends Vue {}
+@Component({
+  name: 'Menu1-3'
+})
+export default class extends Vue {}
 </script>
diff --git a/src/views/nested/menu2/index.vue b/src/views/nested/menu2/index.vue
index 971ebf875..42161fb1b 100644
--- a/src/views/nested/menu2/index.vue
+++ b/src/views/nested/menu2/index.vue
@@ -10,6 +10,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Menu2 extends Vue {}
+@Component({
+  name: 'Menu2'
+})
+export default class extends Vue {}
 </script>
diff --git a/src/views/pdf/download.vue b/src/views/pdf/download.vue
index 6783c8023..028cb3657 100644
--- a/src/views/pdf/download.vue
+++ b/src/views/pdf/download.vue
@@ -28,8 +28,10 @@
 import { Component, Vue } from 'vue-property-decorator'
 import content from './content'
 
-@Component
-export default class PDFDownload extends Vue {
+@Component({
+  name: 'PDFDownload'
+})
+export default class extends Vue {
   private article = {}
   private fullscreenLoading = true
 
diff --git a/src/views/pdf/index.vue b/src/views/pdf/index.vue
index 003138e8d..1207034a7 100644
--- a/src/views/pdf/index.vue
+++ b/src/views/pdf/index.vue
@@ -17,6 +17,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class PDF extends Vue {}
+@Component({
+  name: 'PDF'
+})
+export default class extends Vue {}
 </script>
diff --git a/src/views/permission/components/SwitchRoles.vue b/src/views/permission/components/SwitchRoles.vue
index eaf3ca7af..3bd8acc3c 100644
--- a/src/views/permission/components/SwitchRoles.vue
+++ b/src/views/permission/components/SwitchRoles.vue
@@ -15,8 +15,10 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { UserModule } from '@/store/modules/user'
 
-@Component
-export default class SwitchRoles extends Vue {
+@Component({
+  name: 'SwitchRoles'
+})
+export default class extends Vue {
   get roles() {
     return UserModule.roles
   }
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
index 7ed44b496..0a18b0996 100644
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -133,6 +133,7 @@ import { checkPermission } from '@/utils/permission' // Use permission directly
 import SwitchRoles from './components/SwitchRoles.vue'
 
 @Component({
+  name: 'DirectivePermission',
   components: {
     SwitchRoles
   },
@@ -143,7 +144,7 @@ import SwitchRoles from './components/SwitchRoles.vue'
     permission
   }
 })
-export default class DirectivePermission extends Vue {
+export default class extends Vue {
   private key = 1 // 为了能每次切换权限的时候重新初始化指令
 
   private handleRolesChange() {
diff --git a/src/views/permission/page.vue b/src/views/permission/page.vue
index ea182dc36..5fa38fc89 100644
--- a/src/views/permission/page.vue
+++ b/src/views/permission/page.vue
@@ -9,11 +9,12 @@ import { Component, Vue } from 'vue-property-decorator'
 import SwitchRoles from './components/SwitchRoles.vue'
 
 @Component({
+  name: 'PagePermission',
   components: {
     SwitchRoles
   }
 })
-export default class PagePermission extends Vue {
+export default class extends Vue {
   private handleRolesChange() {
     this.$router.push({ path: '/permission/index?' + +new Date() })
   }
diff --git a/src/views/permission/role.vue b/src/views/permission/role.vue
index 3f62d2676..d2987f9b1 100644
--- a/src/views/permission/role.vue
+++ b/src/views/permission/role.vue
@@ -142,8 +142,10 @@ const defaultRole: Role = {
   routes: []
 }
 
-@Component
-export default class RolePermission extends Vue {
+@Component({
+  name: 'RolePermission'
+})
+export default class extends Vue {
   private role = defaultRole
   private reshapedRoutes: RouteConfig[] = []
   private serviceRoutes: RouteConfig[] = []
diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue
index 79765569b..e3a81d483 100644
--- a/src/views/redirect/index.vue
+++ b/src/views/redirect/index.vue
@@ -1,8 +1,10 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Redirect extends Vue {
+@Component({
+  name: 'Redirect'
+})
+export default class extends Vue {
   created() {
     const { params, query } = this.$route
     const { path } = params
diff --git a/src/views/tab/components/TabPane.vue b/src/views/tab/components/TabPane.vue
index 811de282f..72ff39946 100644
--- a/src/views/tab/components/TabPane.vue
+++ b/src/views/tab/components/TabPane.vue
@@ -89,8 +89,10 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { getArticles } from '@/api/articles'
 
-@Component
-export default class TabPane extends Vue {
+@Component({
+  name: 'TabPane'
+})
+export default class extends Vue {
   @Prop({ default: 'CN' }) private type!: string
 
   private list = null
diff --git a/src/views/tab/index.vue b/src/views/tab/index.vue
index c77e7b4e8..bd9f0fd9d 100644
--- a/src/views/tab/index.vue
+++ b/src/views/tab/index.vue
@@ -35,11 +35,12 @@ import { Component, Vue, Watch } from 'vue-property-decorator'
 import TabPane from './components/TabPane.vue'
 
 @Component({
+  name: 'Tab',
   components: {
     TabPane
   }
 })
-export default class Tab extends Vue {
+export default class extends Vue {
   private tabMapOptions = [
     { label: 'China', key: 'CN' },
     { label: 'USA', key: 'US' },
diff --git a/src/views/table/complex-table.vue b/src/views/table/complex-table.vue
index 9fdab2c4c..0952b4db8 100644
--- a/src/views/table/complex-table.vue
+++ b/src/views/table/complex-table.vue
@@ -384,6 +384,7 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc: { [key: string]: s
 }, {}) as { [key: string]: string }
 
 @Component({
+  name: 'ComplexTable',
   components: {
     Pagination
   },
@@ -396,7 +397,7 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc: { [key: string]: s
     }
   }
 })
-export default class ComplexTable extends Vue {
+export default class extends Vue {
   private tableKey = 0
   private list: IArticleData[] = []
   private total = 0
diff --git a/src/views/table/draggable-table.vue b/src/views/table/draggable-table.vue
index cbdb3ab7b..9fb919f94 100644
--- a/src/views/table/draggable-table.vue
+++ b/src/views/table/draggable-table.vue
@@ -119,8 +119,10 @@ import { Component, Vue } from 'vue-property-decorator'
 import { getArticles } from '@/api/articles'
 import { IArticleData } from '@/api/types'
 
-@Component
-export default class DraggableTable extends Vue {
+@Component({
+  name: 'DraggableTable'
+})
+export default class extends Vue {
   private list: IArticleData[] = []
   private listLoading = true
   private total = []
diff --git a/src/views/table/dynamic-table/components/FixedHeaderTable.vue b/src/views/table/dynamic-table/components/FixedHeaderTable.vue
index 5489a836d..d0d7a88d3 100644
--- a/src/views/table/dynamic-table/components/FixedHeaderTable.vue
+++ b/src/views/table/dynamic-table/components/FixedHeaderTable.vue
@@ -45,8 +45,10 @@ import { Component, Vue, Watch } from 'vue-property-decorator'
 
 const defaultFormThead = ['apple', 'banana']
 
-@Component
-export default class FixedHeaderTable extends Vue {
+@Component({
+  name: 'FixedHeaderTable'
+})
+export default class extends Vue {
   private tableData = [
     {
       name: 'fruit-1',
diff --git a/src/views/table/dynamic-table/components/UnfixedHeaderTable.vue b/src/views/table/dynamic-table/components/UnfixedHeaderTable.vue
index 07e528f7b..3066f0a6f 100644
--- a/src/views/table/dynamic-table/components/UnfixedHeaderTable.vue
+++ b/src/views/table/dynamic-table/components/UnfixedHeaderTable.vue
@@ -42,8 +42,10 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class UnfixedHeaderTable extends Vue {
+@Component({
+  name: 'UnfixedHeaderTable'
+})
+export default class extends Vue {
   private tableData = [
     {
       name: 'fruit-1',
diff --git a/src/views/table/dynamic-table/index.vue b/src/views/table/dynamic-table/index.vue
index a59754311..f833535c4 100644
--- a/src/views/table/dynamic-table/index.vue
+++ b/src/views/table/dynamic-table/index.vue
@@ -18,10 +18,11 @@ import FixedHeaderTable from './components/FixedHeaderTable.vue'
 import UnfixedHeaderTable from './components/UnfixedHeaderTable.vue'
 
 @Component({
+  name: 'DynamicTable',
   components: {
     FixedHeaderTable,
     UnfixedHeaderTable
   }
 })
-export default class DynamicTable extends Vue {}
+export default class extends Vue {}
 </script>
diff --git a/src/views/table/inline-edit-table.vue b/src/views/table/inline-edit-table.vue
index 014e3b10f..2a0a7c4b9 100644
--- a/src/views/table/inline-edit-table.vue
+++ b/src/views/table/inline-edit-table.vue
@@ -124,8 +124,10 @@ import { Component, Vue } from 'vue-property-decorator'
 import { getArticles } from '@/api/articles'
 import { IArticleData } from '@/api/types'
 
-@Component
-export default class InlineEditTable extends Vue {
+@Component({
+  name: 'InlineEditTable'
+})
+export default class extends Vue {
   private list: IArticleData[] = []
   private listLoading = true
   private listQuery = {
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
index 7546415d6..62279e788 100644
--- a/src/views/theme/index.vue
+++ b/src/views/theme/index.vue
@@ -98,8 +98,10 @@ import { Component, Vue, Watch } from 'vue-property-decorator'
 import { toggleClass } from '@/utils'
 import '@/assets/custom-theme/index.css' // the theme changed version element-ui css
 
-@Component
-export default class Theme extends Vue {
+@Component({
+  name: 'Theme'
+})
+export default class extends Vue {
   private theme = false
   private tags = [
     { name: 'Tag One', type: '' },
diff --git a/src/views/zip/index.vue b/src/views/zip/index.vue
index 3acfc3aeb..65bb177f8 100644
--- a/src/views/zip/index.vue
+++ b/src/views/zip/index.vue
@@ -75,8 +75,10 @@ import { getArticles } from '@/api/articles'
 import { formatJson } from '@/utils'
 import { exportTxt2Zip } from '@/utils/zip'
 
-@Component
-export default class ExportZip extends Vue {
+@Component({
+  name: 'ExportZip'
+})
+export default class extends Vue {
   private list: any[] = []
   private listLoading = true
   private downloadLoading = false