Laravel5.4는 Vue입니다.js 준비 사용하기

의존성 패키지에 넣기

우선 npm install로 의존포장을 하겠습니다.npm install

편역하다

npm run dev

$ npm run dev

> npm run development


> 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

 ERROR  Failed to compile with 2 errors

 error  in ./resources/assets/sass/app.scss

Module build failed: Error: ENOENT: no such file or directory, scandir '/home/service/cocoa/node_modules/node-sass/vendor'

node-sass가 없다고 해서 설치했습니다.npm install node-sass재도전npm run dev

 DONE  Compiled successfully in 4712ms

                                                                                                    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.2 MB       0  [emitted]  [big]  /js/app
                                                                                             /css/app.css   147 kB       0  [emitted]         /js/app

이번에 성공했어.

Vue 구성 요소 표시

기본적으로 준비된 구성 요소 사용하기
resources/assets/js/components/Example.vue
resorces/assets/js/app.js

...

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'　#
});

기본적으로 example 어셈블리는 Vue로 설정되고 ID는 적용된 컴포넌트에 등록됩니다.
어쨌든 먼저 말씀드리겠습니다.

<div id="app">
    <example></example>
</div>

뷰의 적절한 위치에 배치하여 표시합니다.

이(가) 표시됩니다.