By mmiyauchi in programming No Comments

Vueの製品レベルの環境構築を時短でおこなうチュートリアル

2018年6月17日

2019年9月16日追記：

記事の内容が古くなりました。vue-cliやNuxtを使うことを推奨します

環境変化により、WebPackを一から設定を記述してJavaScriptアプリケーションを開発することも少なくなってきたように思えます。この記事の内容も古くなっており、現環境ではvue-cliやNuxt.jsを使い、必要であればそれらの設定をさらに自身で変更する、のようなやり方が現実的だと思われます。

Reactなど、他JavaScriptフレームワーク(ライブラリ)を製品レベルの開発をやってた人からすると、さっさとESLintやwebpackのコンフィグ書いて、ファイルごとにコンポーネントを分割し(単一コンポーネント)、SPAを早く書きたい。そういった、製品にVueを導入する前提の環境設定を行う適切なチュートリアルがまとまっていなかったので(webpackの設定が単一コンポーネントでは動かない設定であったり、ESLintの設定をスキップしていたり…)、本記事でそれを手っ取り早く実現する方法を紹介する。
本記事では、Vueの基本的な書き方はサンプルコードの掲載に終わっている。Vue自体に触れるというよりかは、開発にVueを導入しようとするJavaScript開発者が、時短のために製品レベルの環境設定のサンプルを学習し、より早くVueを製品へ導入するための勘所を得るために読む記事である。あくまで、Vueの環境構築が目的の記事なので、Vue自体のシンタックスの学習であったり、Vue自体に触れることが目的の場合、vue-cliを使えば目的を達成できるはずだ(Reactでいうところのcreate-react-appの位置付けのツール)。

チュートリアル

本チュートリアルはNode.js v8以上、yarn 1.6以上がインストールされていることが前提である。また、エディタの設定はVisual Studio Codeを対象としている。また、Linuxコマンドを打つので、WindowsではBashが動作する環境を推奨するか、コマンドを一部読み変えて実施する。

推奨条件

Node.js v8以上がインストールされていること

yarnがインストールされていること

Visual Studio Codeがインストールされていること

Visual Studio CodeなどのエディタにESLintプラグインがインストールされていること

1.プロジェクトの作成

適当なディレクトリ下において、下記コマンドを実行する。

$ mdkdir vue_tutorial
$ cd vue_tutorial

1 2	$ mdkdir vue_tutorial $ cd vue_tutorial

2.NPMパッケージのインストール

本チュートリアルに必要なnpmパッケージをインストールする。インストール内容な下記、package.jsonの内容を参照し、作成する。内容物的には、ESLint、webpackでの実際のVue開発で必要な、ほとんど最低限のnpmパッケージをインストールするような内容となっている(※ESLintの設定はAirbnbとしてある)。プロジェクトのルート直下にて、package.jsonを作成する(npm initのほうが行儀が良いが、設定をコピーするため今回はpackage.jsonを手動にて作成)。

$ touch package.json

1	$ touch package.json

package.jsonの内容は下記のようにする。

{
  "name": "vue-tutorial",
  "version": "1.0.0",
  "description": "Vue tutoriai",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "build:server": "webpack-dev-server --hot --host 0.0.0.0"
  },
  "author": "Your name",
  "license": "No license",
  "dependencies": {
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.9.1",
    "eslint-plugin-vue": "^4.5.0",
    "vue-loader": "^15.2.4",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}

{

"name": "vue-tutorial",

"version": "1.0.0",

"description": "Vue tutoriai",

"main": "index.js",

"scripts": {

"build": "webpack",

"build:server": "webpack-dev-server --hot --host 0.0.0.0"

"author": "Your name",

"license": "No license",

"dependencies": {

"vue": "^2.5.16"

"devDependencies": {

"babel-core": "^6.26.3",

"babel-eslint": "^8.2.3",

"babel-loader": "^7.1.4",

"babel-preset-env": "^1.7.0",

"css-loader": "^0.28.11",

"eslint": "^4.19.1",

"eslint-config-airbnb": "^16.1.0",

"eslint-plugin-import": "^2.12.0",

"eslint-plugin-jsx-a11y": "^6.0.3",

"eslint-plugin-react": "^7.9.1",

"eslint-plugin-vue": "^4.5.0",

"vue-loader": "^15.2.4",

"vue-style-loader": "^4.1.0",

"vue-template-compiler": "^2.5.16",

"webpack": "^4.12.0",

"webpack-cli": "^3.0.8",

"webpack-dev-server": "^3.1.4"

}

package.jsonを作成したら、下記コマンドでパッケージをインストールする。

$ yarn install

1	$ yarn install

yarnがインストールされていない場合、npm installを実行する。

3.ESLintの設定

ESLintの設定を行う。プロジェクトのルート直下に.eslintrc*(アスタリスク以下は、拡張子なし、もしくは.js,.jsonなど)を作成し、設定内容を記述する。今回は、実際の開発で使うことを想定したために、JavaScriptファイルにはAirbnbの設定を継承し、Vueの単一コンポーネントファイルには公式リポジトリの「eslint-plugin-vue」を適用している。eslint-plugin-vueのLintの強度については、GitHubの公式リポジトリのドキュメントを参照し、適宜設定する。

 module.exports = {
  extends: [
    'airbnb',
    'plugin:vue/recommended'
  ],
  rules: {
    // Rules write here
  },
}

module.exports = {

extends: [

'airbnb',

'plugin:vue/recommended'

rules: {

// Rules write here

}

また、エディタによっては.Vueファイルを検知しない設定になっていることがあるので、適宜設定を行う。Visual Studio Codeの場合は、設定ファイルのESLintの項目に、下記のハイライトされた箇所を書き加える。

"eslint.validate": [
"javascript",
"javascriptreact",
"javascript",
  {
    "language": "vue",
    "autoFix": true
  }
]

"javascript",

{

"language": "vue",

"autoFix": true

}

エディタにてLintが機能しているかは、後ほど設定全般が完了してから確認をする。

3.webpackの設定

webpackの設定ファイルを記述する。vue-loader公式ドキュメントの設定をベースに、下記のような設定を記述したwebpack.config.jsを作成する。

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  entry: `${__dirname}/app/index.js`,
  output: {
    path: `${__dirname}/build`,
    filename: 'bundle.js',
  },
  module: {
    rules:
      [{
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              'env',
            ],
          },
        },
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ],
      },
      ],
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  devServer: {
    contentBase: `${__dirname}/build`,
    port: 8081,
  },
};

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {

mode: 'development',

entry: `${__dirname}/app/index.js`,

output: {

path: `${__dirname}/build`,

filename: 'bundle.js',

module: {

rules:

[{

test: /\.vue$/,

loader: 'vue-loader',

{

test: /\.js$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader',

options: {

presets: [

'env',

{

test: /\.css$/,

use: [

'vue-style-loader',

'css-loader',

plugins: [

new VueLoaderPlugin(),

devServer: {

contentBase: `${__dirname}/build`,

port: 8081,

};

4. Vueファイルの作成とwebpackによるコンパイル

Vueファイルを作成し、webpackにてコンパイルを実行する。

webpack.config.json

1	webpack.config.json

では、Vueの開発ディレクトリが/appとなっている。そのため、/appディレクトリをプロジェクトのルート直下に作成する。

$ mkdir app

1	$ mkdir app

/app直下に、index.jsを作成し、下記のような内容とする。これは、Vueアプリケーションのエントリーポイントである。

import Vue from 'vue';

import App from './App.vue';

new Vue({
el: '#app',
render: h => h(App),
});

import Vue from 'vue';

import App from './App.vue';

new Vue({

el: '#app',

render: h => h(App),

});

次に、/app直下に、index.jsにてマウントされるApp.vueを作成する。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
module.exports = {
  data: function () {
    return {
      message: 'Hello from App component!'
    }
  }
}
</script>

<style>
p {
  color: cadetblue;
  font-weight: bold;
  font-size: 3.0rem;
  text-align: center;
}
</style>

<div>

<p>{{ message }}</p>

</div>

</template>

module.exports = {

data: function () {

return {

message: 'Hello from App component!'

}

</script>

<style>

p {

color: cadetblue;

font-weight: bold;

font-size: 3.0rem;

text-align: center;

}

</style>

この時、使用エディタにて.vueファイルのLintが実行されているかを確認する。
次に、package.jsonに下記設定が追加されていることを確認する。

"scripts": {
  "build": "webpack",
  "build:server": "webpack-dev-server --hot --host 0.0.0.0"
},

"scripts": {

"build": "webpack",

"build:server": "webpack-dev-server --hot --host 0.0.0.0"

確認できたら、Webpackでのビルドを実行する。プロジェクト内にて下記コマンドを実行する。

$ yarn build

1	$ yarn build

yarnがインストールされていない場合cは、npm run buildと実行する。
ビルドが成功すると、プロジェクトのルート直下に/buildディレクトリが生成され、配下にbundle.lsが生成されている。これでビルドが完了である。しかし、実際に動く様子がこのままでは確認ができないので(Vueコンポーネントのマウント先がない)、App.vueをマウントするための簡単なHTMLファイルを作成する。下記のようなHTMLファイルを/build直下にindex.htmlとし、作成する。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Index page</title>
</head>

<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Index page</title>

</head>

<body>

</body>

</html>

このHTMLファイルの要点としては、bodyタグ内部にて、App.vueコンポーネントのマウント対象のdivファイルが定義されていることと、body内部にてwebpackにてビルドされたbundle.jsがロードされていることである。
index.htmlが作成できたら、下記のコマンドを実行する

$ yarn build:server

1	$ yarn build:server

これは、webpackのビルドコマンドを監視サーバ化したものだ。ビルドコマンドとは異なり、現状の設定ではオンメモリによる変更のみで、bundle.jsは出力されない。ブラウザでhttp://0.0.0.0:8081/にアクセスをして、画面に「Hello from App component!」と表示されたら正常に動作している。
webpackのビルドサーバは、この先においても使用するので、このままwebpackサーバを立ち上げたままにする。

5. 子コンポーネントの読み込み(Vueに理解があれば、読み飛ばし可)

ここはどちらかというとAppendixのようなもので、既にVueに理解があれば特に読む必要はない。App.vueにて呼び出す子コンポーネントを、作成する。/app直下に/componentsを作成し、/components直下にChild.vueを作成する

＃　プロジェクトのルート直下での実行を想定
$ mkdir ./app/components
$ touch ./app/components/Child.vue

＃　プロジェクトのルート直下での実行を想定

$ mkdir ./app/components

$ touch ./app/components/Child.vue

Child.vueを下記のように記述する。

<template>
  <p>Hi! I'm child component.</p>
</template>

<style scoped>
p {
  color: palevioletred;
  font-size: 2.0rem;
}
</style>

<p>Hi! I'm child component.</p>

</template>

p {

color: palevioletred;

font-size: 2.0rem;

}

</style>

次に、App.vueからChild.vueを読み込み、Childコンポーネントをマウントする。App.vueを下記のように変更する。変更箇所は、templateタグの内部とscriptタグの内部である。

<template>
  <div>
    <p>{{ message }}</p>
    <child></child>
  </div>
</template>

<script>
import Child from './components/Child.vue';
module.exports = {
  data: function () {
    return {
      message: 'Hello from App component!'
    }
  },
  components: { child: Child },
};
</script>

<style>
p {
  color: cadetblue;
  font-weight: bold;
  font-size: 3.0rem;
  text-align: center;
}
</style>

<div>

<p>{{ message }}</p>

</div>

</template>

import Child from './components/Child.vue';

module.exports = {

data: function () {

return {

message: 'Hello from App component!'

}

components: { child: Child },

};

</script>

<style>

p {

color: cadetblue;

font-weight: bold;

font-size: 3.0rem;

text-align: center;

}

</style>

変更が完了したら、ブラウザでhttp://0.0.0.0:8081/にアクセスをし、「Hello from App component!」と表示された直下に「Hi! I’m child component.」と表示されれば、Vueアプリケーションは正常に動作している。

Vueアプリケーションの正常動作時の画面。

これで、チュートリアルは完了だ。終わったらCtrl + Cでwebpackのサーバを落としてあげるのと、最終的な成果物を保持するために、yarn buildを実行しておく。

参考文献

Vue Loader | Getting Started
https://vue-loader.vuejs.org/guide/

vuejs/eslint-plugin-vue: Official ESLint plugin for Vue.js
https://github.com/vuejs/eslint-plugin-vue

vscode-eslint doesn’t work on .vue files · Issue #281 · Microsoft/vscode-eslint
https://github.com/Microsoft/vscode-eslint/issues/281

Article Tags

タグ: ESLint, JavaScript, Vue, webpack, 環境構築

mmiyauchi

プログラムを書きながらTranceを聴くのが良いですね。みなさんも聴いたほうがいいですよ、Trance。EDMよりハードトランスでしょ。

普段思ったことや、雑記。

Vueの製品レベルの環境構築を時短でおこなうチュートリアル

2019年9月16日追記：

チュートリアル

1.プロジェクトの作成

2.NPMパッケージのインストール

3.ESLintの設定

3.webpackの設定

4. Vueファイルの作成とwebpackによるコンパイル

5. 子コンポーネントの読み込み(Vueに理解があれば、読み飛ばし可)

参考文献

いいね:

mmiyauchi

Previous Story

NativeScriptの調査とReact Nativeとの比較

Next Story

日本の開発者は、プログラミング言語の勉強はたいがいにして英語も勉強すべき

Discussion about this post

コメントを残すコメントをキャンセル

Vueの製品レベルの環境構築を時短でおこなうチュートリアル

2019年9月16日追記：

チュートリアル

1.プロジェクトの作成

2.NPMパッケージのインストール

3.ESLintの設定

3.webpackの設定

4. Vueファイルの作成とwebpackによるコンパイル

5. 子コンポーネントの読み込み(Vueに理解があれば、読み飛ばし可)

参考文献

いいね:

mmiyauchi

Previous Story

NativeScriptの調査とReact Nativeとの比較

Next Story

日本の開発者は、プログラミング言語の勉強はたいがいにして英語も勉強すべき

Redux(react-redux)における適切な配列要素の更新

CloudFlareの『SSL/TLS 暗号化モード(HTTPS通信設定)』を使用したとき、『ERR SSL VERSION OR CIPHER MISMATCH』のエラーでChromeで発生し、接続できない場合の対処

Dart(Flutter)についての所見

Discussion about this post

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル