Memo

メモ > 技術 > フレームワーク: Vue.js > プロジェクトを作成して開発
プロジェクトを作成して開発
■プロジェクトを作成>cd C:\localhost\home\refirio_org\public_html\memos\vuejs_project
>vue create hello_app


実行すると質問が表示されるが、いったんすべてデフォルトのままでいい。
最後に「プリセットとして保存するか？（Save this as a preset）」と確認されるが、今回は「N」で保存せずに終了する。
hello_app フォルダが作成され、その中にファイルが作成される。
プロジェクトの操作はこのフォルダ内で行うため、フォルダ内に移動しておく。

>cd hello_app


以下でプロジェクトを実行する。

>npm run serve
 DONE  Compiled successfully in 4231ms

  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/ にアクセスするとページが表示される。
src/App.vue の内容を変更すると、表示される結果にもすぐに反映される。

■プロジェクトをビルド

以下でプロジェクトをビルドできる。

>npm run build


dist 内にファイルが書き出さる。
これらをWebサーバの公開フォルダ直下に配置すると画面が表示される。

■GUIツールでプロジェクトを管理する

プロジェクト一覧の場所に移動し、コマンドを実行する。

>cd C:\localhost\home\refirio_org\public_html\memos\vuejs_project
>vue ui


実行すると、自動的にブラウザで http://localhost:8000/project/select が開かれる。
この画面からプロジェクトの一覧を表示したり、プロジェクトを作成したりできる。
「設定 → Vue CLI → 公開パス」を空欄にすると、公開フォルダ直下以外に配置しても画面が表示されるようになる。
「タスク → serve → タスクの実行」を実行し、動画面の「出力」をクリックするとアクセス方法が表示される。
「タスク → build → タスクの実行」を実行すると、dist フォルダ内にビルド結果が出力される。

コマンドプロンプトから「Ctrl+C」で終了できる。

■Vue.jsの基本

basis.html
input.html
render.html
vhtml.html
vbind.html
vif.html
template.html
vfor.html

■プロジェクトを編集

先に作成した hello_app をもとに作業。

C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\App.vue
<template>
  <div id="app">
    <HelloWorld title="HelloWorld" message="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>


C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app\src\components\HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    title: String,
    message: String
  }
}
</script>

<style>
div p {
  color: #FF4500;
}
</style>


>cd C:\localhost\home\refirio_org\public_html\memos\vuejs_project\hello_app
>npm run serve

ブラウザには以下が表示される。
HelloWorld
Welcome to Your Vue.js App
Memo

Advertisement
