More than 5 years have passed since last update.

サンプルアプリをいじりながらVue.js+Electronを学ぼう! 環境構築編

Posted at 2019-12-01

はじめに

私は「昔のJavascript」しか触った事のないJavaプログラマーです。
Windowsデスクトップアプリを作るのに、Adobe Airをよく使っていましたが、Javascriptも試してみようと思い、勉強してみる事にしました。
手を動かさないと続かない人なので、サンプルアプリをベースに、プログラムを少しずついじりながら勉強していくつもりです。
同じような境遇の方を対象読者とし、学んだ事を記事にしていきます。
まずは環境の構築とサンプルアプリを動かしてみるところから始めましょう。

環境

Windows10
VS Code
TypeScript

前提

本記事では、vue-cli3と「Vue Cli 3 plugin for Electron」を使用します。
vue-cli2系の頃は、electron-vueがよく使われていたようですが、vue-cli3系には対応していないようですので、ご注意ください。

環境構築手順

まずはアプリが動く実行環境と、サンプルアプリケーションをインストールして動かしてみます。

Vue Cli 3 plugin for Electronのインストール

npmを使いますので、インストールしていない人はインストールしてください。

コマンドプロンプトを立ち上げ、↓の手順でコマンドを打っていきます。

Vue CLI 3のインストール

>npm install -g @vue/cli

プロジェクト作成

「next」という名前のプロジェクトを作成します。簡単なVueアプリケーションが作成されます。
下記コマンドを叩くと、最初に色々聞かれるので、各自好みや環境に応じて回答してください。
この記事ではTypeScriptとRouterは使いますので、選択しておきましょう。
私が選択した内容も載せておきます。

>vue create next


Vue CLI v3.9.1
┌────────────────────────────┐
│  Update available: 3.11.0  │
└────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save, Lint and fix on commit (requires Git)
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No