feat: 组件局部引入改成全局注册

src/components/componentscom/index.js

@@ -1,23 +0,0 @@
-export { default as captiontext } from './captiontext'
-export { default as pictureads } from './pictureads'
-export { default as placementarea } from './placementarea'
-export { default as graphicnavigation } from './graphicnavigation'
-export { default as richtext } from './richtext'
-export { default as magiccube } from './magiccube'
-export { default as auxiliarysegmentation } from './auxiliarysegmentation'
-export { default as commoditysearch } from './commoditysearch'
-export { default as storeinformation } from './storeinformation'
-export { default as entertheshop } from './entertheshop'
-export { default as notice } from './notice'
-export { default as videoss } from './videoss'
-export { default as custommodule } from './custommodule'
-export { default as communitypowder } from './communitypowder'
-export { default as storenotecard } from './storenotecard'
-export { default as crowdoperation } from './crowdoperation'
-export { default as personalizedrecommendation } from './personalizedrecommendation'
-export { default as onlineservice } from './onlineservice'
-export { default as listswitching } from './listswitching'
-export { default as investigate } from './investigate'
-export { default as tabBar } from './tabBar'
-export { default as follow } from './follow'
-export { default as suspension } from './suspension'

src/components/rightslider/componenmanagement/index.vue

@@ -34,7 +34,7 @@
 import vuedraggable from 'vuedraggable' //拖拽组件
 
 export default {
-  name: 'componenManagement',
+  name: 'componenmanagement',
   props: ['datas'],
   components: { vuedraggable },
   data() {

src/components/rightslider/index.js

@@ -1,24 +0,0 @@
-export { default as decorate } from './decorate'
-export { default as componenmanagement } from './componenmanagement'
-export { default as captiontextsstyle } from './captiontextsstyle'
-export { default as pictureadsstyle } from './pictureadsstyle'
-export { default as graphicnavigationstyle } from './graphicnavigationstyle'
-export { default as richtextstyle } from './richtextstyle'
-export { default as magiccubestyle } from './magiccubestyle'
-export { default as auxiliarysegmentationstyle } from './auxiliarysegmentationstyle'
-export { default as commoditysearchstyle } from './commoditysearchstyle'
-export { default as storeinformationstyle } from './storeinformationstyle'
-export { default as entertheshopstyle } from './entertheshopstyle'
-export { default as noticestyle } from './noticestyle'
-export { default as videostyle } from './videostyle'
-export { default as custommodulestyle } from './custommodulestyle'
-export { default as communitypowderstyle } from './communitypowderstyle'
-export { default as storenotecardstyle } from './storenotecardstyle'
-export { default as crowdoperationstyle } from './crowdoperationstyle'
-export { default as personalizedrecommendationstyle } from './personalizedrecommendationstyle'
-export { default as onlineservicestyle } from './onlineservicestyle'
-export { default as listswitchingstyle } from './listswitchingstyle'
-export { default as investigatestyle } from './investigatestyle'
-export { default as tabBarStyle } from './tabBarStyle'
-export { default as followStyle } from './followStyle'
-export { default as suspensionstyle } from './suspensionstyle'

src/layout/home/index.vue

@@ -148,70 +148,10 @@
 </template>
 
 <script>
-import utils from 'utils/index' // 方法
+import utils from 'utils/index' // 方法类
 import componentProperties from '@/utils/componentProperties' // 组件数据
-import sliderassembly from 'components/sliderassembly' // 左侧组件大全
-import headerTop from 'components/headerTop' // 手机底部
-import phoneBottom from 'components/phoneBottom' // 手机底部
-import realTimeView from 'components/realTimeView' // 预览组件
-
 import html2canvas from 'html2canvas' // 生成图片
-import FileSaver from 'file-saver' // 导入or导出JSON
+import FileSaver from 'file-saver' // 导出JSON
-
-/* 手机组件 */
-import {
-  captiontext,
-  placementarea,
-  pictureads,
-  graphicnavigation,
-  richtext,
-  magiccube,
-  auxiliarysegmentation,
-  commoditysearch,
-  storeinformation,
-  entertheshop,
-  investigate,
-  notice,
-  videoss,
-  custommodule,
-  communitypowder,
-  storenotecard,
-  crowdoperation,
-  personalizedrecommendation,
-  onlineservice,
-  listswitching,
-  tabBar,
-  follow,
-  suspension,
-} from 'components/componentscom'
-
-/* 右侧组件 */
-import {
-  decorate,
-  componenmanagement,
-  captiontextsstyle,
-  pictureadsstyle,
-  graphicnavigationstyle,
-  richtextstyle,
-  magiccubestyle,
-  auxiliarysegmentationstyle,
-  commoditysearchstyle,
-  storeinformationstyle,
-  entertheshopstyle,
-  investigatestyle,
-  noticestyle,
-  videostyle,
-  custommodulestyle,
-  communitypowderstyle,
-  storenotecardstyle,
-  crowdoperationstyle,
-  personalizedrecommendationstyle,
-  onlineservicestyle,
-  listswitchingstyle,
-  tabBarStyle,
-  followStyle,
-  suspensionstyle,
-} from 'components/rightslider'
 
 export default {
   name: 'home',
@@ -464,7 +404,7 @@ export default {
         )
       })
       if (someResult) {
-        this.$message.info('当前组件只能添加一个！')
+        this.$message.info('当前组件只能添加一个!')
         /* 删除提示组件 */
         this.pageComponents = this.pageComponents.filter(
           (res) => res.component !== 'placementarea'
@@ -644,60 +584,6 @@ export default {
       }
     },
   },
-
-  components: {
-    headerTop,
-    realTimeView,
-    decorate,
-    componenmanagement,
-    phoneBottom,
-    captiontext,
-    sliderassembly,
-    placementarea,
-    captiontextsstyle,
-    pictureadsstyle,
-    pictureads,
-    graphicnavigation,
-    graphicnavigationstyle,
-    richtext,
-    richtextstyle,
-    magiccube,
-    magiccubestyle,
-    auxiliarysegmentation,
-    auxiliarysegmentationstyle,
-    commoditysearch,
-    commoditysearchstyle,
-    storeinformation,
-    storeinformationstyle,
-    entertheshop,
-    entertheshopstyle,
-    investigate,
-    investigatestyle,
-    notice,
-    noticestyle,
-    videoss,
-    videostyle,
-    custommodule,
-    custommodulestyle,
-    communitypowder,
-    communitypowderstyle,
-    storenotecard,
-    storenotecardstyle,
-    crowdoperation,
-    crowdoperationstyle,
-    personalizedrecommendation,
-    personalizedrecommendationstyle,
-    onlineservice,
-    onlineservicestyle,
-    listswitching,
-    listswitchingstyle,
-    tabBarStyle,
-    tabBar,
-    follow,
-    followStyle,
-    suspension,
-    suspensionstyle,
-  },
 }
 </script>
 

src/permission.js

@@ -26,10 +26,6 @@ import '@/api/request'
 import httpApi from '@/api/api'
 Vue.prototype.$httpApi = httpApi
 
-/* 设置cookies */
-/* import VueCookies from 'vue-cookies'
-Vue.use(VueCookies) */
-
 // 挂载 uitls
 import Utils from './utils/index'
 Vue.prototype.$utils = Utils
@@ -40,3 +36,25 @@ import globalFilter from '@/utils/filter'
 Object.keys(globalFilter).forEach((key) => {
   Vue.filter(key, globalFilter[key])
 })
+
+// 组件自动化全局注册
+const requireComponent = require.context(
+  // 其组件目录的相对路径
+  './components',
+  // 是否查询其子目录
+  true,
+  // 匹配基础组件文件名的正则表达式
+  /\.vue$/
+)
+requireComponent.keys().forEach(fileName => {
+  // 获取组件配置
+  const componentConfig = requireComponent(fileName)
+  // 全局注册组件
+  Vue.component(
+      componentConfig.default.name,   // 此处的name,是组件属性定义的name
+      // 如果这个组件选项是通过 `export default` 导出的，
+      // 那么就会优先使用 `.default`，
+      // 否则回退到使用模块的根。
+      componentConfig.default
+  )
+})