adding testView

src/components/TestComp.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h3>{{ msg }}</h3>
+    <div>
+      <h2>從 props 來的 parentMsg ==> {{ parentMsg }}</h2>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  // props: { product: Object },
+  props: ["parentMsg"],
+  data() {
+    return {
+      msg: "child Test Component",
+    };
+  },
+  mounted() {
+    //
+    // console.log("image-container: ", this.product);
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/router/index.js

@@ -1,11 +1,18 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import ProductList from "../components/products/ProductList.vue";
+import TestView from "../view/TestView.vue";
 import ProductDetail from "../components/products/ProductDetail.vue";
 import CartView from "../components/carts/CartView.vue";
 
 Vue.use(VueRouter);
 const routes = [
+  {
+    path: "/test",
+    component: TestView,
+    name: "test",
+    props: true,
+  },
   {
     path: "/cate/:cateID",
     component: ProductList,

src/view/TestView.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <TestComp v-bind:parent-msg="msg" />
+  </div>
+</template>
+
+<script>
+import TestComp from "@/components/TestComp.vue";
+
+export default {
+  components: {
+    TestComp,
+  },
+  data() {
+    return {
+      msg: "Parent, Test View",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

tsconfig.json

@@ -0,0 +1,24 @@
+{
+	"extends": "@vue/tsconfig/tsconfig.web.json",
+	"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts"],
+	"compilerOptions": {
+		"moduleResolution": "node", //指定模組解析策略, solution for Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?
+		"target": "es6", //指定編譯生成的JS版本
+		"module": "es2020", //指定生成哪種模組
+		// "strict": true, //啟用所有嚴格類型檢查選項
+		"esModuleInterop": true, //兼容模組導入的方式
+		"skipLibCheck": true, // 不會檢查引入的函式庫檔案
+		"forceConsistentCasingInFileNames": true, //確保檔案的大小寫一致
+		"baseUrl": ".",
+		"allowJs": true,
+		"paths": {
+			"@/*": ["./src/*"]
+		},
+		"ignoreDeprecations": "5.0"
+	},
+	"references": [
+		{
+			"path": "./tsconfig.node.json"
+		}
+	]
+}

tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+	"extends": "@vue/tsconfig/tsconfig.node.json",
+	"include": [
+		"vite.config.*",
+		"vitest.config.*",
+		"cypress.config.*",
+		"playwright.config.*"
+	],
+	"compilerOptions": {
+		"composite": true,
+		"types": ["node"]
+	}
+}