国产最新在线播放,一级无码毛片,国产麻豆操逼视频,免费毛片在线,国产午夜福利免费视频在线观看,色色网站在线观看观看,欧美日韩中文视频,精品久久久久久久成人热 91

我們在《【Vue.js入門到實戰(zhàn)教程】11-Vue Loader（下）| 編寫一個單文件 Vue 組件》中演示了如何在 Vue CLI 原型項目中編寫單文件 Vue 組件并進(jìn)行編譯，不過 Vue CLI 是一個純前端的工具，我們之前使用?npm run serve?啟動的也是一個 Node 服務(wù)器，如果想要在后端項目中集成 Vue.js 框架編寫單文件 Vue 組件，而使用的開發(fā)框架又沒有開箱支持 Vue 單文件組件，還是需要手動配置 Webpack?支持 Vue Loader，好在 Laravel 框架對此提供了開箱支持。

今天這篇教程，我們就來演示如何在 Laravel 項目中編寫 Vue 單文件組件。

初始化 Laravel 項目

在?vue_learning?目錄下新建一個 Laravel 示例項目?demo-laravel：

laravel new demo-laravel

然后進(jìn)入該項目目錄，如果想要在 Laravel 項目中開箱使用 Bootstrap 和 Vue 框架，需要運(yùn)行如下命令安裝?laravel/ui?庫：

composer require laravel/ui

再運(yùn)行如下 Artisan 命令初始化 Bootstrap 和 Vue 組件腳手架代碼：

php artisan ui bootstrapphp artisan ui vue

這個時候，打開?resources/js?目錄，可以看到如下 Vue 組件和 JavaScript 入口文件：

在入口文件?app.js?中，可以看到加載 Bootstrap 和 Vue 框架的代碼，以及注冊 Vue 組件和初始化 Vue 對象實例并將其掛載到指定 HTML 元素的代碼：

/** * 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 ->  */
// 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',});

另外，在管理前端依賴的?package.json?配置文件中（位于項目根目錄下），你也可以看到當(dāng)前 Laravel 項目依賴的前端庫：

"devDependencies": {    "axios": "^0.19",    "bootstrap": "^4.0.0",    "cross-env": "^7.0",    "jquery": "^3.2",    "laravel-mix": "^5.0.1",    "lodash": "^4.17.19",    "popper.js": "^1.12",    "resolve-url-loader": "^2.3.1",    "sass": "^1.20.1",    "sass-loader": "^8.0.0",    "vue": "^2.5.17",    "vue-template-compiler": "^2.6.10"}

其中有 Bootstrap 相關(guān)的?bootstrap、jquery、popper.js，以及 Vue 相關(guān)的?vue、vue-template-compiler，另外還有一個?laravel-mix，和 Vue CLI 項目對 Webpack 進(jìn)行預(yù)配置類似，Laravel 項目可以使用這個庫對 Webpack 進(jìn)行預(yù)設(shè)置，并且使用它提供的 API 對前端資源進(jìn)行編譯打包，從而極大降低后端開發(fā)者使用 Webpack 編譯前端資源的學(xué)習(xí)成本和入門門檻，你甚至不需要了解 Webpack，也能使用 Laravel Mix 編譯前端資源，對應(yīng)的編譯代碼位于?webpack.mix.js?中：

const mix = require('laravel-mix');
/* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */
mix.js('resources/js/app.js', 'public/js')    .sass('resources/sass/app.scss', 'public/css');

當(dāng)然，Laravel Mix 底層封裝的仍然是通過 Webpack 對前端資源進(jìn)行編譯打包的操作，以及對 Vue Loader 的支持，這樣一來，我們才可以實現(xiàn)在 JavaScript 文件中注冊單文件 Vue 組件，并正常進(jìn)行解析和編譯。

注：關(guān)于 Laravel Mix 的更多 API 及使用方法可以參考?Laravel 官方文檔。

目前為止，還沒有安裝這些依賴庫，需要在項目根目錄下運(yùn)行?npm install?進(jìn)行安裝才能使用它們：

至此，我們就完成了開箱支持單文件 Vue 組件的 Laravel 項目的初始化。

編寫單文件 Vue 組件

接下來，我們來演示如何在 Laravel 項目中渲染單文件 Vue 組件。

我們將?resources/js/components?目錄（默認(rèn)的 Vue 組件存放目錄）下自帶的?ExampleComponent.vue?代碼重命名為?HelloComponent.vue，并對代碼做了略微調(diào)整：

<template>    <div class="container">        <div class="row justify-content-center">            <div class="col-md-8">                <div class="card">                    <div class="card-header">Hello Componentdiv>
                    <div class="card-body">                        <slot>slot>                    div>                div>            div>        div>    div>template>
<script>    export default {        name: 'HelloComponent'    }script>
<style scoped>    .container {        margin: 10px;    }style>

單文件 Vue 組件的結(jié)構(gòu)還是和之前一樣，這個組件的邏輯非常簡單，會通過插槽將父級作用域傳遞過來的歡迎文本渲染出來。

修改?app.js?中的組件注冊代碼：

Vue.component('hello-component', require('./components/HelloComponent.vue').default);

為了讓修改后的 Vue 組件生效，需要運(yùn)行?npm run dev?命令編譯 JavaScript 文件，編譯成功會有相應(yīng)的提示文本：

然后，我們就可以在?resources/views/welcome.blade.php?中引入上述編譯后的前端資源文件，在頁面中渲染?hello-component?組件了：

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">    <head>        ...
        // 引入支持 Bootstrap 的 CSS 樣式文件        <link href="{{ asset('css/app.css') }}" rel="stylesheet">    head>    <body>                <div id="app" class="flex-center position-ref full-height">            ...
            <div class="content">                ...                                <hello-component>你好，學(xué)院君！hello-component>            div>        div>                <script src="{{ asset('js/app.js') }}">script>    body>html>

運(yùn)行?php artisan serve?啟動 Laravel 內(nèi)置 Web 服務(wù)器，就可以在瀏覽器通過?http://127.0.0.1:8000/?訪問項目首頁了，該路由渲染的視圖正是?welcome.blade.php，我們可以在頁面中看到 Hello Component 組件渲染的內(nèi)容，說明單文件 Vue 組件注冊成功：

前端代碼熱重載

在本地開發(fā)過程中，如果你覺得每次新增或修改 Vue 組件代碼后重新運(yùn)行?npm run dev?很麻煩，可以通過?npm run watch?命令編譯前端資源，該命令會監(jiān)聽前端資源的修改，一旦有變動會重新運(yùn)行?npm run dev?指令：

可以看到?npm run watch?命令運(yùn)行之后，不會退出，會繼續(xù)監(jiān)聽前端資源的調(diào)整。

我們試著修改?HelloComponent.vue?代碼，調(diào)整 CSS 樣式如下：

<style scoped>    .container {        margin: 30px;    }style>

保存更改后，可以看到命令行中會再次編譯前端資源，此時在瀏覽器中刷新?http://127.0.0.1:8000/?頁面，可以立即看到樣式調(diào)整生效：

這和我們上篇教程介紹的 Vue CLI 項目中的 Vue 組件熱重載效果完全一致。

這些 NPM 命令都配置在?package.json?的?scripts?選項中：

"scripts": {    "dev": "npm run development",    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",    "watch": "npm run development -- --watch",    "watch-poll": "npm run watch -- --watch-poll",    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",    "prod": "npm run production",    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"},

如果是生產(chǎn)環(huán)境，可以運(yùn)行?npm run prod?命令編譯前端資源，該命令不會展示編譯細(xì)節(jié)，另外還有一個?hot?指令，該命令和上篇教程 Vue CLI 項目的?serve?命令一樣，會啟動一個 Node Web 服務(wù)器，并且通過?--hot?選項表明支持前端代碼熱重載，不過我們這里不是前端項目，這個命令在這里沒有什么意義。

本文完~

【Vue.js 入門到實戰(zhàn)教程】10-Vue Loader （上）| 基于 Vue CLI 初始化原型項目

【Vue.js 入門到實戰(zhàn)教程】09-Vue 組件插槽 | 父子組件間的內(nèi)容分發(fā)和插槽作用域

【Vue.js 入門到實戰(zhàn)教程】08-Vue 組件通信 | 父子組件之間的數(shù)據(jù)傳遞和事件監(jiān)聽

【Vue.js入門到實戰(zhàn)教程】12-在 Laravel 項目中編寫單文件 Vue 組件

初始化 Laravel 項目

編寫單文件 Vue 組件

前端代碼熱重載