diff --git a/.eslintrc.js b/.eslintrc.js index 3946991..be02f68 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -34,6 +34,7 @@ module.exports = { 'import/no-anonymous-default-export': 'off', 'import/no-namespace': 'off', 'import/no-unresolved': 'off', + 'import/no-unused-modules': 'off', 'no-restricted-syntax': [ 'error', ...baseRestrictedSyntax diff --git a/LICENSE b/LICENSE index 7f8b1f3..c189839 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2022 The Jared Wilcurt +Copyright (c) 2023 The Jared Wilcurt Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 31c0168..a2b8a17 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,9 @@ Run `npm run build` and you're ready to ship/deploy: Web App, Windows Installer, * **Vue-DevTools** - Built in to the Chromium dev tools * **Vite** - Dev Server/Bundler/App build tool * **Pinia** - Global State Management +* **Vue-Router** - Frontend routing/navigation * **Options API** - [Component organizational structure](https://user-images.githubusercontent.com/4629794/204181213-6c9bcece-62fb-4790-8fc2-7df546ca7df5.png) +* **Constants Plugin** - Gives you a [dedicated place to store constants](https://github.com/TheJaredWilcurt/vue-options-api-constants-plugin) in a component * **NW-Builder-Phoenix** - Automated desktop builds * **ESLint** - Code error prevention and stylistic consistency * Vue Linting @@ -73,7 +75,7 @@ Or even directly from the template (with some slight changes to work within the ## Running locally -1. Download/Fork/Clone repo +1. Download, Fork, or Clone this repo 1. Install a Node version manager: * [volta.sh](https://volta.sh) - Win/Lin/OSX * [nvm](https://github.com/nvm-sh/nvm) - Lin/OSX @@ -114,11 +116,12 @@ They take a long time. If you do `npm run build` expect it to take 10-30 minutes I set up Pinia in this project to save you time (and because it's amazing). If you don't need global state management for your project, you can remove Pinia by doing the following: * Delete the `/src/store` folder and its contents -* Delete `/src/components/PiniaDemo.vue` -* Delete `/tests/unit/components/PiniaDemo.test.js` -* Remove the lines of code from `/src/App.vue` that contain the text "PiniaDemo" +* Delete `/src/views/PiniaDemo.vue` +* Delete `/tests/unit/views/PiniaDemo.test.js` +* Remove the Pinia Demo `RouterLink` from `/src/App.vue` +* Remove import and route object relating to "PiniaDemo" from `/src/router/index.js` +* Remove the lines of code from `/tests/unit/test-helpers.js` that say "pinia" * Remove the lines of code from `/package.json` that say "pinia" -* Remove the lines of code from `/tests/unit/setup.js` that say "pinia" * `npm install && npm t -- -u` * `git add -A && git commit -m "Removed Pinia"` @@ -134,7 +137,7 @@ This will delete the existing version and download the latest version of Vue-Dev ## Alternatives -* [nw-vue-cli-example](https://github.com/nwutils/nw-vue-cli-example) - Uses Vue-CLI, has Vue 2 and Vue 3 branches. +* [nw-vue-cli-example](https://github.com/nwutils/nw-vue-cli-example) - Uses Vue-CLI (WebPack), has Vue 2 and Vue 3 branches. * [nwjs-vue](https://github.com/elegantweb/nwjs-vue) - Uses Vue-CLI 2 * [vue-desktop-basic](https://github.com/TheJaredWilcurt/vue-desktop-basic) - Does not use a build system at all, all `.vue` files run directly in the browser context * [nw-vue3-typescript-pinia](https://github.com/codeh2o/nw-vue3-typescript-pinia) - Fork of this repo but with TS added @@ -145,7 +148,7 @@ This will delete the existing version and download the latest version of Vue-Dev This is not for those *using* this repo, but for those *maintaining* it. 1. When updating the version of NW.js devDependency, also update these: - * `package.json` devDeps, build nwVersion + * `package.json` version, devDeps, build nwVersion * `build.target` in `vite.config.js` * Update the Chromium/Node version numbers at the top of the README * Update the Node version number in the README "Running Locally" diff --git a/package-lock.json b/package-lock.json index ca8f479..e0741ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,17 @@ { "name": "your-app-name", - "version": "1.0.2", + "version": "1.0.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "your-app-name", - "version": "1.0.2", + "version": "1.0.3", "dependencies": { "express": "^4.18.2" }, "devDependencies": { - "@babel/eslint-parser": "^7.22.10", + "@babel/eslint-parser": "^7.22.11", "@pinia/testing": "^0.1.3", "@vitejs/plugin-vue": "^4.3.3", "@vitest/coverage-v8": "^0.34.2", @@ -37,6 +37,8 @@ "vite": "^4.4.9", "vitest": "^0.34.2", "vue": "^3.3.4", + "vue-options-api-constants-plugin": "^1.0.1", + "vue-router": "^4.2.4", "wait-on": "^7.0.1" } }, @@ -118,9 +120,9 @@ } }, "node_modules/@babel/eslint-parser": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.22.10.tgz", - "integrity": "sha512-0J8DNPRXQRLeR9rPaUMM3fA+RbixjnVLe/MRMYCkp3hzgsSuxCHQ8NN8xQG1wIHKJ4a1DTROTvFJdW+B5/eOsg==", + "version": "7.22.11", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.22.11.tgz", + "integrity": "sha512-YjOYZ3j7TjV8OhLW6NCtyg8G04uStATEUe5eiLuCZaXz2VSDQ3dsAtm2D+TuQyAqNMUK2WacGo0/uma9Pein1w==", "dev": true, "dependencies": { "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1", @@ -9597,6 +9599,27 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/vue-options-api-constants-plugin": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/vue-options-api-constants-plugin/-/vue-options-api-constants-plugin-1.0.1.tgz", + "integrity": "sha512-gYmecYu+zOtfH+bDxb/7KHLXFLBladvtmCfj42q0WwwJMdPL6O7QvVo/UwCfdFQ4uwBlb1tkLgze9CGR5Y3AMQ==", + "dev": true + }, + "node_modules/vue-router": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.4.tgz", + "integrity": "sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==", + "dev": true, + "dependencies": { + "@vue/devtools-api": "^6.5.0" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "vue": "^3.2.0" + } + }, "node_modules/wait-on": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-7.0.1.tgz", diff --git a/package.json b/package.json index 96dd30c..b67c7ab 100644 --- a/package.json +++ b/package.json @@ -6,14 +6,14 @@ "To turn spell checking off, remove it from the chromium-args in this file" ], "name": "your-app-name", - "version": "1.0.2", + "version": "1.0.3", "main": "http://localhost:4175", "node-remote": "http://localhost:4175", "node-main": "", "window": { "width": 960, "height": 600, - "min_width": 700, + "min_width": 800, "min_height": 500, "icon": "public/icon.png" }, @@ -28,10 +28,10 @@ "build:nw": "build --concurrent --tasks win-x86,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .", "build:win": "npm run build:win:clean && npm run build:vue && build --tasks win-x86 --mirror https://dl.nwjs.io/ .", "build:lin": "npm run build:lin:clean && npm run build:vue && build --tasks linux-x64 --mirror https://dl.nwjs.io/ .", - "build:win:clean": "rimraf ./dist-vue ./dist/your-app-name-1.0.2-win-x86 ./dist/your-app-name-1.0.2-win-x86.zip ./dist/your-app-name-1.0.2-win-x86.7z ./dist/your-app-name-1.0.2-win-x86-Setup.exe", - "build:lin:clean": "rimraf ./dist-vue ./dist/your-app-name-1.0.2-linux-x64 ./dist/your-app-name-1.0.2-linux-x64.zip", - "run:win": "dist\\your-app-name-1.0.2-win-x86\\your-app-name.exe", - "run:lin": "./dist/your-app-name-1.0.2-linux-x64/your-app-name", + "build:win:clean": "rimraf ./dist-vue ./dist/your-app-name-1.0.3-win-x86 ./dist/your-app-name-1.0.3-win-x86.zip ./dist/your-app-name-1.0.3-win-x86.7z ./dist/your-app-name-1.0.3-win-x86-Setup.exe", + "build:lin:clean": "rimraf ./dist-vue ./dist/your-app-name-1.0.3-linux-x64 ./dist/your-app-name-1.0.3-linux-x64.zip", + "run:win": "dist\\your-app-name-1.0.3-win-x86\\your-app-name.exe", + "run:lin": "./dist/your-app-name-1.0.3-linux-x64/your-app-name", "regression": "rd /s /q node_modules & rd /s /q node_modules & rd /s /q node_modules & npm install && npm run lint && npm test && npm run build:win && npm run run:win", "lint": "eslint --ext .js,.vue --config=.eslintrc.js src vite.config.js .eslintrc.js", "fix": "eslint --fix --ext .js,.vue --config=.eslintrc.js src vite.config.js .eslintrc.js", @@ -42,7 +42,7 @@ "express": "^4.18.2" }, "devDependencies": { - "@babel/eslint-parser": "^7.22.10", + "@babel/eslint-parser": "^7.22.11", "@pinia/testing": "^0.1.3", "@vitejs/plugin-vue": "^4.3.3", "@vitest/coverage-v8": "^0.34.2", @@ -68,9 +68,11 @@ "vite": "^4.4.9", "vitest": "^0.34.2", "vue": "^3.3.4", + "vue-options-api-constants-plugin": "^1.0.1", + "vue-router": "^4.2.4", "wait-on": "^7.0.1" }, - "chromium-args": "--enable-spell-checking --load-extension='./node_modules/nw-vue-devtools-prebuilt/extension'", + "chromium-args": "--enable-spell-checking --load-extension='./node_modules/nw-vue-devtools-prebuilt/extension' --disable-features=ProcessPerSiteUpToMainFrameThreshold", "build": { "nwVersion": "v0.79.0", "nwFlavor": "normal", diff --git a/src/App.vue b/src/App.vue index ab8249b..faa0d01 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,89 +1,55 @@ diff --git a/src/assets/main.css b/src/assets/main.css index a06d76b..ba0dfa9 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -37,6 +37,16 @@ hr { margin: 15px 0px; } +textarea { + width: 100%; + min-height: 15rem; + background: #333; + border: 0px; + margin-top: 1rem; + padding: 0.5rem; + color: #CCC; +} + .flex { display: flex; } @@ -68,12 +78,7 @@ hr { @media (min-width: 1024px) { body { display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0px 2rem; + flex-direction: row; + justify-content: center; } } diff --git a/src/helpers/constants.js b/src/helpers/constants.js new file mode 100644 index 0000000..6aceb07 --- /dev/null +++ b/src/helpers/constants.js @@ -0,0 +1 @@ +export const APP_NAME = 'Your App Name Here'; diff --git a/src/main.js b/src/main.js index 0136480..d29c134 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,8 @@ import { createPinia } from 'pinia'; import { createApp } from 'vue'; +import constantsPlugin from 'vue-options-api-constants-plugin'; + +import { router } from '@/router/index.js'; import applyPrototypes from '@/helpers/applyPrototypes.js'; @@ -10,4 +13,6 @@ import '@/assets/main.css'; const app = createApp(App); applyPrototypes(app.config.globalProperties); app.use(createPinia()); +app.use(router); +app.use(constantsPlugin); app.mount('#app'); diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..89c081c --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,37 @@ +import { createRouter, createWebHashHistory } from 'vue-router'; + +import FsExample from '@/views/FsExample.vue'; +import HelloWorld from '@/views/HelloWorld.vue'; +import PiniaDemo from '@/views/PiniaDemo.vue'; +import ResourceLinks from '@/views/ResourceLinks.vue'; + +export const router = createRouter({ + history: createWebHashHistory(), + routes: [ + { + path: '/', + name: 'welcome', + component: HelloWorld + }, + { + path: '/fs', + name: 'fs', + component: FsExample + }, + { + path: '/pinia', + name: 'pinia', + component: PiniaDemo + }, + { + path: '/resources', + name: 'resources', + component: ResourceLinks + }, + { + path: '/:catchAll(.*)*', + name: '404', + redirect: '/' + } + ] +}); diff --git a/src/components/FsExample.vue b/src/views/FsExample.vue similarity index 79% rename from src/components/FsExample.vue rename to src/views/FsExample.vue index d711a72..7a9112a 100644 --- a/src/components/FsExample.vue +++ b/src/views/FsExample.vue @@ -21,8 +21,15 @@ @@ -52,3 +59,13 @@ export default { } }; + + diff --git a/src/components/HelloWorld.vue b/src/views/HelloWorld.vue similarity index 66% rename from src/components/HelloWorld.vue rename to src/views/HelloWorld.vue index 7409453..0457be0 100644 --- a/src/components/HelloWorld.vue +++ b/src/views/HelloWorld.vue @@ -1,12 +1,26 @@ diff --git a/src/components/PiniaDemo.vue b/src/views/PiniaDemo.vue similarity index 86% rename from src/components/PiniaDemo.vue rename to src/views/PiniaDemo.vue index 4201e05..ad5809c 100644 --- a/src/components/PiniaDemo.vue +++ b/src/views/PiniaDemo.vue @@ -18,10 +18,7 @@