戻る
■簡易な開発
■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」で終了できる