electron-vue-typescript-starter - GitLite

KO | EN

gitlite — search

#web #api #anthropic #dotnet #go #rag #graphql #developer-tools #terminal #editor

electron-vue-typescript-starter

(★ 78)

:nut_and_bolt: An Electron starter that supports VueJS + TypeScript.

File Explorer

ZIP Download

- - App.vue
- index.jade
- main.ts
- render.ts
- vue-module.d.ts
.editorconfig
.gitignore
_compilerc
forge.config.js
LICENSE
package.json
README.md
tsconfig.json
tslint.json

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`npm install`

View Details ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

🔍

`npm run`

View Details ▼

Run a script.

npm run

List available scripts:

npm run {{script_name}}

Run a script:

npm run {{script_name}} -- {{argument}} {{--option}}

Pass arguments to a script:

🔍

`npm start`

View Details ▼

This command is an alias of `npm run start`.

tldr npm run

View documentation for the original command:

🔍

`tslint`

View Details ▼

A pluggable linting utility for TypeScript.

tslint --init

Create TSLint config:

tslint {{path/to/file1.js path/to/file2.js ...}}

Lint on a given set of files:

tslint --fix

Fix lint issues:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

## **WARNING:** Electron Compile (one of the core dependencies of this starter) is no longer being actively maintained. Please consider starting your project using [Electron Forge](https://www.electronforge.io/) directly instead!

### Features

* All programming/style/markup languages supported by [Electron Compile](https://github.com/electron/electron-compile#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](https://code.visualstudio.com/)! (There were some quirks to work out here)
* Packaging for distribution with [Electron Forge](https://github.com/electron-userland/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](https://github.com/electron/electron-compile))
* VueJS devtools.

### How to use

Simply fork or [download](https://github.com/bdero/electron-vue-typescript-starter/archive/master.zip) 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](https://github.com/electron-userland/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?

* This [readme](README.md)
* The [LICENSE](LICENSE)
* The title and description in [package.json](package.json)
* Your TypeScript [linting preferences](tslint.json)
* Your [editor preferences](.editorconfig) (indent size, tabs vs spaces, encoding, etc)
* Your [package export](forge.config.js) settings

### Things to note

There are three different TypeScript configurations located in this repository, and all three of them are important:
* [tsconfig.json](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](types/) directory, which contains a type definition necessary for proper code completion on imported Vue modules in Visual Studio Code.
* [_compilerc](_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`).
* Due to a [known issue](https://github.com/electron-userland/electron-forge/issues/249) with `npm@4` and `@5`, it's advised to use `npm@3` with Electron Forge: ```npm install -g npm@3```

### 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](https://github.com/electron-userland/electron-forge-templates) that [Electron Forge](https://github.com/electron-userland/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](https://github.com/electron/electron-compile)? I recommend taking a look at [electron-vue](https://github.com/SimulatedGREG/electron-vue), which allows for scaffolding projects using vue-cli.