Vue.jsの単一ファイルコンポーネント用の環境構築をしてみた

Vueでの開発には欠かせない単一ファイルコンポーネント用の環境構築をしていきます。本当に最小構成になりますのでご了承ください。

vue-cliを使用すれば爆速で構築できると思うのですが、初心者であるからこそ環境構築の部分は時間をかけて理解していきたいところです。

では早速プロジェクトフォルダを作成後、お馴染みのコマンドを実行しましょう。

npm init -y

package.jsonが作成されます。

次にwebpack関連のパッケージをインストール

npm i -D webpack webpack-cli webpack-dev-server

babelのインストール

#webpackでbabelを使用するためのパッケージ
npm i -D babel-loader babel-core

#ES6 をトランスパイルするためのパッケージ
npm i -D babel-preset-es2015

css関連のパッケーシをインストール

npm i -D css-loader style-loader

vue関連のパッケージをインストール

npm i -D vue vue-html-loader vue-loader vue-template-compiler

必要なパッケージをインストールできました。 package.jsonのscriptの部分を以下の変更します。

"scripts": {
    "start": "webpack-dev-server"
  },

このように設定することでローカルサーバーが立ち上がります。

package.json全体はこのようになっています。

{
  "name": "vue-component-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.11",
    "style-loader": "^0.21.0",
    "vue": "^2.5.16",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

次にwebpack.config.jファイルをプロジェクトフォルダ直下に作成してください。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        loader: 'vue-loader',
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    contentBase: 'dist',
    port: 3000,
    host: 'localhost',
    historyApiFallback: true,
  }
};

.babelrcファイルを作成します。

{
  "presets": [ "es2015" ]
}

プロジェクトフォルダ直下にindex.jsファイルを作成します。

import Vue from 'vue'
import Hello from './components/Hello.vue'

new Vue({
  el: '#app',
  components: {
    Hello
  },
  template: '<Hello></Hello>'
})

ここではコンポーネントファイルであるHello.vueファイルを読み込んでいます。テンプレート名として<Hello>を設定します。

今度は、コンポーネントファイルを作成していきます。 componentsディレクトリの中にHello.vueファイルを作成してください。

<template>
  <p>Hello, {{ name }}</p>
</template>

<style scoped>
p {
   color: #323232;
   font-weight: 700;
 }
</style>

<script>
export default {
  data: function() {
    return {
      name: 'Vue.js!!!'
    }
  }
}
</script>

最後にdistフォルダを作成後、直下にindex.htmlを配置してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue Component Tutorial</title>
</head>
<body>
  <div id="app">
    <hello></hello>
  </div>
  <script src="./bundle.js"></script>
</body>
</html>