如何用 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 协议》，转载必须注明作者和本文链接