前端-renren-ui学习

有语忆语

于 2024-04-16 17:37:26 发布

阅读量501

点赞数 1

分类专栏：前端文章标签：前端 ui 学习

本文链接：https://blog.csdn.net/qq_44696532/article/details/137833204

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、index.html解析

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>人人开源 - 快速开发平台</title>
    <script>
      //全局钩子
      /*
      * 定义了一个全局变量 SITE_CONFIG，其中包含了应用程序中的一些配置信息。具体含义如下：

apiURL: "<%=apiURL%>": 这是一个 API 的 URL 地址。
* 在代码中使用了 <%=apiURL%> 这样的语法，它可能是一个模板字符串或者模板引擎的语法，用来动态地将实际的 API 地址填充到这个位置。
* 换句话说，这个字段存储了应用程序需要与后端通信的接口地址。
通过将这些配置信息存储在 SITE_CONFIG 对象中，并将其定义为全局变量，可以在应用程序的任何地方方便地访问和使用这些配置信息，
* 而不需要重复地在各个模块中定义或引入。
      *
      *
      * */

      window.SITE_CONFIG = {
        //api
        apiURL: "<%=apiURL%>"
      };
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

二、App.vue解析

<script lang="ts">
import "@/assets/css/app.less";
import "@/assets/theme/index.less";
import "@/assets/theme/mobile.less";
import FullscreenLayout from "@/layout/fullscreen-layout.vue";
import Layout from "@/layout/index.vue";
import { ElConfigProvider } from "element-plus";
import { defineComponent, onMounted, reactive, watch } from "vue";
import { useRoute } from "vue-router";
import { useAppStore } from "@/store";
import app from "./constants/app";
import { EPageLayoutEnum, EThemeColor, EThemeSetting } from "./constants/enum";
import { IObject } from "./types/interface";
import { getThemeConfigCache, setThemeColor, updateTheme } from "./utils/theme";

export default defineComponent({ /*这里使用 defineComponent 函数创建了一个 Vue 组件，并通过 export default 将其导出为默认模块*/
  name: "App", /*组件的名称，命名为 "App"*/
  components: { Layout, FullscreenLayout, [ElConfigProvider.name]: ElConfigProvider }, /*这里声明了组件中引入的其他组件。Layout、FullscreenLayout 和 ElConfigProvider 是其他组件，通过这种方式在当前组件中注册，以便在模板中使用*/
  setup() { /*这是 Composition API 的入口函数，用于组件的逻辑设置。*/
    const store = useAppStore();/*使用 useAppStore() hook 获取应用程序的状态管理仓库。*/
    const route = useRoute();/*使用 useRoute() hook 获取当前路由信息*/
    const state = reactive({
      layout: location.href.includes("pop=true") ? EPageLayoutEnum.fullscreen : EPageLayoutEnum.page
    }); /*使用 reactive() 函数创建一个响应式对象 state，其中包含了组件内部的状态，包括了布局信息*/
    onMounted(() => {/*在组件被挂载后执行的钩子函数，用于在组件挂载后执行一些操作，如在此处进行主题色缓存的读取和主题更新*/
      //读取主题色缓存
      const themeCache = getThemeConfigCache();
      const themeColor = themeCache[EThemeSetting.ThemeColor];
      setThemeColor(EThemeColor.ThemeColor, themeColor);
      updateTheme(themeColor);
    });
    /*用于监听某些数据的变化，并在数据变化时执行相应的操作。在此处监听了路由信息的变化，根据路由信息更新了组件的布局状态*/
    watch(
      () => [route.path, route.query, route.fullPath],
      ([path, query, fullPath]) => {
        store.updateState({ activeTabName: fullPath });
        state.layout = app.fullscreenPages.includes(path as string) || (query as IObject)["pop"] ? EPageLayoutEnum.fullscreen : EPageLayoutEnum.page;
      }
    );
    /*返回一个对象，其中包含了组件中需要在模板中访问的属性和方法，这些属性和方法会被绑定到组件的模板中*/
    return {
      store,
      state,
      pageTag: EPageLayoutEnum.page
    };
  }
});
</script>
<template>
  <el-config-provider>
    <div v-if="!store.state.appIsRender" v-loading="true" :element-loading-fullscreen="true" :element-loading-lock="true" style="width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 99999; background: #fff"></div>
    <template v-if="store.state.appIsReady">
      <layout v-if="state.layout === pageTag"> </layout>
      <fullscreen-layout v-else></fullscreen-layout> <!--自定义组件，全局布局-->
    </template>
  </el-config-provider>
</template>

三、main.ts解析

import "@/assets/icons/iconfont/iconfont.js";
import RenDeptTree from "@/components/ren-dept-tree";
import RenRadioGroup from "@/components/ren-radio-group";
import RenRegionTree from "@/components/ren-region-tree";
import RenSelect from "@/components/ren-select";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/display.css";
import "element-plus/theme-chalk/index.css";
import locale from "element-plus/es/locale/lang/zh-cn";
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import * as ElementPlusIcons from "@element-plus/icons-vue";

import axios from "axios";
import "virtual:svg-icons-register";

const app = createApp(App);  /*创建了一个 Vue 应用实例 app，并将其初始化为一个使用 App 组件的应用。*/

/*总之，这段代码的作用是将 Element Plus 图标组件注册到 Vue 应用实例中，以便在应用中使用这些图标。*/
Object.keys(ElementPlusIcons).forEach((iconName) => {
  app.component(iconName, ElementPlusIcons[iconName as keyof typeof ElementPlusIcons]); /*在 Vue 应用实例 app 中注册了 Element Plus 图标组件。iconName 是当前图标的名称，ElementPlusIcons[iconName] 获取了对应图标的组件。keyof typeof ElementPlusIcons 是 TypeScript 中的一种类型声明，它确保我们在访问 ElementPlusIcons 对象时使用的键是该对象实际上具有的键之一*/
});/*使用 Object.keys() 方法获取了 ElementPlusIcons 对象的所有键（即图标的名称），然后通过 forEach 方法遍历每个键。 */


/*这段代码是在一个 Vue.js 应用中配置各种插件和组件，然后将应用挂载到 HTML 页面上*/
app
  .use(createPinia()) /*使用了 Vue.js 的状态管理库 Pinia，通过 createPinia() 函数创建了一个 Pinia 实例，并将其添加到 Vue 应用中*/
  .use(router)        /*使用了 Vue Router，将 Vue Router 实例添加到 Vue 应用中，以便进行页面路由导航。*/
  .use(RenRadioGroup) /*使用了自定义的 RenRadioGroup 组件，将其添加到 Vue 应用中。*/
  .use(RenSelect)     /**/
  .use(RenDeptTree)
  .use(RenRegionTree)
  .use(ElementPlus, { size: "default", locale: locale })   /*在 Vue 应用实例 app 中注册了 Element Plus 图标组件。iconName 是当前图标的名称，ElementPlusIcons[iconName] 获取了对应图标的组件。keyof typeof ElementPlusIcons 是 TypeScript 中的一种类型声明，它确保我们在访问 ElementPlusIcons 对象时使用的键是该对象实际上具有的键之一*/
  .mount("#app"); /*将 Vue 应用实例挂载到 HTML 页面上的一个具有 id 为 "app" 的 DOM 元素上，这是 Vue 应用的根元素。也就是index.html */


/*将 axios 赋值给全局对象 window 的一个属性 axios。
这样做的目的是在浏览器环境中，可以通过 window.axios 来访问和使用 axios，而无需在每个模块中单独引入和使用 axios。
这种做法在某些情况下可以方便地在整个应用程序中共享和使用 axios，但也可能增加了全局变量的数量，因此需要谨慎使用*/
window.axios = axios;