TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

プログラミング

yarnを使ってVue.jsをwebpackで導入

更新日:

最近ギラギラと脚光を浴びているjavascriptフレームワークVue.js

今回はこのVue.jsをwebpackで動かすための手順を説明していきます。

まずは作業ディレクトリの作成。

mkdir client && cd client

そして最近はnpmよりもyarnの方がイケてるという情報を耳にするのでyarnを使っていきます。

yarnについてはmacであれば簡単にインストール可能です。下記リンクが参考になるかと思います。

https://qiita.com/masterkey1009/items/50f95b1187646a7db385

yarn init

色々聞かれるけど、Enter連打でOK。

次にwebpackでVue.jsを動かすのに必要なものをゴリゴリインストールしていきます。

yarn add webpack webpack-dev-server vue

インストールが完了したら、clientディレクトリ配下にwebpack.config.jsを作成して下記の通り編集します。

エントリーポイントとなるファイル、ビルドの出力先、開発用サーバーの設定などなど設定しています。

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'www'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: 'www',
    port: 4000,
    inline: true
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // おまじない
    }
  }
};

おまじないについてはこちら参照。

開発用サーバーの起動アクションも登録しておきましょう。自動生成されているファイルなので、scriptの部分だけ追加すればOKです。

{
  "name": "client",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "vue": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

設定ファイルの記述が完了したら実際に表示に使われるhtmlファイル、Vue.jsを記述するjavascriptファイルを作成します。ディレクトリ名については設定ファイルと整合していればお好みで。

mkdir src www
touch src/app.js www/index.html

htmlファイルの方はひとまずの導入ですので、最小限の記載で。出力されるファイルのインポートを忘れないように!僕は最初忘れました!

<div id="app">
  {{ message }}
</div>
<script src="bundle.js"></script>

今回の主役であるVue.jsを使用したjavascriptコードです。やっていることはid指定した要素の変数を設定しているイメージです。

import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

あとは作成したjavascriptをビルドして、開発用Webサーバーを起動しましょう。

./node_modules/.bin/webpack
yarn start

ブラウザからhttp://localhost:4000/にアクセスしてHello Vue!と表示されれば完了です!お疲れ様でした。

よく読まれている記事

office

エンジニア独立

2019/5/29

エンジニア歴2年の僕がレバテックフリーランスでフリーランスを目指してみた

正社員エンジニアからフリーランスエンジニアへの方向転換の一環として、業界最大手であるレバテックフリーランスの個人面談に出向いてきたので、その感想を書いていこうと思います。 フリーランスというと知識・経験・人脈を兼ね備えたスーパーエンジニアしかなれない存在だと思っている人も少なくありません。 しかし最近では今回紹介するレバテックフリーランスや以前の記事で紹介したギークスジョブなどといったエージェントを利用すれば、僕のように経験の浅いエンジニアでも十分に目指せる働き方となっています。 この記事が現在働いている ...

続きを読む

エンジニア独立

2019/5/29

稼げるエンジニアになるには

最近SNSやブログなどで『優秀なエンジニアとは?』みたいな議論で盛り上がっているのを良く見ます。どのようなことができれば優秀なエンジニアと言えるのか、みたいな。 正直言って僕はエンジニアとして優秀であるか否かについてはさほど興味を持てません。優秀であればその優秀さに伴った報酬を得られる職業であったのなら、僕も素直に優秀さを追い求めていたことでしょう。 しかしプログラマーとして未経験の言語に転身したにも関わらず、収入が2倍以上になった経験からそんな単純な職業ではないことを思い知ってしまいました。 優秀なエン ...

続きを読む

エンジニア入門

2019/5/30

エンジニアにとっての理想的な職場とは

こんにちは、フリーランスエンジニアのてぃすです。 この記事を読んでくださっているということはITエンジニアかと思いますが、皆さんエンジニアとして働くならどんな環境で働きたいですか? スーツ勤務が嫌、言われたことをモクモクとこなすのが好き、など人によって理想として掲げる働き方って大きく異なります。 僕はこれまでエンジニアとして、SES企業やノリノリのベンチャー企業、起業したてのスタートアップ企業における業務を経験してきました。 今回は僕の経験や周囲のエンジニアから聞いた話を交えて、エンジニアにとっての働き方 ...

続きを読む

エンジニア独立

2019/4/15

文系出身エンジニアが語る「弱いエンジニア」戦い方

こんにちは、フリーランスエンジニアのてぃすです。 僕は文系大学を卒業し、新卒で入ったITコンサル会社で入社半年後に軽くC#を扱う機会が訪れるまで、プログラミングやエンジニアリングに触れたことが一度もありませんでした。 パソコンも基本的に動画を見たりゲームをするための便利な箱くらいな印象。 一方、エンジニア業界には中学生時代から趣味でプログラミングをしてきたり、理系大学でバリバリ情報系を学んできたエンジニアがゴロゴロいるわけです。もう機械語で会話すればいいのにと思うレベルの猛者揃いです。 そうなると僕のよう ...

続きを読む

エンジニア独立

2019/4/25

【正社員並みの保証】安心フリーランスエージェント・Midworksを徹底分析

こんにちは、フリーエンジニアのてぃすです。 今やフリーランスエンジニアという働き方もだいぶカジュアルになってきています。僕自身 文系大学卒 大したキャリアもコネもない という一般的には心もとない状態から独立しましたが、正社員時代と比べて収入も5倍ほどになり、リモート中心で非常にストレスのない毎日を過ごせています。 先日エンジニアの集まりに参加して、そこにもフリーランスエンジニアが何人かいたのですが、その人たちの多くからMidworksというエージェントを使っているという話を聞きました。 気になって調べてみ ...

続きを読む

-プログラミング
-, ,

Copyright© TIS ENGINEER NOTE , 2021 All Rights Reserved Powered by AFFINGER5.