■目次
Vue.js簡易な開発プロジェクトを作成して開発便利な機能2018年1月ごろに調べた内容
■Vue.js
Vue.js https://jp.vuejs.org/index.html 以下は最近の記事でまとまっているように思う Vue.js と Nuxt.js をざっと試したら目を通す レガシーおじさん、SPAを始めてみた。そして限界を知る https://zenn.dev/koduki/articles/0fe6cc5ada58e5600f75 2分でわかるVueとReactの比較 https://zenn.dev/tomon9086/articles/5f4014d8004dc5b5f63e
■簡易な開発
■Vue.jsをCDNで利用
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <script src="https://unpkg.com/vue"></script> </head> <body> <h1>Vue.js</h1> <div id="app"> <p>{{ message }}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: 'ハロー!' } }); </script> </body> </html>
■開発ツールスタンドアロン版 >npm install -g @vue/devtools >vue-devtools 以下のようなGUI画面が表示される
Waiting for connection... Add: <script src="http://localhost:8098"></script> Or: <script src="http://192.168.56.1:8098"></script> to the top of the page you want to debug.
作成したファイル内 <script src="https://unpkg.com/vue"></script> の直前に以下を追加する
<script src="http://localhost:8098"></script>
その後GUI画面を確認すると、開発ツールが表示されている GUI画面を閉じると、開発ツールが終了される ■Vue CLI をインストール >npm install -g @vue/cli >npm install -g @vue/cli-service-global ■プロトタイプを実行 簡易な表示確認ができる app.vue を作成し、以下を記述する
<template> <div id="app"> <h1>Hello!</h1> <p>This is message.</p> </div> </template>
app.vue のある場所へ移動し、以下を実行 >vue serve DONE Compiled successfully in 174ms App running at: - Local: http://localhost:8080/ - Network: http://192.168.1.110:8080/ Note that the development build is not optimized. To create a production build, run npm run build. 上記のように表示され、表示されている http://localhost:8080/ にアクセスするとページが表示される ファイルの内容を変更すると、表示される結果にもすぐに反映される 「Ctrl+C」で終了できる
■プロジェクトを作成して開発
■プロジェクトを作成 >cd C:\localhost\home\refirio_org\public_html\memos\vuejs_project >vue create hello_app 実行すると質問が表示されるが、いったんすべてデフォルトのままでいい 最後に「プリセットとして保存するか?(Save this as a preset)」と確認されるが、今回は「N」で保存せずに終了する hello_app フォルダが作成され、その中にファイルが作成される プロジェクトの操作はこのフォルダ内で行うため、フォルダ内に移動しておく >cd hello_app 以下でプロジェクトを実行する >npm run serve DONE Compiled successfully in 4231ms App running at: - Local: http://localhost:8080/ - Network: http://192.168.1.110:8080/ Note that the development build is not optimized. To create a production build, run npm run build. 上記のように表示され、表示されている http://localhost:8080/ にアクセスするとページが表示される src/App.vue の内容を変更すると、表示される結果にもすぐに反映される ■プロジェクトをビルド 以下でプロジェクトをビルドできる >npm run build dist 内にファイルが書き出さる これらをWebサーバの公開フォルダ直下に配置すると画面が表示される ■GUIツールでプロジェクトを管理する プロジェクト一覧の場所に移動し、コマンドを実行する >cd C:\localhost\home\refirio_org\public_html\memos\vuejs_project >vue ui 実行すると、自動的にブラウザで http://localhost:8000/project/select が開かれる この画面からプロジェクトの一覧を表示したり、プロジェクトを作成したりできる 「設定 → Vue CLI → 公開パス」を空欄にすると、公開フォルダ直下以外に配置しても画面が表示されるようになる 「タスク → serve → タスクの実行」を実行し、動画面の「出力」をクリックするとアクセス方法が表示される 「タスク → build → タスクの実行」を実行すると、dist フォルダ内にビルド結果が出力される コマンドプロンプトから「Ctrl+C」で終了できる ■Vue.jsの基本 basis.html input.html render.html vhtml.html vbind.html vif.html template.html vfor.html ■プロジェクトを編集 先に作成した hello_app をもとに作業 C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\App.vue
<template> <div id="app"> <HelloWorld title="HelloWorld" message="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script>
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\components\HelloWorld.vue
<template> <div class="hello"> <h1>{{ title }}</h1> <p>{{ message }}</p> </div> </template> <script> export default { name: 'HelloWorld', props: { title: String, message: String } } </script> <style> div p { color: #FF4500; } </style>
>cd C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app >npm run serve ブラウザには以下が表示される
HelloWorld Welcome to Your Vue.js App
■便利な機能
■スロットを使う C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\App.vue
<HelloWorld title="HelloWorld" message="Welcome to Your Vue.js App!"> <p>This is sample compoment.</p> </HelloWorld>
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\components\HelloWorld.vue
<template> <div class="hello"> <h1>{{ title }}</h1> <p>{{ message }}</p> <hr> <div><slot /></div> </div> </template>
<slot /> の部分に「This is sample compoment.」が表示される ■名前付きスロットを使う C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\App.vue
<HelloWorld title="HelloWorld" message="Welcome to Your Vue.js App!"> <p>This is sample compoment.</p> <p slot="a">Message A.</p> <p slot="b">Message B.</p> </HelloWorld>
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\components\HelloWorld.vue
<template> <div class="hello"> <h1>{{ title }}</h1> <p>{{ message }}</p> <hr> <div><slot /></div> <div><slot name="a" /></div> <div><slot name="b" /></div> </div> </template>
<slot name="a" /> の部分に「Message A.」が表示される <slot name="b" /> の部分に「Message B.」が表示される ■アニメーション C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\App.vue
<template> <div id="app"> <HelloWorld title="HelloWorld"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script>
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\components\HelloWorld.vue
<template> <div class="hello"> <h1>{{ title }}</h1> <p>{{ message }}</p> <hr> <button v-on:click="doAction"> {{ btn }} </button> <transition name="transit"> <p v-if="flg" class="trans">トランジション</p> </transition> </div> </template> <script> export default { name: 'HelloWorld', props: { title: String, }, data: function() { return { message: 'Transition Sample!', flg: true, btn: '表示/非表示', }; }, methods: { doAction: function() { this.flg = !this.flg; } } } </script> <style> /* 共通 */ .trans { width: 150px; background-color: #FFDDDD; padding: 10px; color: #FF4500; } .transit-enter-active { transition: 1.0s; } .transit-leave-active { transition: 1.0s; } /* フェードイン・フェードアウト */ /* .transit-enter-active { transition: opacity 1.0s; } .transit-leave-active { transition: opacity 1.0s; } .transit-enter { opacity: 0; } .transit-enter-to { opacity: 1.0; } .transit-leave { opacity: 1.0; } .transit-leave-to { opacity: 0; } */ /* 平行移動 */ /* .transit-enter, .transit-leave-to { transform: translateX(200px) translateY(-200px); opacity: 0.1; } */ /* 拡大縮小 */ /* .transit-enter, .transit-leave-to { transform: scale(5.0); opacity: 0.1; } */ /* 回転 */ /* .transit-enter, .transit-leave-to { transform: rotateZ(360deg); opacity: 0.1; } */ </style>
■計算アプリを作成 >cd C:\localhost\home\refirio_org\public_html\memos\vuejs_project >vue create calc_app >cd calc_app >npm run serve C:\localhost\home\refirio_org\public_html\memos\vuejs_project\calc_app\src\App.vue
<template> <div id="app"> <Calc v-bind:title="message" v-on:result-event="endCalculate"/> <hr> <div><table v-html="log"></table></div> </div> </template> <script> import Calc from './components/Calc.vue' export default { name: 'app', components: { Calc }, data: function() { return { message: 'Calculation', result: [] }; }, created: function() { // インスタンスが生成されたとき var log = localStorage.getItem('log'); if (log != null) { this.result = JSON.parse(log); } }, computed: { // 値が変わったとき log: function() { var table = '<tr><th>式</th><th>値</th></tr>'; for (var i in this.result) { table += '<tr><td>' + this.result[i][0] + '</td><td>' + this.result[i][1] + '</td></tr>'; } return table; } }, methods: { // メソッド endCalculate: function(exp, res) { this.result.unshift([exp, res]); var log = JSON.stringify(this.result); localStorage.getItem('log', log); } } } </script> <style> table th, table td { border: 1px solid #000; } </style>
C:\localhost\home\refirio_org\public_html\memos\vuejs_project\calc_app\src\components\Calc.vue
<template> <div> <h1>{{ title }}</h1> <p>{{ message }}</p> <p> <input size="30" value="" v-model="formula"> <button v-on:click="calculate">計算する</button> </p> </div> </template> <script> export default { name: 'Calc', props: { title: String, }, data: function() { return { message: '式を入力してください:', formula: '', }; }, methods: { // メソッド calculate: function() { var expression = 'function f() { return ' + this.formula + '; } f();'; var answer = eval(expression); this.message = '計算結果: ' + answer; this.$emit('result-event', this.formula, answer); } } } </script>
■2018年1月ごろに調べた内容
Vue.js 2.x 入門 - Qiita https://qiita.com/sekiyaeiji/items/f1df5d9d4c8a147eed77 第1回 プログレッシブフレームワーク Vue.js:Vue.js入門 ―最速で作るシンプルなWebアプリケーション|gihyo.jp … 技術評論社 http://gihyo.jp/dev/serial/01/vuejs/0001 第3回 Vue.jsでコンポーネント開発:Vue.js入門 ―最速で作るシンプルなWebアプリケーション|gihyo.jp … 技術評論社 http://gihyo.jp/dev/serial/01/vuejs/0003 ■メモ 以下で練習中 http://refirio.org/page/memo/vuejs 引き続き、以下を進める http://gihyo.jp/dev/serial/01/vuejs/0004 Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita https://qiita.com/icoxfog417/items/49f7301be502bc2ad897 jQuery から Vue.js への移行 - Qiita https://qiita.com/chibinowa/items/e7b2596d06b8005e8e6f Vue.jsとjQueryで行うAjax処理 - Qiita https://qiita.com/tachinbo/items/ed7414e48733164f5d3f