Giter VIP home page Giter VIP logo

electron-nuxt-typescript-20200604's Introduction

electron-nuxt-typescript-20200604

Nuxt.js

create-nuxt-app

% npx create-nuxt-app example

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in example
? Project name example
? Project description My exquisite Nuxt.js project
? Author name abetomo
? Choose programming language TypeScript
? Choose the package manager Npm
? Choose UI framework Buefy
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript Default
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)ESLint, Prettier, Lint stage
d files, StyleLint
? Choose test framework Jest
? Choose rendering mode Single Page App
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

eslint error

--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -50,6 +50,6 @@ export default {
     /*
      ** You can extend webpack config here
      */
-    extend(config, ctx) {}
+    extend(config, ctx) {} // eslint-disable-line
   }
 }

lang="ts"

--- a/components/Card.vue
+++ b/components/Card.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
_
-<script>
+<script lang="ts">
 export default {
   props: {
     title: {
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -39,7 +39,7 @@
   </div>
 </template>
_
-<script>
+<script lang="ts">
 export default {
   data() {
     return {
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -33,8 +33,8 @@
   </section>
 </template>
_
-<script>
-import Card from '~/components/Card'
+<script lang="ts">
+import Card from '~/components/Card.vue'
_
 export default {
   name: 'HomePage',

Electron

install

% npm i -D electron

change

% touch preload.js

Add main.js

--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,4 +1,6 @@
-export default {
+const baseDir = process.env.BASE_DIR || '/'
+
+module.exports = { // eslint-disable-line
   mode: 'spa',
   /*
    ** Headers of the page
@@ -51,5 +53,11 @@ export default {
      ** You can extend webpack config here
      */
     extend(config, ctx) {} // eslint-disable-line
+  },
+  // dev mode
+  dev: process.env.NODE_ENV === 'dev',
+  router: {
+    base: baseDir,
+    mode: 'hash'
   }
 }
--- a/package.json
+++ b/package.json
   "private": true,
   "scripts": {
-    "dev": "nuxt",
+    "dev": "NODE_ENV=dev electron main.js",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",

build

% npm i -D electron-builder
--- a/.gitignore
+++ b/.gitignore
@@ -88,3 +88,6 @@ sw.*

 # Vim swap files
 *.swp
+
+# electron-builder
+build
--- a/package.json
+++ b/package.json
@@
     "dev": "NODE_ENV=dev electron main.js",
     "build": "nuxt build",
+    "electron-builder": "BASE_DIR=./ NODE_ENV=production npm run build && electron-builder -w portable -m --x64",
     "start": "nuxt start",
     "generate": "nuxt generate",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
@@
     "stylelint": "^10.1.0",
     "ts-jest": "^25.0.0",
     "vue-jest": "^4.0.0-0"
+  },
+  "main": "main.js",
+  "build": {
+    "appId": "example",
+    "files": [
+      "dist/",
+      "main.js",
+      "nuxt.config.js",
+      "preload.js"
+    ],
+    "directories": {
+      "output": "build"
+    }
   }

Added on 2020/12/19

Breaking Changes https://www.electronjs.org/docs/breaking-changes#breaking-changes

electron-nuxt-typescript-20200604's People

Contributors

abetomo avatar dependabot[bot] avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.