Skip to content

Instantly share code, notes, and snippets.

@RyosukeKamei

RyosukeKamei/ExampleComponent.vue

Created December 19, 2017 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RyosukeKamei/fd4f900e114bd0bcc6954be6d0d138e8 to your computer and use it in GitHub Desktop.
Save RyosukeKamei/fd4f900e114bd0bcc6954be6d0d138e8 to your computer and use it in GitHub Desktop.
Download ZIP
Laradockを使った開発環境でVueを動かすまで ref: https://qiita.com/RyosukeKamei/items/97782fe113a70464502e
Raw
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
Raw
ExampleComponent.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
Raw
Laravel-mixでデプロイ（面倒）
$ docker-compose exec workspace rm public/js/app.js && docker-compose exec workspace npm run dev
Raw
Laravel-mix実行
$ docker-compose exec workspace npm run dev
> @ dev /var/www
> npm run development
> @ development /var/www
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
95% emitting
DONE Compiled successfully in 6233ms 6:39:43 AM
Asset Size Chunks Chunk Names
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1 20.1 kB [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb 18 kB [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158 23.4 kB [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512 45.4 kB [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760 109 kB [emitted]
/js/app.js 1.23 MB 0 [emitted] [big] /js/app
/css/app.css 147 kB 0 [emitted] /js/app
Raw
nodejsインストール
root@{コンテナ名}:/var/www# curl -sL https://deb.nodesource.com/setup_8.x | bash -
root@{コンテナ名}:/var/www# apt-get install -y nodejs
Raw
npmインストール
root@{コンテナ名}:/var/www# npm install npm@latest -g]
Raw
welcome.blade.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<link rel="stylesheet" href="css/app.css"/>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script type="text/javascript">
window.Laravel = window.Laravel || {};
window.Laravel.csrfToken = "{{csrf_token()}}";
</script>
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
<script src="js/app.js"></script>
</body>
</html>
Raw
コンテナにログイン
$ docker-compose exec workspace bash
Raw
悲しい現実
$ docker-compose exec workspace rm public/js/app.js && docker-compose exec workspace npm run dev
Raw
本来
$ npm run dev
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment