Laravel5.8 安裝使用 vue

網上的一些教程讓我流淚。。。真的，我就是想安個vue，能跑個例項，然後開開心心給到前端就完事了，都會夾雜一些vue的多餘知識，這些可以後續看vue文件啊。

1.看文件，你看laravel文件前端指南vue那塊雖然短小無力，但是完全滿足我上邊說出的需求。

#專案根目錄
npm install

2.成功後目錄多了一個node_modules,多餘的一些檔案可以不用管。

3.執行多餘檔案webpack.mix.js中宣告

npm run dev
4.laravel 給你自動生成的vue例項已經成功了。傳不了圖片，看程式碼吧“專案目錄\resources\js\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');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * 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.
 */

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

5.編輯前端介面，根據你控制器來，你要是預設的welcome.blade.php你就把多餘的都刪掉，改成如下的即刻。或者複製到你的前端頁面。

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>首頁</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <!-- app.css -->
        <link href="{{ asset('css/app.css')  }}" rel="stylesheet">
        <!-- Styles -->
        <style>
        </style>
    </head>
    <body>
    <!-- app.js編譯的Vue.component呼叫 -->
    <div id="app">
        <example-component></example-component>
    </div>
    <!-- app.js -->
    <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

6.在命令列內執行一遍
npm run dev
7.瀏覽器訪問，看到如兩段文字就成功了
Example Component

I'm an example component.

周洪亮

Laravel5.8 安裝使用 vue

相關文章