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/5/29

エンジニア歴2年の僕がギークスジョブでフリーランスを目指してみた

ぼちぼちの偏差値の文系大学を卒業後、パッケージ運用系のIT企業に就職。9か月で退職。 その後特定派遣会社の正社員として働いてきた僕がなぜフリーランスを目指す気になったのか。 一番の理由はズバリ、お金が稼ぎたかったから。 正確にはもっと効率よくお金を稼ぎたかったからです。 こんな会社もう嫌だ・・・ 現在僕は正社員として2年以上継続して現場に赴き、プログラミングの業務に従事してきましたが、全く給料が上がらない。 ぶっちゃけると手取りが20万円に届かないレベル。ボーナスもお小遣い程度なので年収も悲惨。 給与明細 ...

続きを読む

エンジニア独立

2019/4/15

フリーランスエンジニアとして働くことの実情

こんにちは、フリーランスエンジニアのてぃすです。 最近は本業が忙しくブログの更新が滞っておりました。更新を楽しみにしてくださった方々、申し訳ありませんでした。 今後もエンジニアにとって有益な情報を提供できるよう更新を再開していこうと思いますので、引き続きよろしくお願いいたします。 フリーランスエンジニアの実情 このブログではフリーランスエンジニアとして働くことの利点や、実際にどのようなステップでフリーランスエンジニアになるかについての記事をなんども書いてきました。 しかし実際にフリーランスエンジニアとして ...

続きを読む

エンジニア独立

2019/4/15

ITエンジニアが市場価値を知りたければエージェントを活用すべき

どうも、フリーランスエンジニアのてぃすです。 企業に雇われないフリーランスという働き方。 ITエンジニアという自分の技術を商売道具とする職業は、フリーランスとの相性が抜群だったりします。 僕自身文系かつエンジニア歴2年半で独立しましたが、1年目から年収1000万を軽く超えることができました。 独立してこれまでで学んだことは、ITエンジニアがフリーランスとなり効率よく稼ぐには市場価値の把握がもっとも重要であるということです。 市場価値という超重要な要素 ITエンジニアという職業はいくら高い技術を持っていても ...

続きを読む

エンジニア入門

2018/1/21

プログラミング言語としてのJavaについて

こんにちは、フリーランスエンジニアのてぃすです。 エンジニア・プログラマは年収1000万を現実的に目指せる職業として最近特に注目を集めている職業です。 今いる業界の将来性に不安を感じ脱出してきた人たちも、どんどんエンジニア・プログラマという働き方に集結しています。 ある程度エンジニア・プログラマという職業について調べていると、どのプログラミング言語を習得すればいいのか、という疑問が出てくるタイミングがあると思います。 どのプログラミング言語を選べばいいか、という疑問について調べてみると最近ではJava・R ...

続きを読む

エンジニア独立

2019/4/25

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

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

続きを読む

-プログラミング
-, ,

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