おはようございますこんにちはこんばんは！
最近Front-endのフレームワークが色々出て流行ってるらしくて、
友達となんかやってみよー！になってはじめました。
最初、どのフレームワークを使おうかと、
'react / vue が人気らしいー何が違う？'とざっと検索してみたら
- Vue
- テンプレート形式でアプリの制作したいなら
- 簡単で「一旦動作」ができるのが好きなら
- 早くて軽量のアプリが作りたいなら
- React
- 大きい規模のアプリを作るなら
- もっと大きい情報が欲しいなら
こんな差がありました。
簡単なプロジェクトだから、VueにしようーでVueを選びました。
（実は韓国で何もわからずVueの本を買ってきたので、、最初からvueにしようと決めたこともあり、、笑）
back-endはnode.jsのexpress フレームワークを使います(なんでもjsでやってみよう感)
やってみましょう^0^
-
node.js install
https://nodejs.org/
installします。ltsの方が安定的らしくてltsの方インストールしました。 -
コマンドラインでインストる確認
$ node -v
バージョンが出力されたらok -
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
<!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
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
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/ 韓国語です (汗)