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!と表示されれば完了です!お疲れ様でした。

よく読まれている記事

エンジニア独立

2019/4/25

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

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

続きを読む

エンジニア独立

2019/4/15

フリーランスエンジニアの適正価格をぶっちゃけてみる

どうも、フリーランスエンジニアのてぃすです。 先日以下のツイートをしました。 実務経験2年以上のエンジニアが都内でフリーランスをやる場合、週5で月60万未満の案件は切り捨ててOKです。正社員的に考えると高めに見えますが、業務委託としてやるには60万円しか出さない案件は最底辺であると考えましょう — てぃす@フリーランスエンジニア (@tis_engineer) March 29, 2019 すると結構な反響があったので、今日はこのツイートで語っているフリーランスをやる場合の単価の基準について、 ...

続きを読む

エンジニア独立

2019/4/1

ITエンジニアがTwitter運用に本腰を入れ始めた話

どうも、フリーランスエンジニアのてぃすです。 私事ですが、最近Twitter運用を本格的に初めてみました。 以前からITエンジニアとしてのアカウントは持っていたのですが、キャリア関連の情報を発信していくために新しくアカウントを開設しました。 そこで今日はITエンジニアとして活動している僕がTwitter運用を本格化するに至った理由と今後の方針についてお話していこうと思います。 Twitterを頑張ってみようと思った理由 Twitterの運用を本格化して行くということは、当然他のことができる時間を削るわけで ...

続きを読む

エンジニア入門

2019/4/23

DMM WEBCAMP(旧:WEBCAMP PRO) - エンジニアとして働きたい人のためのプログラミングスクール

最近のプログラミングスクールは、就業サポート・業務で役立つ教育を掲げているところがかなり多くなってきました。というかこの2つを満たしていないスクールはもはや存在価値が薄くなってきています。 今回はその2本の柱を高いクオリティで実現している DMM WEBCAMP(旧:WEBCAMP PRO)について、現役プログラマの目線から紹介していこうと思います。 このDMM WEBCAMPは総合的に見て、本気でエンジニアを目指そうとする人にとって最有力候補と言えるレベルで非常に優秀なプログラミングスクールです。この根 ...

続きを読む

エンジニア独立

2019/4/28

ITエンジニアが給与上げるために出来ることは限られている

どうも、フリーランスエンジニアのてぃすです。 今ITエンジニアってかなり稼げる職種として知られてきていますが、中にはその影響を感じられていない人もいるんじゃないかと思います。 ぼくは2年の間に正社員、派遣、フリーランスと渡り歩いて、月収は20万→40万→80万->100万と変動してきました。 その中でITエンジニアとして収入を上げるために出来ることがなんなのかが少しずつ見えてきました。 今回はその経験から感じたITエンジニアが収入を上げるために出来ることについて分析・解説していきます。 会社の中で給 ...

続きを読む

-プログラミング
-, ,

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