如何用 Laravel Mix 單獨開發 Vue 專案？

sachu發表於2020-04-20
LaravelVue

我們知道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 協議》，轉載必須註明作者和本文連結

相關文章