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）。

resources\assets

这个目录下存放的是项目资源文件如js，css等。开发环境中的js和css代码放在这里。

　/js

这个目录js的源码目录，Vue的代码都放在这里。

　　/components

这个目录下存放的是Vue单文件组件。

　　\bootstrap.js

所有的js依赖都写在这个文件里。

　　\app.js

这个文件是Vue的入口文件。

3.第一个Vue应用

运行mix

运行npm run watch即可运行mix

初始安装的laravel中 webpack.mix.js 有以下代码。

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

运行mix后会将代码编译后放在指定目录下。

编写入口文件

将 resources\views\welcome.blade.php 替换成如下代码

如果看到下面这样则说明运行成功

4.构建单页应用

首先在 resources\assets\js\app.js 中加入window.VueRouter = require("vue-router");引入vue-router

单文件组件

编写单文件组件（具体参照vue官方文档），之后通过Vue.component('example', require('./components/Example.vue'));注册组件。注册完主键后就可以在HTML中以形式显示组件。

路由

通过下面的方式定义路由

const routes = [
    { path: '/', component: {template :""} },
    { path: '/archives‘, component: { template: '' } },
];

const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
});

const app = new Vue({
    router
}).$mount('#app');

之后在需要切换的HTML中加入即可，之后就可以通过改变url来部分刷新，实现单页应用。

具体流程(代码基于第3步)

先编写一个页面框架组件 view.vue

在app.js中注册Vue.component('my-view', require('./components/view.vue'));，并定义路由

const routes = [
    { path: '/', component: {template :""} }
];

const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
});

const app = new Vue({
    router
}).$mount('#app');

在入口文件welcome.blade.php中修改为以下代码：

之后编写第二个组件。

这里就直接用原来的example好了。

更改app.js

const routes = [
    { path: '/'example', component: {template :""} }
];

这样在url中输入localhost/#/example 就能看到效果。

总结

在app.js中注册组件，编写路由。由.vue 文件编写组件。通过来通过url显示不同的视图。

---

下次再写Vue的大概是关于组件的一些东西。然而，并不知道要什么时候