Vue单页应用开发流程 (Laravel + Vue + Laravel-mix)
开发环境 ：
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 install --save-dev vue-router
2.项目结构
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 替换成如下代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<link href="/css/app.css" rel="stylesheet">
</head>
<body>
<div id="app">
<example></example>
</div>
</body>
<script src="/js/app.js"></script>
</html>
4.构建单页应用
首先在 resources\assets\js\app.js 中加入window.VueRouter = require("vue-router");引入vue-router
单文件组件
编写单文件组件（具体参照vue官方文档），之后通过Vue.component('example', require('./components/Example.vue'));注册组件。注册完主键后就可以在HTML中以<example></example>形式显示组件。
路由
通过下面的方式定义路由
const routes = [
{ path: '/', component: {template :"<home></home>"} },
{ path: '/archives‘, component: { template: '<archives></archives>' } },
];
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
});
const app = new Vue({
router
}).$mount('#app');
之后在需要切换的HTML中加入<router-view></router-view>即可，之后就可以通过改变url来部分刷新，实现单页应用。
具体流程(代码基于第3步)
先编写一个页面框架组件 view.vue
<template>
<div class="row clearfix">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<div class="col-md-12 column content">
<div class="col-md-7 col-md-offset-1 column">
<router-view></router-view>
</div>
</div>
</div>
</template>
在app.js中注册Vue.component('my-view', require('./components/view.vue'));，并定义路由
const routes = [
{ path: '/', component: {template :"<home></home>"} }
];
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
});
const app = new Vue({
router
}).$mount('#app');
在入口文件welcome.blade.php中修改为以下代码：
<div id="app">
<my-view></my-view>
</div>
· 1
· 2
· 3
· 4
之后编写第二个组件。
这里就直接用原来的example好了。
更改app.js
const routes = [
{ path: '/'example', component: {template :"<example></example>"} }
];
使用城市三级联动iview-area
npm install iview-area --save
使用：<al-cascader v-model="fm.region" level="2" />
手动配置
1、运行命令 npm init
2、npm i webpack vue vue-loader
3、npm icss-loader vue-template-compiler
4、提示安装webpack-cli，进行安装 webpack-cli 或npm i webpack-cli --save-dev
Laravel Mix
接下来，需要安装 Laravel Mix，在新安装的 Laravel 根目录下，你会发现有一个 package.json 文件。该文件包含你所需要的一切，和 composer.json 类似，只不过是用来定义 Node 依赖而非 PHP 依赖，你可以通过运行如下命令来安装需要的依赖：
如果你正在 Windows 系统上开发，需要在运行 npm install 命令时带上 --no-bin-links：
npm install --no-bin-links
<img :src="$store.state.fileurl+'/images/paytip0.png'" alt="">
<p>2、查找制定模板，点击选用</p>
<img :src="$store.state.fileurl+'/images/paytip1.png'" alt="">
<p>3、选择下图关键词，并按下图调整好顺序；点击提交</p>
<img :src="$store.state.fileurl+'/images/paytip2.png'" alt="">
<p>4、复制模板ID</p>
<img :src="$store.state.fileurl+'/images/paytip3.png'" alt="">
