init项目

frontend/src/api/main.js

@@ -0,0 +1,13 @@
+
+/**
+ * 主进程与渲染进程通信频道定义
+ * Definition of communication channels between main process and rendering process
+ */
+const ipcApiRoute = {
+  test: 'controller.example.test',
+}
+
+export {
+  ipcApiRoute
+}
+

frontend/src/assets/styles/tailMain.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/constants/localStore.ts

@@ -0,0 +1,2 @@
+/*文件说明：本文件用来定义一些本地缓存的key*/
+

frontend/src/main.ts

@@ -0,0 +1,37 @@
+
+import {createApp} from 'vue'
+// element-plus
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+
+// 使用pinia
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import Router from './router/index';
+
+// 引入tailwindcss
+import '@/assets/styles/tailMain.css'
+
+//创建实例
+const app = createApp(App)
+const setupAll = async () => {
+    app
+        .use(Router) // 使用路由
+        .use(ElementPlus) // 使用ele-plus组件
+        .use(createPinia()) // 使用pinia
+
+    // 自动引入图标
+    Object.keys(ElementPlusIconsVue).forEach((key) => {
+        app.component(key, ElementPlusIconsVue[key]);
+    });
+
+    //待路由初始化完毕后，挂载app
+    await Router.isReady()
+}
+
+//挂载app
+setupAll().then(() => {
+    app.mount('#app')
+})

frontend/src/router/index.ts

@@ -0,0 +1,20 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import routerMap from './routerMap'
+
+const Router = createRouter({
+  history: createWebHashHistory(),
+  routes: routerMap,
+})
+
+
+Router.beforeEach((to, from, next) => {
+  next()
+})
+
+// 路由加载后
+Router.afterEach(() => {
+
+})
+
+
+export default Router

frontend/src/router/routerMap.ts

@@ -0,0 +1,15 @@
+import Login from '@/views/Login.vue'
+
+/**
+ * 基础路由
+ * @type { *[] }
+ */
+const constantRouterMap = [
+  {
+    path: '/',
+    name: 'login',
+    component: Login
+  },
+]
+
+export default constantRouterMap

frontend/src/utils/ipcRenderer.js

@@ -0,0 +1,33 @@
+const Renderer = (window.require && window.require('electron')) || window.electron || {};
+
+/**
+ * ipc
+ * 官方api说明：https://www.electronjs.org/zh/docs/latest/api/ipc-renderer
+ * 
+ * 属性/方法
+ * ipc.invoke(channel, param) - 发送异步消息（invoke/handle 模型）
+ * ipc.sendSync(channel, param) - 发送同步消息（send/on 模型）
+ * ipc.on(channel, listener) - 监听 channel, 当新消息到达，调用 listener
+ * ipc.once(channel, listener) - 添加一次性 listener 函数
+ * ipc.removeListener(channel, listener) - 为特定的 channel 从监听队列中删除特定的 listener 监听者
+ * ipc.removeAllListeners(channel) - 移除所有的监听器，当指定 channel 时只移除与其相关的所有监听器
+ * ipc.send(channel, ...args) - 通过channel向主进程发送异步消息
+ * ipc.postMessage(channel, message, [transfer]) - 发送消息到主进程
+ * ipc.sendTo(webContentsId, channel, ...args) - 通过 channel 发送消息到带有 webContentsId 的窗口
+ * ipc.sendToHost(channel, ...args) - 消息会被发送到 host 页面上的 <webview> 元素
+ */
+
+/**
+ * ipc
+ */
+const ipc = Renderer.ipcRenderer || undefined;
+
+/**
+ * 是否为EE环境
+ */
+const isEE = ipc ? true : false;
+
+export {
+  Renderer, ipc, isEE
+};
+

frontend/src/views/Child.vue

@@ -0,0 +1,15 @@
+<template>
+  <div></div>
+</template>
+<script setup lang='ts'>
+defineOptions({
+  name: "componentName"
+})
+import {ref, reactive} from 'vue'
+let select = ref(1)
+
+defineExpose({ select })
+</script>
+<style scoped>
+
+</style>

frontend/src/views/Login.vue

@@ -0,0 +1,36 @@
+<template>
+  <div ref="loginContent" class="text-xl text-red-600">
+    <!--用户名密码，暂时不做图形验证码-->
+    <h1 ref="loginTitle">123</h1>
+    <Child  ref="child"/>
+  </div>
+</template>
+
+<script setup lang='ts'>
+defineOptions({
+  name: "Login"
+})
+import {ref, reactive,onMounted} from 'vue'
+import Child from './Child.vue'
+let loginContent = ref()
+let loginTitle = ref()
+let child = ref()
+
+function showLog(){
+  console.log(child.value)
+}
+
+showLog()
+
+console.log(loginTitle.value);
+console.log(child.value);
+onMounted(() => {
+console.log(loginTitle.value);
+console.log(child.value);
+});
+
+
+</script>
+<style scoped>
+
+</style>