后台管理系统模板

打算用vue3+typescript+vuex+antd-design-vue做一个后台管理系统模板对于目前来说，跨度有点大，有点难度

1、初始化项目
2、配置好eslint、tslint规则
3、利用babel-plugin-import按需引入antd-design-vue
4、配置axios插件
5、利用vuex管理字典
6、antd-design-vue常用组件的使用

遇到的坑

`eslint`、`tslint`规则配置

每个人的使用习惯不一样，搜索到的配置也不一样，需要和vscode的setting.json一起配置。

`axios`插件

vue2.x

Vue2.x使用Plugin.install和Object.defineProperties()将$axios挂载到vue实例上，最后Vue.use(Plugin)
vue3.0

vue3.0是利用install方法来暴露axios，官方文档中提供了例子。但是，我们用到了typescript，即使按照上述方法成功将$axios挂载到了vue实例上，还需要创建一个*.d.ts文件来声明$axios属性，否则eslint会校验不通过。
```
  import { App } from 'vue'
  import { AxiosInstance } from 'axios'

  declare module '@vue/runtime-core' {
    export interface ComponentCustomProperties {
      $axios: AxiosStatic
    }

    export interface App {
      $axios: AxiosStatic
    }
  }
```
需要注意，和vue2.x不同的地方'vue/type/vue'换成了'@vue/runtime-core'

`vue-class-component`

截止至该项目启动时，vue-class-component还没有完全支持vue3.0，文档也不完整，只能摸索着写。参考地址：vue-class-component V8

`vuex4.0`

参考文档：

1、vuex-typescript-m4j 2、whats-new-in-vuex-4

antd-design-vue

1、typescript中使用$refs，eslint校验不通过解决方案：

  export default class ClassName extends Vue {
    public $refs!: {
      forms: HTMLFormElement
    }
  }

2、table告警

  warning.js?2149:6 Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.]
  warning.js?2149:6 Warning: [antdv: Table] Each record in dataSource of table should have a unique `key` prop, or set `rowKey` of Table to an unique primary key,

解决方案：

添加属性rowKey

  <a-table
    :columns="columns"
    :data-source="recordData"
    bordered
    :pagination="pagination"
    @change="handleTableChange"
    :scroll="{ y: 600 }"
    :rowKey="columnId"
  >

  private columnId(record: any) {
    return record.id
  }

3、LocaleProvider

引入import zhCN from 'ant-design-vue/es/locale/zh_CN'会出现如下情况：

  Could not find a declaration file for module 'ant-design-vue/es/locale/zh_CN'.
  Try npm install @types/ant-design-vue if it exists or add a new declaration (.d.ts) file containing declare module 'ant-design-vue/es/locale/zh_CN';

需要在*.d.ts文件中添加声明：

  interface zhCN {
    [key: string]: any
  }
  declare module 'ant-design-vue/es/locale/zh_CN' {
    import zh from 'ant-design-vue/es/locale/zh_CN'
    const zh_CN: zhCN

    export default zh_CN
  }

参考

另外按需引入的时候，LocaleProvider需要替换成ConfigProvider

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

hucongcong/vue3-ts