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/15

プログラミングの勉強はモチベーションだけでやると挫折する

こんにちは。フリーエンジニアのてぃすです。 最近は未経験からエンジニアを目指したり、エンジニアとしてのキャリアを向上させるために、プライベートでプログラミングを勉強をし始める人が増えてきています。 僕自身、プライベートの時間に未経験言語の勉強をしてキャリアアップした経験があるので、非常にいい傾向だと思っています。 しかしSNSやブログなどを眺めていると、 「この人モチベーションだけで勉強しているな」 という人を多く見かけます。 個人的な経験と人から聞いてきた話から、このようにモチベーションだけで勉強してい ...

続きを読む

エンジニア独立

2018/8/12

ITエンジニアがスーツ勤務を強要する現場を避けるべき理由

こんにちは、フリーエンジニアのてぃすです。 プラグラマやインフラ担当などと言ったITエンジニアとしての一般的な働き方として、客先に常駐して業務を行うというものがあります。 そんなとき、現場を選ぶ判断基準の一つとして服装が自由か否かというものが上げられます。 僕は決まって私服勤務可能な現場を選ぶようにしています。それはなぜか。エンジニアをスーツ勤務させる客先にロクなところがないから。 これまでスーツ勤務・私服勤務の現場を経験した上で、エンジニアがスーツを勤務を強要する現場を避けるべき理由を書いて行こうと思い ...

続きを読む

エンジニア入門

2018/1/2

プログラマになるために資格は必要か

ここ最近のエンジニア需要増大に伴って、プログラマやエンジニアになりたいと考え始める人が周りにも増えてきました。 そんな時によく聞かれるのが「プログラマになろうとしたら、資格とか取ったほうがいいの?」という内容。 確かに、真っ黒な画面に向かってカタカタ英語や記号を打ち込んでいるTHE 専門職であるプログラマという職業には、何かしら資格が必要に思えるかもしれません。 今日はそんなプログラマ・エンジニアを目指していて、最初の一歩として資格取得を検討している人に向けてプログラマになるのに資格が必要かという疑問に応 ...

続きを読む

エンジニア独立

2019/4/29

技術を選んで働くエンジニアになるために

どうも、フリーランスエンジニアのてぃすです。 ITエンジニアと一言で言っても扱っている技術によって働き方は様々です。 また働き方に加えて、将来的なキャリアの展望も使う技術によって大きく変わってきます。 ぼくはエンジニアとして扱う技術を変化させていき、現在は週3でリモート中心でマイペースに働きながらゆとりを持って暮らせるくらいは稼げる程度にまで持っていけました。 そこで今回はITエンジニアが使う技術を選ぶことの大切さと、実際に選ぶためのテクニックについてご紹介していきます。 技術を選ぶ事による効能 まずは使 ...

続きを読む

エンジニア独立

2019/4/1

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

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

続きを読む

-プログラミング
-, ,

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