[TOC] # JavaScript & CSS 脚手架 ## 简介 Laravel 默然包含 [Bootstrap](https://getbootstrap.com/) 和 [Vue](https://vuejs.org/) 两个脚手架。 > 提示：默认情况下， Laravel 的`package.json`文件包含`vue`、`axios`等几个包，以帮助你开始构建 JavaScript 应用。可以根据应用的需要随意添加或删除`package.json`文件中的依赖。 ## 删除前端脚手架 使用`preset`Artisan 命令从应用中删除 Bootstrap 和 Vue 脚手架，只保留空的 SASS 文件和几个常用的 JavaScript 工具库： ``` $ php artisan preset none ``` ## 安装依赖 ``` // 确保已安装 Node.js 和 NPM node -v npm -v $ npm install ``` > Tip：`app.js`文件将载入`resources/js/bootstrap.js`文件，它负责配置和启动 Vue、 Axios、 jQuery 和其它 JavaScript 依赖。如果你想配置额外的 JavaScript 依赖，可以在这个文件内完成。 ## 编译代码 ``` // 未被压缩，开发模式 $ npm run dev $ npm run developmennt // 自动压缩，生产模式 $ npm run prod $ npm run production // 监视文件自动编译 $ npm run watch // 在某些环境中，当文件更改时，Webpack 不会更新 $ npm run watch-poll ``` ## 编写 Vue 组件 默认情况下，纯净的 Laravel 应用包含`ExampleComponent.vue`Vue 组件，存放在`resources/js/components`目录中。`ExampleComponent.vue`文件是一个[单文件 Vue 组件](https://vuejs.org/guide/single-file-components)示例，在同一个文件中定义了组件的 JavaScript 和 HTML 。单文件组件提供了构建 JavaScript 驱动应用的简便方法。这个示例组件是在`app.js`文件中注册的： ``` Vue.component( 'example-component', require('./components/ExampleComponent.vue') ); ``` 要在应用中使用该组件，需要将其放入 HTML 模板。比如，运行`make:auth`Artisan 命令搭建应用的用户身份验证和注册页面的骨架，只要把这个组件放到`home.blade.php`Blade 模板中： ``` @extends('layouts.app') @section('content') <example-component></example-component> @endsection ``` >[success] 注意：每次修改了 Vue 组件，都要运行`npm run dev`命令。也可以运行`npm run watch`命令监视和自动重编译发生变化的组件。 ## 使用 React 在纯净的 Laravel 应用中，可以使用带有`react`参数的`preset`命令删除 Vue 脚手架，并使用 React 脚手架代替，同样包含一个组件示例。 ``` $ php artisan preset react ```