emacroh5lib 1.0.1 → 1.0.2

package/README.md

@@ -6,6 +6,6 @@
 EMacro.File.readLocalExcel((file, workbook) => {
     console.log("file", file);
     console.log("workbook", workbook);
-    console.log("数据", workbook.Sheets["工作表1"]["G32"].h);
+    console.log("数据", workbook.Sheets["工作表1"]["G32"]);
 });
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.001",
+  "version": "1.0.2",
   "description": "EMacro前端组件库",
   "main": "./dist/emacroh5lib.min.js",
   "types": "./dist/types/index.d.ts",
@@ -13,7 +13,7 @@
     "e2e": "vue-cli-service test:e2e",
     "watch": "webpack --watch",
     "serve": "webpack serve",
-    "dev": "webpack serve",
+    "dev": "vue-cli-service test:e2e",
     "commit": "cz",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -66,6 +66,8 @@
     "ts-jest": "^27.1.4",
     "ts-loader": "^9.2.8",
     "typescript": "^4.6.3",
+    "vue-loader": "^15.7.0",
+    "vue-router": "^3.1.3",
     "vue-template-compiler": "^2.6.14",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
@@ -77,11 +79,13 @@
     "@vue/cli-plugin-typescript": "^5.0.4",
     "axios": "^0.26.1",
     "core-js": "^3.22.2",
+    "deep-eql": "^4.0.0",
     "echarts": "^5.3.2",
     "echarts-gl": "^2.0.9",
     "element-ui": "^2.15.8",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.1",
+    "query-string": "^7.0.1",
     "register-service-worker": "^1.7.2",
     "three": "^0.139.2",
     "typings": "^2.1.1",
@@ -89,10 +93,8 @@
     "vue-class-component": "^7.2.3",
     "vue-echarts": "^6.0.2",
     "vue-property-decorator": "^9.1.2",
-    "vue-router": "^3.5.1",
+    "vue-tsx-support": "^3.2.0",
     "vuex": "^3.6.2",
-    "xlsx": "^0.18.5",
-    "query-string": "^7.0.1",
-    "deep-eql": "^4.0.0"
+    "xlsx": "^0.18.5"
   }
 }

package/src/components/HelloWorld.vue

@@ -83,11 +83,11 @@
 <script lang="ts">
   import { Component, Prop, Vue } from "vue-property-decorator";
 
-  @Component
+  @Component({ name: "HelloWorld" })
   export default class HelloWorld extends Vue {
-    @Prop() private msg!: string; 
+    @Prop() private msg!: string;
 
-    public test():void{
+    public test(): void {
 
       console.log(this.msg);
 

package/src/components/MessageBox.jsx

@@ -102,6 +102,7 @@ export default {
     render() {
         return (
             <div>
+                <div>你好撒发射点  </div>
                 <a-select show-search placeholder={this.placeholder} option-filter-prop="children" style={this.css}
                     onfocus={this.focus} onblur={this.blur} onchange={this.change} oninputKeydown={this.inputKeydown} defaultValue={this.defaultValue}>
                     {

package/src/components/MessageBoxTest.tsx

@@ -0,0 +1,11 @@
+import { Component, Prop, Vue } from "vue-property-decorator";
+@Component({ name: "MessageBoxTest" })
+export default class MessageBoxTest extends Vue {
+
+
+    render() {
+        return (
+            <div>login.tsx</div>
+        )
+    }
+} 

package/src/index.ts

@@ -1,21 +1,41 @@
 
+import { EMacro } from "./utilities/File";
+
+
+import FileViewer from './views/FileViewer/index.vue'
+import MessageBoxTest from "@/components/MessageBoxTest";  
+
+const components = [FileViewer];
+
+const install = (Vue: any) => {
+  if ((install as any).installed) return;
+  (install as any).installed = true;
+  components.map((component) => {
+    Vue.component(component.name, component);
+  });
+};
+// 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。
+if (typeof window !== 'undefined' && (window as any).Vue) {
+  // window.Vue.use(install)
+  install((window as any).Vue);
+}
+
+
+
+
+
+// import HelloWorld from "@/components/HelloWorld.vue";
+// import HelloWorld from "@/components/index";
+
+
+
 
-class Test {
 
-  public static print(info: string): void {
-    console.log(info);
 
-    console.log('测试npm');
 
-    const arr = [1, 2]
-    console.log(arr[5]);
 
-    console.log('测试npm22');
-    console.log('测试npm33333');
 
-  }
 
-}
 
-export default Test;
-export { }
+export default {}
+export { EMacro, FileViewer }

package/src/main.ts

@@ -7,7 +7,9 @@ import store from './store'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 
-Vue.use(ElementUI);
+
+
+Vue.use(ElementUI); 
 
 Vue.config.productionTip = false
 

package/src/router/index.ts

@@ -19,9 +19,9 @@ const routes: Array<RouteConfig> = [
     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
   },
   {
-    path: '/file',
-    name: 'file',
-    component: () => import('../views/File/index.vue')
+    path: '/FileViewer',
+    name: 'FileViewer',
+    component: () => import('../views/FileViewer/index.vue')
   },
 ]
 

package/src/shims-vue.d.ts

@@ -4,4 +4,4 @@ declare module '*.vue' {
 }
 
 // declare module '@/utils/request.js'
-// declare module '@/utils/request.js'
+// declare module "@/components/HelloWorld.vue"

package/src/utilities/File.ts

@@ -1,6 +1,8 @@
 import * as XLSX from "xlsx";
 
-namespace EMacro {
+export namespace EMacro {
+
+    export const version = "1.0"
 
     export class File {
 
@@ -45,6 +47,8 @@ namespace EMacro {
     }
 
 }
+ 
+
 
 
-export default EMacro;
+ 

package/src/views/{File → FileViewer}/index.less

@@ -3,6 +3,7 @@
   width: 100%;
   margin: 0;
   padding: 0;
+  background-color: aqua;
 }
 
 

package/src/views/FileViewer/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="app-container">
+
+    <div style="background-color: #42b983; color: red;">
+      zxcxzcxzcz
+      <span>测试</span>
+    </div>
+
+    <button @click="test2($event)" class="click-button">点击事件</button>
+
+  </div>
+</template>
+
+<script lang="ts">
+
+  import { Component, Prop, Vue } from "vue-property-decorator";
+
+  import $ from "jquery";
+
+  import * as echarts from "echarts"; 
+
+  @Component({
+    components: {}
+  })
+  @Component({ name: 'FileViewer' })
+  export default class FileViewer extends Vue {
+    @Prop(Number) readonly msg!: number | undefined;
+    @Prop() private name!: string;
+
+    public static entryName = 'FileViewer';
+    private currentTime = "";
+
+    public data_0 = {
+      page_index: 0,
+      page_size: 3,
+      data: [
+        { a: "面料类", b: "16500", c: "12063", d: "45.5%" },
+        { a: "面料类", b: "26500", c: "12063", d: "45.5%" },
+        { a: "面料类", b: "36500", c: "12063", d: "45.5%" },
+        { a: "面料类", b: "46500", c: "12063", d: "45.5%" },
+        { a: "面料类", b: "56500", c: "12063", d: "45.5%" },
+      ],
+    };
+
+    // 计算属性
+    private get reversedMessage(): string {
+      return this.currentTime;
+    }
+
+    private test2(e): void {
+      alert("你好")
+      console.log('event', e);
+    }
+
+    public test1(): void {
+      // EMacro.File.readLocalExcel((file, workbook) => {
+      //   console.log("file", file);
+      //   console.log("workbook", workbook);
+      //   console.log("数据", workbook.Sheets["工作表1"]["G32"].h);
+      // });
+    }
+
+    // 生命周期
+    private created(): void { }
+    private mounted(): void {
+      this.$nextTick(() => {
+        // console.log("调用", EMacro);
+      });
+    }
+    private updated(): void { }
+    private destroyed(): void { }
+
+  }
+</script>
+
+<style lang="less" scoped>
+  @import "index.less";
+</style>

package/src/views/HomeView.vue

@@ -8,12 +8,14 @@
 <script lang="ts">
   import { Component, Vue } from "vue-property-decorator";
   import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
+  import MessageBoxTest from "@/components/MessageBoxTest";  
   import axios from "axios";
   import $ from 'jquery'
 
   @Component({
     components: {
       HelloWorld,
+      MessageBoxTest
     },
     mounted() {
       // console.log("测试", axios.post);

package/src/vue-prototype.d.ts

@@ -0,0 +1,7 @@
+import { VueConstructor } from 'vue';
+
+declare module 'vue/types/vue' {
+	interface VueConstructor {
+		entryName: string;
+	}
+}

package/tsconfig.json

@@ -33,6 +33,7 @@
       ]
     },
     "typeRoots": [
+      "/@types",
       "./node_modules/@types"
     ],
     "lib": [
@@ -51,7 +52,7 @@
     "src/**/*.vue",
     "tests/**/*.ts",
     "tests/**/*.tsx"
-  ], // 要打包的文件
+, "src/components/MessageBox.tsx"  ], // 要打包的文件
   "exclude": [
     "node_modules",
     "*.test.ts"

package/typings.d.ts

@@ -8,5 +8,5 @@
  */
 declare module "*.png";
 declare module "*.less";
-declare module "*.svg";
+declare module "*.svg"; 
 declare module "*.json";

package/webpack.config.js

@@ -3,6 +3,8 @@
 const path = require("path");
 // const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
 const webpack = require('webpack');
 
 const isProduction = process.env.NODE_ENV == "production";
@@ -22,6 +24,7 @@ const config = {
   },
   output: {
     filename: 'emacroh5lib.min.js',
+    // publicPath: process.env.NODE_ENV === "development" ? "/" : "/emacroh5lib/",
     path: path.resolve(__dirname, "dist"),
     library: {
       // do not specify a `name` here
@@ -48,9 +51,24 @@ const config = {
   ],
   module: {
     rules: [
+      {
+        test: /\.(vue)$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              esModule: false
+            }
+          }
+        ]
+      },
       {
         test: /\.(ts|tsx)$/i,
         loader: "ts-loader",
+        options: {
+          appendTsSuffixTo: [/\.(vue)$/],
+          transpileOnly: true //只进行语法转换, 不进行类型校验, 提高构建速度
+        },
         exclude: ["/node_modules/"],
       },
       {
@@ -62,7 +80,7 @@ const config = {
         use: [stylesHandler, "css-loader", "postcss-loader"],
       },
       {
-        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|ico)$/i,
         type: "asset/inline"
       },
 
@@ -75,7 +93,7 @@ const config = {
     alias: {
       '@': resolve('src')
     },
-    extensions: [".tsx", ".ts", ".js"],
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.json'],
   }
 };
 
@@ -84,6 +102,7 @@ module.exports = () => {
     config.mode = "production";
 
     config.plugins.push(new MiniCssExtractPlugin());
+    config.plugins.push(new VueLoaderPlugin());
   } else {
     config.mode = "development";
   }

package/src/views/File/index.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="app-container">
-    <button class="click-button" @click="test1">读取excel</button>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-import $ from "jquery";
-
-import * as echarts from "echarts";
-import EMacro from "../../utilities/File";
-
-/// <reference path = "../../utilities/File.ts" />
-
-@Component({
-  components: {},
-})
-@Component
-export default class Page extends Vue {
-  @Prop(Number) readonly msg!: number | undefined;
-  @Prop() private name!: string;
-
-  private currentTime = "";
-
-  public data_0 = {
-    page_index: 0,
-    page_size: 3,
-    data: [
-      { a: "面料类", b: "16500", c: "12063", d: "45.5%" },
-      { a: "面料类", b: "26500", c: "12063", d: "45.5%" },
-      { a: "面料类", b: "36500", c: "12063", d: "45.5%" },
-      { a: "面料类", b: "46500", c: "12063", d: "45.5%" },
-      { a: "面料类", b: "56500", c: "12063", d: "45.5%" },
-    ],
-  };
-
-  // 计算属性
-  private get reversedMessage(): string {
-    return this.currentTime;
-  }
-
-  public test1(): void {
-    EMacro.File.readLocalExcel((file, workbook) => {
-      console.log("file", file);
-      console.log("workbook", workbook);
-      console.log("数据", workbook.Sheets["工作表1"]["G32"].h);
-    });
-  }
-
-  // 生命周期
-  private created(): void {}
-  private mounted(): void {
-    this.$nextTick(() => {
-      console.log("调用", EMacro);
-    });
-  }
-  private updated(): void {}
-  private destroyed(): void {}
-}
-</script>
-
-<style lang="less" scoped>
-@import "index.less";
-
-.app-container /deep/ .el-table .unchecked {
-  background: rgba(255, 192, 203, 0.35) !important;
-
-  td {
-    color: #fff !important;
-  }
-}
-</style>