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>{{ message }}</h1>
    <input v-model="message">
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: { message: 'Hello Vue.js!' }
    })
  </script>
</body>
</html>


関連ページ



スポンサード リンク