js隐藏div vue_【Vue.js入门到实战教程】12在 Laravel 项目中编写单文件 Vue 组件

我们在《【Vue.js入门到实战教程】11-Vue Loader(下)| 编写一个单文件 Vue 组件》中演示了如何在 Vue CLI 原型项目中编写单文件 Vue 组件并进行编译，不过 Vue CLI 是一个纯前端的工具，我们之前使用 npm run serve 启动的也是一个 Node 服务器，如果想要在后端项目中集成 Vue.js 框架编写单文件 Vue 组件，而使用的开发框架又没有开箱支持 Vue 单文件组件，还是需要 手动配置 Webpack  支持 Vue Loader，好在 Laravel 框架对此提供了开箱支持。 今天这篇教程，我们就来演示如何在 Laravel 项目中编写 Vue 单文件组件。

初始化 Laravel 项目

在 vue_learning 目录下新建一个 Laravel 示例项目 demo-laravel：

laravel new demo-laravel

然后进入该项目目录，如果想要在 Laravel 项目中开箱使用 Bootstrap 和 Vue 框架，需要运行如下命令安装 laravel/ui 库：

composer require laravel/ui

再运行如下 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 配置文件中(位于项目根目录下)，你也可以看到当前 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 相关的 bootstrap、jquery、popper.js，以及 Vue 相关的 vue、vue-template-compiler，另外还有一个 laravel-mix，和 Vue CLI 项目对 Webpack 进行预配置类似，Laravel 项目可以使用这个库对 Webpack 进行预设置，并且使用它提供的 API 对前端资源进行编译打包，从而极大降低后端开发者使用 Webpack 编译前端资源的学习成本和入门门槛，你甚至不需要了解 Webpack，也能使用 Laravel Mix 编译前端资源，对应的编译代码位于 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');

当然，Laravel Mix 底层封装的仍然是通过 Webpack 对前端资源进行编译打包的操作，以及对 Vue Loader 的支持，这样一来，我们才可以实现在 JavaScript 文件中注册单文件 Vue 组件，并正常进行解析和编译。 注：关于 Laravel Mix 的更多 API 及使用方法可以参考  Laravel 官方文档 。 目前为止，还没有安装这些依赖库，需要在项目根目录下运行 npm install 进行安装才能使用它们： 至此，我们就完成了开箱支持单文件 Vue 组件的 Laravel 项目的初始化。

编写单文件 Vue 组件

接下来，我们来演示如何在 Laravel 项目中渲染单文件 Vue 组件。 我们将 resources/js/components 目录(默认的 Vue 组件存放目录)下自带的 ExampleComponent.vue 代码重命名为 HelloComponent.vue，并对代码做了略微调整：