如何用 Laravel Mix 单独开发 Vue 项目?

我们知道Laravel Mix作为Laravel前端的组件,使得让Laravel的前端开发变得简单。

Laravel Mix本身是一个独立的npm包,里面包含了webpack,也很方便利用Vue来开发前端。如果我们只想要Laravel Mix来开发前端项目该如何开发呢?

本文我们来看下如何用Laravel Mix配合Vue来做一个前端开发环境。

我们需要安装nodejs,如果没有的话安装下。安装以后可以用npm -v或者node -v来看下是否已经安装成功。

首先执行下npm init -y这个命令快捷创建package.json文件。

然后执行:

npm install laravel-mix --save-dev

来安装laravel-mix。

接下来复制下webpack.mix.js文件到项目根目录下:

cp node_modules/laravel-mix/setup/webpack.mix.js ./

我们还需要安装一个npm包,cross-env,用这个包来应付不同环境。

npm install cross-env --save-dev

最后我们需要修改下npm脚本,修改package.json:

"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",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --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"
}

用这段替换下package.json的scripts的部分。

如果我们打开webpack.mix.js文件的话我们会发现这两行:

let mix = require('laravel-mix');
mix.js('src/app.js', 'dist/').sass('src/app.scss', 'dist/');

我们需要创建scr和dist两个文件夹作为我们开发的源文件夹和产出的文件夹,还要创建2个文件,app.js和app.scss。

执行命令:

mkdir src && touch src/app.{js,scss}

最后,我们来安装vue:

npm install vue --save-dev

我们可以用一行来引入vue,修改scr/app.js

import Vue from 'vue';

这时候如果我们执行

npm run watch

最后结果如果看见类似这几行的话表明安装成功:

 DONE  Compiled successfully in 1713ms                                                                                                                                                                  8:14:45 AM

       Asset     Size     Chunks             Chunk Names
/dist/app.js  334 KiB  /dist/app  [emitted]  /dist/app
dist/app.css  0 bytes  /dist/app  [emitted]  /dist/app

最后我们在项目的根目录创建一个index.html,然后用emmet做一个简单的html白页,引入要编译好的app.js到这个页面上。

<script src="./dist/app.js"></script>

这样环境就大功告成了。
在开发vuejs项目的时候我们势必会遇到用到vue组件的时候,如何做呢?
在src文件夹下面做一个components的文件夹:

mkdir src/components

并且做一个新的组件,例如叫example.vue。一般的IDE会创建一个简单的组件模板。
然后我们把这个组件引到src/app.js:

import Vue from 'vue';
import example from "./components/example";

便于下载使用,我把这个包上传到了gitee上:
https://gitee.com/sachuronggui/laravel-mix

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 4
Epona

讲道理,单独开发Vue的话, Vue-CLI 不香么😂。

Laravel-Mix唯一好的地方应该就是 不用那么麻烦的配置Webpack了。

不过,感谢提供新思路。😊

2个月前 评论

同一楼意见,直接使用 Vue Cli 比使用 Laravel Mix 更好,我们的 Laravel 项目,也不用它。 理由:

  • Laravel Mix 用这个脚手架的还是属于小众,出了问题都是单打独斗
  • 既然要走前后端分离,那就项目也分开,不用混在一起开发
2个月前 评论
bigliang_iOS

混在一起也可以直接用vue-cli :grin: https://github.com/yyx990803/laravel-vue-c...

2个月前 评论

Laravel Mix 适合小项目,基本的东西都有了。

2个月前 评论

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