戻る
■プロジェクトを作成して開発
■プロジェクトを作成 >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