Vue.js_環境設定
CLIのインストール
Vueのインストール
npmからパッケージを取得します。
$ npm install -g @vue/cli
$ npm install -g @vue/cli-service-global
実行確認
app.vueファイルを作成します。
<template>
<div id="app">
<h1>Hello Vue.js!</h1>
<p>vue template</p>
</div>
</template>
vueを実行します。
$ vue serve app.vue
ブラウザで http://localhost:8080/ をアクセスするとサンプルが表示されます。
プロジェクト作成
プロジェクト作成は下記コマンド実行します。
vue create プロジェクト名
デバッグ実行します。
cd プロジェクト名
npm run serve
ブラウザで http://localhost:8080/ をアクセスするとサンプルが表示されます。
package.jsonにnpm scripts定義が用意されています。
例えばプロジェクトをビルドするには下記コマンドを実行します。
npm run build
プロジェクト支援ツール
GUIのプロジェクト支援ツールがあります。
ブラウザからプロジェクト作成・実行、プラグインの管理など開発で便利な機能が多く提供されています。
vue ui
開発ツール(Developer Tools)
開発者用に、Vue.js devtools という Chrome の Developer Tools の拡張機能が公開されています。
Chrome上でプロジェクトを開発する場合に、Chromeデバッガ機能として利用できるので便利です。
ローカルファイルを管理するには、右クリックの拡張機能から「ファイルのURLへのアクセスを許可する」を有効にする必要があります。
Vue.js単体ライブラリ
CLIや拡張機能を利用せず、最小構成のVue.jsを利用することもできます。
インストール
$ npm init -y
$ npm install vue
実行確認
下記のindex.htmlを用意して、ブラウザで開きます。
<!DOCTYPE html>
<html>
<head>
<title>Hello Vue.js</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1></h1>
<input v-model="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: { message: 'Hello Vue.js!' }
})
</script>
</body>
</html>