diff --git a/src/assets/meme_crying_kim_kardashian.svg b/src/assets/meme_crying_kim_kardashian.svg new file mode 100644 index 0000000..2862433 --- /dev/null +++ b/src/assets/meme_crying_kim_kardashian.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/meme_doge_dog.svg b/src/assets/meme_doge_dog.svg new file mode 100644 index 0000000..6f1d46d --- /dev/null +++ b/src/assets/meme_doge_dog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/meme_hide_the_pain_harold.svg b/src/assets/meme_hide_the_pain_harold.svg new file mode 100644 index 0000000..bc8affb --- /dev/null +++ b/src/assets/meme_hide_the_pain_harold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/meme_leonardo_dicaprio_laughing.svg b/src/assets/meme_leonardo_dicaprio_laughing.svg new file mode 100644 index 0000000..97ac2e4 --- /dev/null +++ b/src/assets/meme_leonardo_dicaprio_laughing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/meme_sad_frog.svg b/src/assets/meme_sad_frog.svg new file mode 100644 index 0000000..bc03bcd --- /dev/null +++ b/src/assets/meme_sad_frog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/meme_salt_bae.svg b/src/assets/meme_salt_bae.svg new file mode 100644 index 0000000..323ae2e --- /dev/null +++ b/src/assets/meme_salt_bae.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/ComponentA.vue b/src/components/ComponentA.vue index 4227b60..79bea42 100644 --- a/src/components/ComponentA.vue +++ b/src/components/ComponentA.vue @@ -1,6 +1,6 @@ diff --git a/src/components/ComponentB.vue b/src/components/ComponentB.vue index 228aa10..f88e130 100644 --- a/src/components/ComponentB.vue +++ b/src/components/ComponentB.vue @@ -1,6 +1,6 @@ diff --git a/src/components/ComponentC.vue b/src/components/ComponentC.vue index e1d462e..822d38b 100644 --- a/src/components/ComponentC.vue +++ b/src/components/ComponentC.vue @@ -1,6 +1,6 @@ diff --git a/src/components/ComponentD.vue b/src/components/ComponentD.vue new file mode 100644 index 0000000..2a4627d --- /dev/null +++ b/src/components/ComponentD.vue @@ -0,0 +1,16 @@ + + + + + \ No newline at end of file diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue index d5b3be9..98bf36b 100644 --- a/src/components/SideMenu.vue +++ b/src/components/SideMenu.vue @@ -11,8 +11,8 @@ + + \ No newline at end of file diff --git a/src/components/VLoading.vue b/src/components/VLoading.vue new file mode 100644 index 0000000..f81620c --- /dev/null +++ b/src/components/VLoading.vue @@ -0,0 +1,40 @@ + + + + + \ No newline at end of file diff --git a/src/components/async/VAsyncComp1.vue b/src/components/async/VAsyncComp1.vue new file mode 100644 index 0000000..102a408 --- /dev/null +++ b/src/components/async/VAsyncComp1.vue @@ -0,0 +1,20 @@ + + + + + \ No newline at end of file diff --git a/src/components/async/VAsyncComp2.vue b/src/components/async/VAsyncComp2.vue new file mode 100644 index 0000000..d2f51c9 --- /dev/null +++ b/src/components/async/VAsyncComp2.vue @@ -0,0 +1,20 @@ + + + + + \ No newline at end of file diff --git a/src/components/async/VAsyncComp3.vue b/src/components/async/VAsyncComp3.vue new file mode 100644 index 0000000..0852d7f --- /dev/null +++ b/src/components/async/VAsyncComp3.vue @@ -0,0 +1,20 @@ + + + + + \ No newline at end of file diff --git a/src/installComponents.ts b/src/installComponents.ts index d93b4ec..26b7d50 100644 --- a/src/installComponents.ts +++ b/src/installComponents.ts @@ -1,12 +1,12 @@ import type { App } from "vue"; import ComponentA from "./components/ComponentA.vue"; import ComponentB from "./components/ComponentB.vue"; -// import ComponentC from "./components/ComponentC.vue"; +import ComponentC from "./components/ComponentC.vue"; const install = function (app: App) { app.component("ComponentA", ComponentA); app.component("ComponentB", ComponentB); - // app.component("ComponentC", ComponentC); + app.component("ComponentC", ComponentC); }; export { diff --git a/src/main.ts b/src/main.ts index d602a01..6c84aa2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,15 +1,15 @@ -import './styles/index.less' -import { createApp } from 'vue' -import { createPinia } from 'pinia' -import App from './App.vue' -import router from './router' +import "./styles/index.less"; +import { createApp } from "vue"; +import { createPinia } from "pinia"; +import App from "./App.vue"; +import router from "./router"; import { install } from "./installComponents"; -const app = createApp(App) +const app = createApp(App); -app.use(createPinia()) -app.use(router) -install(app) -app.mount('#app') +app.use(createPinia()); +app.use(router); +install(app); +app.mount("#app"); -console.log("-------", import.meta.env) \ No newline at end of file +console.log("-------", import.meta.env); \ No newline at end of file diff --git a/src/router/routes.ts b/src/router/routes.ts index bbf2890..e519655 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -124,6 +124,12 @@ const routes = [ meta: { title: "局部组件" }, component: () => import("@/views/component/PartComponent.vue") }, + { + path: "/component/recursion", + name: "recursionComponent", + meta: { title: "递归组件" }, + component: () => import("@/views/component/RecursionComponent.vue") + }, { path: "/component/var", name: "varComponent", @@ -133,8 +139,20 @@ const routes = [ { path: "/component/varadvan", name: "varComponentAdvan", - meta: { title: "动态组件" }, + meta: { title: "动态组件实战" }, component: () => import("@/views/component/VarComponentAdvan.vue") + }, + { + path: "/component/async", + name: "asyncComponent", + meta: { title: "异步组件" }, + component: () => import("@/views/component/AsyncComponent.vue") + }, + { + path: "/component/asyncvar", + name: "asyncVarComponent", + meta: { title: "异步动态组件" }, + component: () => import("@/views/component/AsyncVarComponent.vue") } ] } diff --git a/src/views/component/AsyncComponent.vue b/src/views/component/AsyncComponent.vue new file mode 100644 index 0000000..c97e6bf --- /dev/null +++ b/src/views/component/AsyncComponent.vue @@ -0,0 +1,59 @@ + + + + + \ No newline at end of file diff --git a/src/views/component/AsyncVarComponent.vue b/src/views/component/AsyncVarComponent.vue new file mode 100644 index 0000000..3821724 --- /dev/null +++ b/src/views/component/AsyncVarComponent.vue @@ -0,0 +1,61 @@ + + + + + \ No newline at end of file diff --git a/src/views/component/PartComponent.vue b/src/views/component/PartComponent.vue index 0511c81..7fee92d 100644 --- a/src/views/component/PartComponent.vue +++ b/src/views/component/PartComponent.vue @@ -1,11 +1,11 @@ \ No newline at end of file diff --git a/src/views/component/VarComponent.vue b/src/views/component/VarComponent.vue index 1f22b3a..265db16 100644 --- a/src/views/component/VarComponent.vue +++ b/src/views/component/VarComponent.vue @@ -1,14 +1,14 @@ \ No newline at end of file + \ No newline at end of file diff --git a/src/views/computed/ComputedBase.vue b/src/views/computed/ComputedBase.vue index 68a1be0..68e7d1a 100644 --- a/src/views/computed/ComputedBase.vue +++ b/src/views/computed/ComputedBase.vue @@ -6,15 +6,15 @@