<%= htmlWebpackPlugin.options.title %>

├── babel.config.js ├── easytodoIco.ico ├── easytodo_DB.db ├── public ├── favicon.ico └── index.html ├── src ├── assets │ └── logo.png ├── main.js ├── util │ └── dateFormatter.js ├── components │ ├── MainLoading.vue │ └── TodoItem.vue ├── background.js └── App.vue ├── jsconfig.json ├── .gitignore ├── vue.config.js ├── README.md └── package.json /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /easytodoIco.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MagicianBlackH/EasyTodo__Vue3-electron-sqlite3/HEAD/easytodoIco.ico -------------------------------------------------------------------------------- /easytodo_DB.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MagicianBlackH/EasyTodo__Vue3-electron-sqlite3/HEAD/easytodo_DB.db -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MagicianBlackH/EasyTodo__Vue3-electron-sqlite3/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MagicianBlackH/EasyTodo__Vue3-electron-sqlite3/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import 'ant-design-vue/dist/antd.css' 4 | import naive from 'naive-ui' 5 | 6 | const app = createApp(App) 7 | app.use(naive).mount('#app') 8 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | 25 | #Electron-builder output 26 | /dist_electron -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true, 4 | publicPath: './', 5 | pluginOptions: { 6 | electronBuilder: { 7 | chainWebpackMainProcess: (config) => { 8 | config.output.filename('background.js'); 9 | }, 10 | nodeIntegration: true, 11 | builderOptions: { 12 | appId: 'hpc.easytodo.app', 13 | productName: 'EasyTodo', 14 | copyright: 'Copyright © 2022', 15 | win: { 16 | icon: './easytodoIco.ico', 17 | target: "portable" 18 | }, 19 | extraResources: { 20 | from: './easytodo_DB.db', 21 | to: './' 22 | } 23 | } 24 | }, 25 | } 26 | }) 27 | -------------------------------------------------------------------------------- /src/util/dateFormatter.js: -------------------------------------------------------------------------------- 1 | export default function formatDate(date, format) { 2 | if (!date) { 3 | return ''; 4 | } 5 | 6 | if (!format) { 7 | format = 'yyyy-MM-dd'; 8 | } 9 | 10 | const year = date.getFullYear(); 11 | const month = date.getMonth() + 1; 12 | const day = date.getDate(); 13 | const hour = date.getHours(); 14 | const minute = date.getMinutes(); 15 | const second = date.getSeconds(); 16 | 17 | return format 18 | .replace(/yyyy/g, year) 19 | .replace(/MM/g, month < 10 ? `0${month}` : month) 20 | .replace(/dd/g, day < 10 ? `0${day}` : day) 21 | .replace(/HH/g, hour < 10 ? `0${hour}` : hour) 22 | .replace(/mm/g, minute < 10 ? `0${minute}` : minute) 23 | .replace(/ss/g, second < 10 ? `0${second}` : second); 24 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-easytodo 2 | 3 | ## 运行项目 4 | 5 | ### 初始化项目安装依赖 6 | ``` 7 | vue add electron-builder 8 | ``` 9 | ``` 10 | npm install 11 | ``` 12 | 13 | ### 运行测试 14 | ``` 15 | npm run electron:serve 16 | ``` 17 | 18 | ### 打包 19 | ``` 20 | npm run electron:build 21 | ``` 22 | 注意：打包前先到 App.vue 中更换一下 databaseUrl ，ctrl+F 找一下就能找到。 23 | 打包后只有 win-unpacked 文件夹是有用的，其他都能删掉，进入程序也从 win-unpacked 里面的 exe 文件进。 24 | 25 | ## 软件游玩 26 | 日历视图和任务视图的数据是同步的，只是叫法不同。 27 | 28 | ### 日历视图 29 | 点击每一个日历单元格可以新增日程，悬浮在每条日程上可以进行日程状态更改和删除。 30 | ![image](https://github.com/MagicianBlackH/my-image-hosting-service/blob/master/EasyTodo_Vue3-electron-sqlite3/CanlendarView1.png?raw=true) 31 | ![image](https://github.com/MagicianBlackH/my-image-hosting-service/blob/master/EasyTodo_Vue3-electron-sqlite3/CanlendarView2.png?raw=true) 32 | 33 | ### 任务视图 34 | 任务视图右侧表单可以新增任务，左侧显示的任务可以进行任务状态更改和删除。 35 | ![image](https://github.com/MagicianBlackH/my-image-hosting-service/blob/master/EasyTodo_Vue3-electron-sqlite3/TaskView.png?raw=true) 36 | -------------------------------------------------------------------------------- /src/components/MainLoading.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | 25 | 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-easytodo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "electron:build": "vue-cli-service electron:build", 10 | "electron:serve": "vue-cli-service electron:serve", 11 | "postinstall": "electron-builder install-app-deps", 12 | "postuninstall": "electron-builder install-app-deps" 13 | }, 14 | "main": "background.js", 15 | "dependencies": { 16 | "ant-design-vue": "^3.1.1", 17 | "better-sqlite3": "^7.5.1", 18 | "core-js": "^3.8.3", 19 | "electron": "^18.0.4", 20 | "rebuild": "^0.1.2", 21 | "sqlite3": "^5.0.3", 22 | "vue": "^3.2.13" 23 | }, 24 | "devDependencies": { 25 | "@babel/core": "^7.12.16", 26 | "@babel/eslint-parser": "^7.12.16", 27 | "@vicons/fluent": "^0.12.0", 28 | "@vue/cli-plugin-babel": "~5.0.0", 29 | "@vue/cli-plugin-eslint": "~5.0.0", 30 | "@vue/cli-service": "~5.0.0", 31 | "electron": "^13.0.0", 32 | "electron-devtools-installer": "^3.1.0", 33 | "eslint": "^7.32.0", 34 | "eslint-plugin-vue": "^8.0.3", 35 | "naive-ui": "^2.28.0", 36 | "vue-cli-plugin-electron-builder": "~2.1.1" 37 | }, 38 | "eslintConfig": { 39 | "root": true, 40 | "env": { 41 | "node": true 42 | }, 43 | "extends": [ 44 | "plugin:vue/vue3-essential", 45 | "eslint:recommended" 46 | ], 47 | "parserOptions": { 48 | "parser": "@babel/eslint-parser" 49 | }, 50 | "rules": {} 51 | }, 52 | "browserslist": [ 53 | "> 1%", 54 | "last 2 versions", 55 | "not dead", 56 | "not ie 11" 57 | ] 58 | } 59 | -------------------------------------------------------------------------------- /src/background.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { app, protocol, BrowserWindow, Menu } from 'electron' 4 | import { createProtocol } from 'vue-cli-plugin-electron-builder/lib' 5 | // import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer' 6 | const isDevelopment = process.env.NODE_ENV !== 'production' 7 | Menu.setApplicationMenu(null) 8 | 9 | // Scheme must be registered before the app is ready 10 | protocol.registerSchemesAsPrivileged([ 11 | { scheme: 'app', privileges: { secure: true, standard: true } } 12 | ]) 13 | 14 | async function createWindow() { 15 | // Create the browser window. 16 | const win = new BrowserWindow({ 17 | width: 1280, 18 | height: 720, 19 | webPreferences: { 20 | 21 | // Use pluginOptions.nodeIntegration, leave this alone 22 | // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info 23 | nodeIntegration: true, 24 | contextIsolation: false 25 | } 26 | }) 27 | 28 | if (process.env.WEBPACK_DEV_SERVER_URL) { 29 | // Load the url of the dev server if in development mode 30 | await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL) 31 | if (!process.env.IS_TEST) win.webContents.openDevTools() 32 | } else { 33 | createProtocol('app') 34 | // Load the index.html when not in development 35 | win.loadURL('app://./index.html') 36 | } 37 | } 38 | 39 | // Quit when all windows are closed. 40 | app.on('window-all-closed', () => { 41 | // On macOS it is common for applications and their menu bar 42 | // to stay active until the user quits explicitly with Cmd + Q 43 | if (process.platform !== 'darwin') { 44 | app.quit() 45 | } 46 | }) 47 | 48 | app.on('activate', () => { 49 | // On macOS it's common to re-create a window in the app when the 50 | // dock icon is clicked and there are no other windows open. 51 | if (BrowserWindow.getAllWindows().length === 0) createWindow() 52 | }) 53 | 54 | // This method will be called when Electron has finished 55 | // initialization and is ready to create browser windows. 56 | // Some APIs can only be used after this event occurs. 57 | app.on('ready', async () => { 58 | /* if (isDevelopment && !process.env.IS_TEST) { 59 | // Install Vue Devtools 60 | try { 61 | await installExtension(VUEJS3_DEVTOOLS) 62 | } catch (e) { 63 | console.error('Vue Devtools failed to install:', e.toString()) 64 | } 65 | } */ 66 | createWindow() 67 | }) 68 | 69 | // Exit cleanly on request from parent process in development mode. 70 | if (isDevelopment) { 71 | if (process.platform === 'win32') { 72 | process.on('message', (data) => { 73 | if (data === 'graceful-exit') { 74 | app.quit() 75 | } 76 | }) 77 | } else { 78 | process.on('SIGTERM', () => { 79 | app.quit() 80 | }) 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/components/TodoItem.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 98 | 99 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 159 | 160 | 660 | 661 | 755 | --------------------------------------------------------------------------------

EasyTodo

{{item.title}}