Express + Vue.jsでhelloを出してみよう

6585 ワード
Node.js Express.js Vue.js Node.js テキストリンク

おはようございますこんにちはこんばんは！

最近Front-endのフレームワークが色々出て流行ってるらしくて、
友達となんかやってみよー！になってはじめました。
最初、どのフレームワークを使おうかと、
'react / vue が人気らしいー何が違う？'とざっと検索してみたら

  • Vue
    • テンプレート形式でアプリの制作したいなら
    • 簡単で「一旦動作」ができるのが好きなら
    • 早くて軽量のアプリが作りたいなら
  • React
    • 大きい規模のアプリを作るなら
    • もっと大きい情報が欲しいなら

こんな差がありました。
簡単なプロジェクトだから、VueにしようーでVueを選びました。
（実は韓国で何もわからずVueの本を買ってきたので、、最初からvueにしようと決めたこともあり、、笑）

back-endはnode.jsのexpress フレームワークを使います(なんでもjsでやってみよう感)

やってみましょう^0^

  1. node.js install
    https://nodejs.org/
    installします。ltsの方が安定的らしくてltsの方インストールしました。

  2. コマンドラインでインストる確認
    $ node -v
    バージョンが出力されたらok

  3. package.jsonでパッケージ管理
    package.json生成
    $npm init
    express 設置 node_modulesというフォルダが生成されます
    $npm install --save express

4.htmlファイルを置いておくpublic directoryをnode_modulesと一緒の段階に生成
生成
$mkdir public
入る
$cd public
index.htmlページ生成
$vi index.html

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js Sample</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
        <input v-model='message'>
    </div>
    <!-- vue.js読み込み-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      })
    </script>
  </body>
</html>

v-modelを使ってinputとtextareaのエレメントに両方向のデーターバインディングの生成が出来ます。
javascriptのjqueryだと inputのvalueを持って、、それをh1に適用して、、みたいなことを
nue Vue ~~　だけで出来ます。

5.node.jsを実行するindex.jsを生成(node_modulesとpublicと一緒の段階)
$cd ../
$vi index.js

index.js
const express = require('express');

const app = express();
const PORT = process.env.PORT = 8000; //port8000に指定、変えてもok

app.use(express.static('public')); //

app.listen(PORT, () => {
  console.log('Server is running at:',PORT);
});

6.index.jsのところで実行
$node index.js

console
Server is running at: 8000

表示されたら localhost:8000に接続すると

こういう画面が出て、下のinputに内容を変更するとHello Vue.js!の大文字が変更されます。
とても簡単!

vue.jsの解説なんかより、一応、、画面表示してみよう！になっちゃったんですが、(汗)
これで終わり！

参考

https://jp.vuejs.org/index.html
自分は韓国人なので、https://kr.vuejs.org/index.html こちら参照しました (笑)
https://joshua1988.github.io/web_dev/vue-or-react/ 韓国語です (汗)