refirio.org

Memo

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

Advertisement
