「old/vue.js/setup browserfy」の版間の差分
提供: 個人的記録
(ページの作成:「Category:Software = セットアップ = == 前提 == node.jsの環境がインストール済みであること。 == vue.js のセットアップ == 1. 適当にプ...」) |
|||
| 4行目: | 4行目: | ||
node.jsの環境がインストール済みであること。 | node.jsの環境がインストール済みであること。 | ||
== vue.js のセットアップ == | == vue.js のセットアップ == | ||
| − | + | # 適当にプロジェクト用のディレクトリを作成して移動する。 | |
| − | + | # 下記のコマンドでプロジェクトを初期化する。 | |
| + | #:: <pre>npm init</pre> | ||
| + | #: なにかいろいろ聞かれるけど、とりあえず全部entrtでデフォルトのまま使う。 | ||
| + | # 下記のコマンドでvueをインストールする。 | ||
| + | #:: <pre>npm install --save vue</pre> | ||
| + | # テストのために以下の内容のhtmlファイルを作成し、vueが入っていることを確認する。 | ||
<pre> | <pre> | ||
| − | + | <html> | |
| + | </head> | ||
| + | <title>TEST</title> | ||
| + | </head> | ||
| + | <body> | ||
| + | <div id="app"> | ||
| + | {{ message }} | ||
| + | </div> | ||
| + | </body> | ||
| + | <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script> | ||
| + | <script type="text/javascript"> | ||
| + | new Vue({ | ||
| + | el: '#app', | ||
| + | data: { | ||
| + | message: 'TEST' | ||
| + | } | ||
| + | }) | ||
| + | </script> | ||
| + | </html> | ||
</pre> | </pre> | ||
| − | |||
2017年8月6日 (日) 12:15時点における版
セットアップ
前提
node.jsの環境がインストール済みであること。
vue.js のセットアップ
- 適当にプロジェクト用のディレクトリを作成して移動する。
- 下記のコマンドでプロジェクトを初期化する。
-
npm init
-
- なにかいろいろ聞かれるけど、とりあえず全部entrtでデフォルトのまま使う。
- 下記のコマンドでvueをインストールする。
-
npm install --save vue
-
- テストのために以下の内容のhtmlファイルを作成し、vueが入っていることを確認する。
<html>
</head>
<title>TEST</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'TEST'
}
})
</script>
</html>
