Laravel 前端:使用 Vue 组件 Draft 1 个改进

Laravel 默认集成了 Vue、Bootstrap、jQuery、Lodash等等前端组件,这个可以在 package.json 看到。

resources/js/app.js 是入口文件。这个文件加载了 resources/js/bootstrap.jsresources/js/components/ExampleComponent.vue

ExampleComponent.vue 是 Vue 示例代码,所以您可以先在测试环境中编译文件看看,后面再继续编写。

当然,还要在 resources/views/welcome.blade.php 加载 public/css/app.csspublic/js/app.js。这两个文件下面的步骤会生成。这两个文件的生成路径和文件名在 webpack.mix.js 定义。

测试环境

编写的过程中要测试效果,请输入以下命令:

npm install # 安装包
npm run dev # 编译 CSS 和 JavaScript 文件
php artisan serve # 先打开新的终端标签页,然后输入这个命令开启 web 服务,即可以点击 url 进行访问。

您还可以替换 npm run dev 命令为 npm run watch 实现检测到文件修改而自动重新编译。

生产环境

线上生产环境,请使用以下:

npm install
npm run prod

最后,使用如 Nginx 等 Web Server 进行配置。

本 Wiki 尚未完善,邀您参与 如何撰写一篇高品质的 Wiki?
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!