jackchoumine
diff --git a/‎package.json‎
Lines changed: 7 additions & 2 deletions b/‎package.json‎
Lines changed: 7 additions & 2 deletions
diff --git a/‎src/components/HelloWorld.vue‎
Lines changed: 4 additions & 1 deletion b/‎src/components/HelloWorld.vue‎
Lines changed: 4 additions & 1 deletion
diff --git a/‎src/views/Home.vue‎
Lines changed: 1 addition & 1 deletion b/‎src/views/Home.vue‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎test.html‎
Lines changed: 36 additions & 0 deletions b/‎test.html‎
Lines changed: 36 additions & 0 deletions
@@ -1,12 +1,17 @@
 {
  "name": "hello-vue",
  "version": "0.1.0",
- "private": true,
+ "private": false,
+ "files": [
+ "dist",
+ "package.json"
+ ],
+ "unpkg":"dist/ng-bi.min.js",
  "scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
- "wc": "vue-cli-service build --target wc --name ng-bi './src/views/web-component/components/*.vue'"
+ "wc": "vue-cli-service build --target wc --name ng-bi './src/components/*.vue'"
  },
  "dependencies": {
  "core-js": "^3.6.4",
 
@@ -8,7 +8,10 @@
 export default {
  name: 'HelloWorld',
  props: {
- msg: String
+ msg: {
+ type: String,
+ default: 'Hello World!'
+ }
  },
  data() {
  return {}
 
@@ -1,6 +1,6 @@
 <template>
  <div>
- <HelloWorld msg="Welcome to Your Vue.js App" />
+ <HelloWorld />
  <MyVueName />
  <MyRating />
  </div>
 
@@ -0,0 +1,36 @@
+<!--
+ * @Description :
+ * @Date : 2022-01-17 00:09:08 +0800
+ * @Author : JackChou
+ * @LastEditTime: 2022-01-17 00:22:54 +0800
+ * @LastEditors : JackChou
+-->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+ <script src="https://unpkg.com/vue"></script>
+ <script type="module" src="https://unpkg.com/web-components-jack"></script>
+ <script src="/dist/ng-bi.min.js"></script>
+ <script>
+ // NOTE 告诉 vue 哪些时自定义元素
+ Vue.config.ignoredElements = ['my-rating', 'my-name']
+ document.addEventListener("DOMContentLoaded", () => {
+ const myRating = document.querySelector('ng-bi-my-rating')
+ myRating.buttonOptions = { size: 'mini', round: true }
+ })
+ </script>
+</head>
+
+<body>
+ <ng-bi-hello-world msg="从 vue component 到 web-component"></ng-bi-hello-world>
+ <ng-bi-hello-world></ng-bi-hello-world>
+ <ng-bi-my-name></ng-bi-my-name>
+ <ng-bi-my-rating></ng-bi-my-rating>
+</body>
+
+</html>