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

Menu & Search
© mmiyauchi 2022
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

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

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

$ 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"
  }
}

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

$ 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
  },
}

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

"eslint.validate": [
"javascript",
"javascriptreact",
"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,
  },
};

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

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

webpack.config.json

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

$ mkdir app

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

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>

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

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

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

$ 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>

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

$ 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

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

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

<style scoped>
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>

変更が完了したら、ブラウザで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
タグ: , , , ,
mmiyauchi

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

Related article

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

2021年8月23日…

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

英語の記事は見当たっ…
Dart(Flutter)についての所見

Dart(Flutter)についての所見

第一印象では、クロス…

Discussion about this post

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

Type your search keyword, and press enter to search