♻ feat: Auto export public layout

package.json

@@ -60,7 +60,7 @@
     "zx-comparison": "^1.0.3",
     "zx-comparison": "^1.0.3",
     "zx-count": "^0.3.7",
     "zx-count": "^0.3.7",
     "zx-icon": "^1.1.10",
     "zx-icon": "^1.1.10",
-    "zx-layouts": "^0.6.15",
+    "zx-layouts": "^0.6.16",
     "zx-magnifie": "^0.4.0",
     "zx-magnifie": "^0.4.0",
     "zx-markdown-editor": "^0.0.2",
     "zx-markdown-editor": "^0.0.2",
     "zx-player": "^1.0.1",
     "zx-player": "^1.0.1",
@@ -86,7 +86,7 @@
     "plop": "^2.7.4",
     "plop": "^2.7.4",
     "prettier": "^2.1.2",
     "prettier": "^2.1.2",
     "sass": "^1.27.0",
     "sass": "^1.27.0",
-    "sass-loader": "^10.0.3",
+    "sass-loader": "^10.0.4",
     "stylelint": "^13.7.2",
     "stylelint": "^13.7.2",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-recess-order": "^2.2.0",
     "stylelint-config-recess-order": "^2.2.0",

src/colorfulIcon/index.js

 import Vue from 'vue'
 import Vue from 'vue'
-import { ColorfullIcon } from '@/layouts/components'
+import ColorfullIcon from 'zx-layouts/ColorfullIcon'
 
 
 Vue.component('VabColorfulIcon', ColorfullIcon)
 Vue.component('VabColorfulIcon', ColorfullIcon)
 const req = require.context('./svg', false, /\.svg$/),
 const req = require.context('./svg', false, /\.svg$/),

src/config/config.js

 /**
 /**
  * @description 导出自定义配置
  * @description 导出自定义配置
  **/
  **/
-const config = {
-  layout: 'vertical',
-}
+const config = {}
 module.exports = config
 module.exports = config

src/layouts/components/Ad/index.vue

@@ -18,6 +18,7 @@
 <script>
 <script>
   import { getList } from '@/api/ad'
   import { getList } from '@/api/ad'
   export default {
   export default {
+    name: 'Ad',
     data() {
     data() {
       return {
       return {
         nodeEnv: process.env.NODE_ENV,
         nodeEnv: process.env.NODE_ENV,

src/layouts/components/NavBar/index.vue

@@ -38,23 +38,8 @@
 <script>
 <script>
   import { mapActions, mapGetters } from 'vuex'
   import { mapActions, mapGetters } from 'vuex'
 
 
-  import {
-    Avatar,
-    Breadcrumb,
-    ErrorLog,
-    FullScreenBar,
-    ThemeBar,
-  } from '@/layouts/components'
-
   export default {
   export default {
     name: 'NavBar',
     name: 'NavBar',
-    components: {
-      Avatar,
-      Breadcrumb,
-      ErrorLog,
-      FullScreenBar,
-      ThemeBar,
-    },
     data() {
     data() {
       return {
       return {
         pulse: false,
         pulse: false,

src/layouts/components/index.js

 /**
 /**
  * @author chuzhixin 1204505056@qq.com （不想保留author可删除）
  * @author chuzhixin 1204505056@qq.com （不想保留author可删除）
- * @description 公共布局导出，已封装成npm，便于此后在线升级，
- * 当然也存在一定的弊端，给开发者自定义增加了一定的困难，
- * 如果您一定要进行高度自定义，请仔细阅读讨论群文档，layouts本地化篇。
+ * @description 公共js导出
  */
  */
+
 export { default as ColorfullIcon } from 'zx-layouts/ColorfullIcon'
 export { default as ColorfullIcon } from 'zx-layouts/ColorfullIcon'
 export { default as RemixIcon } from 'zx-layouts/RemixIcon'
 export { default as RemixIcon } from 'zx-layouts/RemixIcon'
-export { default as VabDrag } from 'zx-layouts/Drag'
-export { default as VabPermissions } from 'zx-layouts/Permissions'
-export { default as VabQueryForm } from 'zx-layouts/VabQueryForm/export'
-//本地化logo、默认使用svg，如需变更为png更改logo源码即可
-export { default as Logo } from './Logo'
-//本地化头像组件
-export { default as Avatar } from './Avatar'
-//本地化广告组件，如不需要全局搜索ad组件删掉即可
-export { default as Ad } from './Ad'
-//本地化AppMain组件
-export { default as AppMain } from './AppMain'
-export { default as TabsBar } from 'zx-layouts/TabsBar'
-export { default as SideBar } from 'zx-layouts/SideBar'
-//本地化Breadcrumb组件
-export { default as Breadcrumb } from './Breadcrumb'
-export { default as FullScreenBar } from 'zx-layouts/FullScreenBar'
-export { default as ErrorLog } from 'zx-layouts/ErrorLog'
-//本地化ThemeBar组件
-export { default as ThemeBar } from './ThemeBar'
-export { default as TopBar } from 'zx-layouts/TopBar'
-//本地化NavBar组件
-export { default as NavBar } from './NavBar'

src/layouts/export.js

+/**
+ * @author chuzhixin 1204505056@qq.com （不想保留author可删除）
+ * @description 公共布局自动导出
+ */
+
+import Vue from 'vue'
+
+const requireComponents = require.context('./components', true, /\.vue$/)
+requireComponents.keys().forEach((fileName) => {
+  const componentConfig = requireComponents(fileName)
+  const componentName = componentConfig.default.name
+  Vue.component(componentName, componentConfig.default || componentConfig)
+})
+
+const requireZxLayouts = require.context('zx-layouts', true, /\.vue$/)
+requireZxLayouts.keys().forEach((fileName) => {
+  const componentConfig = requireZxLayouts(fileName)
+  const componentName = componentConfig.default.name
+  Vue.component(componentName, componentConfig.default || componentConfig)
+})

src/layouts/index.vue

@@ -52,19 +52,10 @@
 </template>
 </template>
 
 
 <script>
 <script>
-  import { Ad, AppMain, NavBar, SideBar, TabsBar, TopBar } from './components'
   import { mapActions, mapGetters } from 'vuex'
   import { mapActions, mapGetters } from 'vuex'
   import { tokenName } from '@/config/settings'
   import { tokenName } from '@/config/settings'
   export default {
   export default {
     name: 'Layout',
     name: 'Layout',
-    components: {
-      Ad,
-      TopBar,
-      NavBar,
-      SideBar,
-      AppMain,
-      TabsBar,
-    },
     data() {
     data() {
       return { oldLayout: '' }
       return { oldLayout: '' }
     },
     },

src/main.js

@@ -3,6 +3,7 @@ import App from './App'
 import store from './store'
 import store from './store'
 import router from './router'
 import router from './router'
 import './plugins'
 import './plugins'
+import '@/layouts/export'
 /**
 /**
  * @author chuzhixin 1204505056@qq.com （不想保留author可删除）
  * @author chuzhixin 1204505056@qq.com （不想保留author可删除）
  * @description 生产环境默认都使用mock，如果正式用于生产环境时，记得去掉
  * @description 生产环境默认都使用mock，如果正式用于生产环境时，记得去掉

src/plugins/index.js

@@ -8,13 +8,12 @@ import '@/colorfulIcon'
 import '@/config/permission'
 import '@/config/permission'
 import '@/utils/errorLog'
 import '@/utils/errorLog'
 import './vabIcon'
 import './vabIcon'
-
+import VabDrag from 'zx-layouts/Drag'
+import VabPermissions from 'zx-layouts/Permissions'
 import Vab from '@/utils/vab'
 import Vab from '@/utils/vab'
-import { VabDrag, VabPermissions, VabQueryForm } from '@/layouts/components'
 import VabCount from 'zx-count'
 import VabCount from 'zx-count'
 
 
 Vue.use(Vab)
 Vue.use(Vab)
 Vue.use(VabPermissions)
 Vue.use(VabPermissions)
 Vue.use(VabDrag)
 Vue.use(VabDrag)
-Vue.use(VabQueryForm)
 Vue.use(VabCount)
 Vue.use(VabCount)

src/remixIcon/index.js

 import Vue from 'vue'
 import Vue from 'vue'
-import { RemixIcon } from '@/layouts/components'
+import RemixIcon from 'zx-layouts/RemixIcon'
 
 
 Vue.component('VabRemixIcon', RemixIcon)
 Vue.component('VabRemixIcon', RemixIcon)
 const req = require.context('./svg', false, /\.svg$/),
 const req = require.context('./svg', false, /\.svg$/),