commit 6bb26dd514f061a636bb23a09fb1d1545df8f39c Author: gyq <875626088@qq.com> Date: Mon Feb 19 09:39:40 2024 +0800 提交源文件 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..c0a6e5a --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..e62e093 --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# Vue 3 + Vite + +This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..ce4050c --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "vite-electron", + "private": true, + "version": "0.0.0", + "main": "dist-electron/main.js", + "scripts": { + "dev": "chcp 65001 && vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "axios": "^1.6.2", + "element-plus": "^2.4.3", + "pinia": "^2.1.7", + "vue": "^3.3.8", + "vue-router": "^4.2.5" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^4.5.0", + "path": "^0.12.7", + "sass": "^1.69.5", + "sass-loader": "^13.3.2", + "tree-kill": "^1.2.2", + "vite": "^5.0.0", + "vite-plugin-electron": "^0.15.4", + "vite-plugin-electron-renderer": "^0.14.5" + } +} diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..b21e910 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..f0a2911 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/assets/vue.svg b/src/assets/vue.svg new file mode 100644 index 0000000..770e9d3 --- /dev/null +++ b/src/assets/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue new file mode 100644 index 0000000..f5e4f53 --- /dev/null +++ b/src/components/HelloWorld.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..11c0609 --- /dev/null +++ b/src/main.js @@ -0,0 +1,33 @@ +import { createApp } from "vue"; +import router from "./router/index.js"; +import App from "./App.vue"; +import ElementPlus from "element-plus"; +import zhCn from "element-plus/es/locale/lang/zh-cn"; +import "element-plus/dist/index.css"; +import "element-plus/theme-chalk/dark/css-vars.css"; +import store from "./store"; + +let matchMedia = window.matchMedia("(prefers-color-scheme: light)"); +setDarkMode(matchMedia.matches); +matchMedia.addEventListener("change", function () { + console.log(`当前的主题是:${this.matches ? "light" : "dark"}`); + setDarkMode(this.matches); +}); + +// 设置主题模式 +function setDarkMode(flag) { + if (flag) { + document.querySelector("#html").classList.add("light"); + document.querySelector("#html").classList.remove("dark"); + } else { + document.querySelector("#html").classList.add("dark"); + document.querySelector("#html").classList.remove("light"); + } +} + +const app = createApp(App); + +app.use(router); +app.use(store); +app.use(ElementPlus, { locale: zhCn }); +app.mount("#app"); diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..e372ea9 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,40 @@ +import { createRouter, createWebHashHistory } from "vue-router"; +import home from "@/views/home.vue"; + +const routes = [ + { + path: "/", + name: "home", + component: home, + }, + { + path: "/login", + name: "login", + meta: { + index: 0, + }, + component: () => import("@/views/login.vue"), + }, + { + path: "/register", + name: "register", + meta: { + index: 1, + }, + component: () => import("@/views/register.vue"), + }, +]; + +const router = createRouter({ + history: createWebHashHistory(), + routes, +}); + +router.beforeEach(async (to, from) => { + const token = localStorage.getItem("token"); + if (!token && to.name !== "login" && to.name !== "register") { + return { name: "login" }; + } +}); + +export default router; diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..e32948c --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,5 @@ +import { createPinia } from "pinia"; + +const store = createPinia(); + +export default store; diff --git a/src/store/user.js b/src/store/user.js new file mode 100644 index 0000000..d1e555c --- /dev/null +++ b/src/store/user.js @@ -0,0 +1,13 @@ +import { defineStore } from "pinia"; +export const useUserStore = defineStore({ + id: "user", + state: () => ({ + name: "张三", + token: "sas121sasdADSAD", + }), + actions: { + login(data) { + this.name = data; + }, + }, +}); diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..bb131d6 --- /dev/null +++ b/src/style.css @@ -0,0 +1,79 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000..e69de29 diff --git a/src/utils/request.js b/src/utils/request.js new file mode 100644 index 0000000..e100478 --- /dev/null +++ b/src/utils/request.js @@ -0,0 +1,8 @@ +import axios from "axios"; + +const request = axios.create({ + baseURL: "http://localhost", + timeout: 100000, +}); + +request.interceptors.request.use((config) => {}); diff --git a/src/views/home.vue b/src/views/home.vue new file mode 100644 index 0000000..7cf0e6a --- /dev/null +++ b/src/views/home.vue @@ -0,0 +1,13 @@ + + + diff --git a/src/views/login.vue b/src/views/login.vue new file mode 100644 index 0000000..1e3c64c --- /dev/null +++ b/src/views/login.vue @@ -0,0 +1,181 @@ + + + + + diff --git a/src/views/register.vue b/src/views/register.vue new file mode 100644 index 0000000..cf99c0f --- /dev/null +++ b/src/views/register.vue @@ -0,0 +1,185 @@ + + + + + diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..289540b --- /dev/null +++ b/vite.config.js @@ -0,0 +1,21 @@ +import { defineConfig } from "vite"; +import vue from "@vitejs/plugin-vue"; +import electron from "vite-plugin-electron"; +import electronRender from "vite-plugin-electron-renderer"; +import path from "path"; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + electron({ + entry: "electron/main.js", + }), + electronRender(), + ], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +});

{{ msg }}