优化调用方法

README.md

 # 动态组件库
 
-## usage
+## Dev
+
+1. 执行命令`npm install`安装依赖
+
+2. 执行命令`npm run serve`启动本地服务进行开发
+
+## Build
 
 1. 执行命令`npm run build:unpkg`进行打包;
 
@@ -12,23 +18,18 @@
 import fetchComponents from 'http://127.0.0.1:8080/component-lib.min.js' // 假设打包文件放在http://127.0.0.1:8080上
 import * as vue from 'vue'
 
-fetchComponents(vue) // 需要和大屏共用一个vue，因此将vue作为参数传入
-
-const {
-  Property,
-  PropertyFeatures,
-  PartyLead,
-  PublicEarning,
-  Bid,
-  IndustrySupervision,
-} = window._component_lib // 组件默认会设置在window._component_lib上
+// 需要和大屏共用一个vue，因此将vue作为参数传入
+// 第二个参数为请求数据地址
+const { A001, A002, A003, A004, A005, A006 } = fetchComponents(vue)(
+  'http://127.0.0.1:8082',
+)
 
 export default {
-  Property,
-  PropertyFeatures,
-  PartyLead,
-  PublicEarning,
-  Bid,
-  IndustrySupervision,
+  A001,
+  A002,
+  A003,
+  A004,
+  A005,
+  A006,
 }
 ```

dev/serve.vue

@@ -18,8 +18,6 @@ import * as components from '@/lib/index'
 
 <style lang="stylus" scoped>
 #main
-  width 100%
-  max-height 100%
   box-sizing border-box
   padding .05rem
   -moz-column-count 4
@@ -57,7 +55,6 @@ html, body
 #app
   width 100%
   height 100%
-  overflow hidden
   font-size .1rem
   background url('../src/assets/images/background.jpg') center/100% 100% no-repeat
   color #fff

package.json

@@ -15,7 +15,7 @@
   "scripts": {
     "serve": "vue-cli-service serve dev/serve.ts",
     "prebuild": "rimraf ./dist",
-    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
+    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js && node ./repair.js",
     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife && node ./repair.js",

shims-vue.d.ts

@@ -15,5 +15,6 @@ declare module '*.jpeg'
 declare module '*.gif'
 
 declare interface Window {
+  _base_url: string
   _component_lib: any
 }

src/entry.esm.ts

@@ -2,16 +2,11 @@ import { App, Plugin } from 'vue'
 
 import * as components from '@/lib/index'
 
-const install: Exclude<Plugin['install'], undefined> = function installCom(
-  app: App,
-) {
+const install: Exclude<Plugin['install'], undefined> = function (app: App) {
   Object.entries(components).forEach(([componentName, component]) => {
     app.component(componentName, component)
   })
 }
-
 export default install
 
 export * from '@/lib/index'
-
-window._component_lib = components

src/entry.ts

-// iife/cjs usage extends esm default export - so import it all
-import plugin, * as components from '@/entry.esm'
+import * as components from '@/lib/index'
 
-// Attach named exports directly to plugin. IIFE/CJS will
-// only expose one global var, with component exports exposed as properties of
-// that global var (eg. plugin.component)
-type NamedExports = Exclude<typeof components, 'default'>
-type ExtendedPlugin = typeof plugin & NamedExports
-Object.entries(components).forEach(([componentName, component]) => {
-  if (componentName !== 'default') {
-    const key = componentName as Exclude<keyof NamedExports, 'default'>
-    const val = component as Exclude<ExtendedPlugin, typeof plugin>
-    ;(plugin as ExtendedPlugin)[key] = val
-  }
-})
-
-export default plugin
+export default function (url: string) {
+  window._base_url = url
+  return components
+}

src/lib/a001/property.vue → src/lib/A001/index.vue

@@ -36,7 +36,8 @@
 
 <script lang="ts">
 export default {
-  name: 'Property',
+  name: 'A001',
+  title: '物业',
 }
 </script>
 <script lang="ts" setup>
@@ -44,7 +45,6 @@ import icon1 from '@/assets/images/icon1.png'
 import icon2 from '@/assets/images/icon2.png'
 import icon3 from '@/assets/images/icon3.png'
 import Brief from '@/components/brief.vue'
-
 const summary = [
   { icon: icon1, name: '小区', value: 904 },
   { icon: icon2, name: '业委会', value: 400 },

src/lib/a002/property-features.vue → src/lib/A002/index.vue

@@ -11,7 +11,8 @@
 
 <script lang="ts">
 export default {
-  name: 'PropertyFeatures',
+  name: 'A002',
+  title: '物业体征',
 }
 </script>
 <script lang="ts" setup>

src/lib/a003/party-lead.vue → src/lib/A003/index.vue

@@ -25,6 +25,12 @@
   </m-card>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'A003',
+  title: '党建引领',
+}
+</script>
 <script lang="ts" setup>
 import { computed } from 'vue'
 import Circle from '@/components/circle.vue'

src/lib/a004/public-earning.vue → src/lib/A004/index.vue

@@ -35,6 +35,12 @@
   </m-card>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'A004',
+  title: '公共收益',
+}
+</script>
 <script lang="ts" setup></script>
 
 <style lang="stylus" scoped>

src/lib/a005/bid.vue → src/lib/A005/index.vue

@@ -34,6 +34,12 @@
   </m-card>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'A005',
+  title: '招投标',
+}
+</script>
 <script lang="ts" setup>
 import Circle from '@/components/circle.vue'
 </script>

src/lib/a006/industry-supervision.vue → src/lib/A006/index.vue

@@ -65,6 +65,12 @@
   </m-card>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'A006',
+  title: '行业监管',
+}
+</script>
 <script lang="ts" setup></script>
 
 <style lang="stylus" scoped>

src/lib/index.ts

-export { default as Property } from './a001/property.vue'
-export { default as PropertyFeatures } from './a002/property-features.vue'
-export { default as PartyLead } from './a003/party-lead.vue'
-export { default as PublicEarning } from './a004/public-earning.vue'
-export { default as Bid } from './a005/bid.vue'
-export { default as IndustrySupervision } from './a006/industry-supervision.vue'
+export { default as A001 } from './A001/index.vue'
+export { default as A002 } from './A002/index.vue'
+export { default as A003 } from './A003/index.vue'
+export { default as A004 } from './A004/index.vue'
+export { default as A005 } from './A005/index.vue'
+export { default as A006 } from './A006/index.vue'