Code Monkey home page Code Monkey logo

electron-vue-typescript-starter's Introduction

๐Ÿ”ฉ Electron-Vue-TypeScript Starter

The Electron Shell starter that'll have you saying "kids these days" faster than you can type npm start.

Features

  • All programming/style/markup languages supported by Electron Compile:
    • Programming: TypeScript, ES6, ES7, CoffeeScript, GraphQL
    • Style: Less, Sass, Stylus
    • Markup/other: Jade, and Vue
  • In particular, TypeScript is tuned to be as strict as possible.
  • Good TypeScript code completion in VS Code! (There were some quirks to work out here)
  • Packaging for distribution with Electron Forge:
    • Run npm run make to generate distributable packages.
    • Configure forge by modifying forge.config.js.
  • Hot reloading of everything (courtesy of Electron Compile)
  • VueJS devtools.

How to use

Simply fork or download this repo, and start hacking away! Before beginning any work, install all dependencies by running npm install.

Available commands:

  • npm start: Runs the application with Electron in development mode. Hot reloading as well as the Vue devtools are enabled in this mode.
  • npm run make: Builds distributable app packages using Electron Forge, placing the results in the out directory. Note that this will only build packages compatible with the host system running the command; running the build on macOS won't produce GNU/Linux packages, for example.
  • npm run lint: Runs tslint over all TypeScript files.

What might I want to customize first?

Things to note

There are three different TypeScript configurations located in this repository, and all three of them are important:

  • tsconfig.json contains the configuration used by Visual Studio Code or other editors to configure TypeScript checking. This file pulls in additional type information from the types directory, which contains a type definition necessary for proper code completion on imported Vue modules in Visual Studio Code.
  • _compilerc contains the two type definitions that are actually used when transpiling for use with Electron, one for development (used when running npm start) and one for production (used when running npm run make).

Known issues/future work

  • SCSS works, but the indented Sass format doesn't build properly.
  • It would be nice if this was a vue-cli, cookecutter, or yeoman scaffold.

Not what you were looking for?

Not interested in using TypeScript with Vue? Prefer to start with something simpler? I recommend checking out the available starter templates that Electron Forge offers for initializing projects.

Want something with more stuff/customizability/documentation out of the box? Prefer to use Webpack instead of Electron Compile? I recommend taking a look at electron-vue, which allows for scaffolding projects using vue-cli.

electron-vue-typescript-starter's People

Contributors

bdero avatar

Watchers

 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.