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

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

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

続きを読む

エンジニア独立

2019/4/15

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

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

続きを読む

エンジニア独立

2019/5/29

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

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

続きを読む

エンジニア独立

2019/4/15

文系出身エンジニアが26才でフリーランスになった感想

こんにちは。フリーランスエンジニアのてぃすです。 フリーランスエンジニアということは、つまりエンジニアとして独立しているということになり、すごい敷居が高い印象を持っている人が多いです。 けど僕は文系大学出身かつ、プログラミングも社会人になって一年弱ほど経ってから初めて経験しました。 そんな経験の浅い僕が滞りなくフリーランスエンジニアとして活動して、報酬についてもある程度満足のいく額を得ることができています。 最近はフリーランスという働き方が脚光を浴びてきて、気にはなっている。けどなかなか踏み出す勇気が出な ...

続きを読む

エンジニア独立

2019/4/23

エンジニア派遣でキャリアを積んで高収入を目指す

エンジニアとして採用面談を受けたことのある人なら分かると思うのですが、面談の時に最も重要視されるポイントは業務経験です。 もちろん普段の個人学習や、技術への関心などでフォローできる面もありますが、一番見られるのはどんな技術を使って、どんな業務を行ってきたかという点なんですよね。 採用する側もプロダクトの正否を左右する立場として責任を負っているわけですから当然です。 そんな時、良質な職務経験をどのように積むことができるか、というのがポイントになってきます。 今回はキャリア構築のための、派遣エンジニアという選 ...

続きを読む

-プログラミング
-, ,

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