Vue单页应用开发流程 (Laravel + Vue + Laravel-mix)

今天来介绍一下如何用Vue开发单页应用。

开发环境 ：

Laravel : 5.4

Vue : 2.1.10

vue-router: 2.7.0

1.准备

本篇文章默认你已经安装过Laravel,node,npm

运行npm install即可安装laravel-mix。如果失败的话请使用npm国内镜像。

之后通过 cnpm install --save vue-router 安装vue-router。（关于npm的找时间写一篇文章吧）

2.项目结构

Laravel的文件结构就不再多讲，这里讲一下跟Vue有关的几个地方。

resources\views

这个目录是 laravel的视图目录，Vue开发中这里只有一个文件，作为入口文件。

routes\web.php

这个文件是Laravel的路由文件，Vue开发中用一句指向入口文件

Route::get('/', function () {
    return view('welcome');
});

webpack.mix.js

这个文件是laravel-mix的配置文件，具体说明参照官方文档 [ Laravel 5.4 文档 ] 前端 —— 编译资源（Laravel Mix）