Vue.jsのプロジェクトの作成

プロジェクトを作成する

直接vue.jsをダウンロードして読み込む方法もありますがnpmで管理した方が楽です。
vueを使うディレクトリの作成。ここではPROJECT_DIR

mkdir -m 755 PROJECT_DIR
cd PROJECT_DIR

node.jsのバージョンの確認

node -v
v9.2.0

vueをnpmでインストールする

npm install vue@csp

これで準備は完了です。

ソースを書く

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
</head>

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

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

フォームに文字を入れたら動的に同じ描画をしてくれます。


Vue.js はじめに
10分で始めるVue.js(基本編)

Last update: 2019.01.01 (火)