メモ > 技術 > フレームワーク: 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