refactor: register ant-design-vue components in main.js #28

src/pages/form/BasicForm.vue

@@ -83,35 +83,8 @@
 </template>
 
 <script>
-import ACard from 'ant-design-vue/es/card/Card'
-import AForm from 'ant-design-vue/es/form/Form'
-import AFormItem from 'ant-design-vue/es/form/FormItem'
-import AInput from 'ant-design-vue/es/input/Input'
-import ADatePicker from 'ant-design-vue/es/date-picker'
-import ATextarea from 'ant-design-vue/es/input/TextArea'
-import AInputNumber from 'ant-design-vue/es/input-number/index'
-import ARadioGroup from 'ant-design-vue/es/radio/Group'
-import ARadio from 'ant-design-vue/es/radio/Radio'
-import ASelect from 'ant-design-vue/es/select/index'
-import AButton from 'ant-design-vue/es/button/button'
-
-const ARangePicker = ADatePicker.RangePicker
-const ASelectOption = ASelect.Option
 export default {
   name: 'BasicForm',
-  components: {
-    AButton,
-    ASelectOption,
-    ASelect,
-    ARadio,
-    ARadioGroup,
-    AInputNumber,
-    ATextarea,
-    ARangePicker,
-    AInput,
-    AFormItem,
-    AForm,
-    ACard},
   data () {
     return {
       desc: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',

src/pages/form/advancedForm/AdvancedForm.vue

@@ -16,16 +16,14 @@
 </template>
 
 <script>
-import ACard from 'ant-design-vue/es/card/Card'
 import RepositoryForm from './RepositoryForm'
 import TaskForm from './TaskForm'
 import TableForm from './TableForm'
 import FooterToolBar from '../../../components/tool/FooterToolBar'
-import AButton from 'ant-design-vue/es/button/button'
 
 export default {
   name: 'AdvancedForm',
-  components: {AButton, FooterToolBar, TableForm, TaskForm, RepositoryForm, ACard},
+  components: {FooterToolBar, TableForm, TaskForm, RepositoryForm},
   data () {
     return {
       desc: '高级表单常见于一次性输入和提交大批量数据的场景。',

src/pages/form/advancedForm/RepositoryForm.vue

@@ -75,22 +75,9 @@
 </template>
 
 <script>
-import AForm from 'ant-design-vue/es/form/Form'
-import AFormItem from 'ant-design-vue/es/form/FormItem'
-import ACol from 'ant-design-vue/es/grid/Col'
-import ARow from 'ant-design-vue/es/grid/Row'
-import AInput from 'ant-design-vue/es/input/Input'
-import ASelect from 'ant-design-vue/es/select/index'
-import ADatePicker from 'ant-design-vue/es/date-picker'
-import AButton from 'ant-design-vue/es/button/button'
-
-const ASelectOption = ASelect.Option
-const ARangePicker = ADatePicker.RangePicker
-
 export default {
   name: 'RepositoryForm',
   props: ['showSubmit'],
-  components: {AButton, ARangePicker, ASelectOption, ASelect, AInput, ARow, ACol, AFormItem, AForm},
   methods: {
     handleSubmit (e) {
       e.preventDefault()

src/pages/form/advancedForm/TableForm.vue

@@ -45,13 +45,6 @@
 </template>
 
 <script>
-import ATable from 'ant-design-vue/es/table'
-import AButton from 'ant-design-vue/es/button/button'
-import AInput from 'ant-design-vue/es/input/Input'
-import ADivider from 'ant-design-vue/es/divider/index'
-import APopconfirm from 'ant-design-vue/es/popconfirm/index'
-import AFormItem from 'ant-design-vue/es/form/FormItem'
-
 const columns = [
   {
     title: '成员姓名',
@@ -107,7 +100,6 @@ const dataSource = [
 
 export default {
   name: 'TableForm',
-  components: {AFormItem, APopconfirm, ADivider, AInput, AButton, ATable},
   data () {
     return {
       columns,

src/pages/form/advancedForm/TaskForm.vue

@@ -74,21 +74,9 @@
 </template>
 
 <script>
-import AForm from 'ant-design-vue/es/form/Form'
-import AFormItem from 'ant-design-vue/es/form/FormItem'
-import ACol from 'ant-design-vue/es/grid/Col'
-import ARow from 'ant-design-vue/es/grid/Row'
-import AInput from 'ant-design-vue/es/input/Input'
-import ASelect from 'ant-design-vue/es/select/index'
-import AButton from 'ant-design-vue/es/button/button'
-import ATimePicker from 'ant-design-vue/es/time-picker/index'
-
-const ASelectOption = ASelect.Option
-
 export default {
   name: 'TaskForm',
   props: ['showSubmit'],
-  components: {ATimePicker, AButton, ASelectOption, ASelect, AInput, ARow, ACol, AFormItem, AForm},
   methods: {
     handleSubmit (e) {
       e.preventDefault()

src/pages/form/stepForm/Step1.vue

@@ -45,18 +45,8 @@
 </template>
 
 <script>
-import AForm from 'ant-design-vue/es/form/Form'
-import AFormItem from 'ant-design-vue/es/form/FormItem'
-import AButton from 'ant-design-vue/es/button/button'
-import ASelect from 'ant-design-vue/es/select/index'
-import AInputGroup from 'ant-design-vue/es/input/Group'
-import AInput from 'ant-design-vue/es/input/Input'
-
-const ASelectOption = ASelect.Option
-
 export default {
   name: 'Step1',
-  components: {AInput, AInputGroup, ASelectOption, ASelect, AButton, AFormItem, AForm},
   methods: {
     nextStep () {
       this.$emit('nextStep')

src/pages/form/stepForm/Step2.vue

@@ -47,13 +47,8 @@
 </template>
 
 <script>
-import AForm from 'ant-design-vue/es/form/Form'
-import AFormItem from 'ant-design-vue/es/form/FormItem'
-import AButton from 'ant-design-vue/es/button/button'
-import AAlert from 'ant-design-vue/es/alert/index'
 export default {
   name: 'Step2',
-  components: {AAlert, AButton, AFormItem, AForm},
   data () {
     return {
       loading: false

src/pages/form/stepForm/Step3.vue

@@ -11,13 +11,10 @@
 </template>
 
 <script>
-import AForm from 'ant-design-vue/es/form/Form'
-import AFormItem from 'ant-design-vue/es/form/FormItem'
-import AButton from 'ant-design-vue/es/button/button'
 import Result from '../../../components/result/Result'
 export default {
   name: 'Step3',
-  components: {Result, AButton, AFormItem, AForm},
+  components: {Result},
   methods: {
     doOnceAgin () {
       this.$emit('finish')

src/pages/form/stepForm/StepForm.vue

@@ -14,17 +14,13 @@
 </template>
 
 <script>
-import ACard from 'ant-design-vue/es/card/Card'
-import ASteps from 'ant-design-vue/es/steps/index'
 import Step1 from './Step1'
 import Step2 from './Step2'
 import Step3 from './Step3'
 
-const AStep = ASteps.Step
-
 export default {
   name: 'StepForm',
-  components: {Step1, Step2, Step3, AStep, ASteps, ACard},
+  components: {Step1, Step2, Step3},
   data () {
     return {
       desc: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',