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

来源：互联网发布：王家卫我爱你知乎编辑：程序博客网时间：2024/06/06 06:58

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

开发环境：

Laravel : 5.4

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 替换成如下代码

<!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>

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

7.31-1

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>

之后编写第二个组件。

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

更改app.js

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

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

总结

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

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

阅读全文

1 0

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

开发环境 ：

1.准备

2.项目结构

resources\views

routes\web.php

webpack.mix.js

resources\assets

/js

/components

\bootstrap.js

\app.js

3.第一个Vue应用

运行mix

编写入口文件

4.构建单页应用

单文件组件

路由

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

总结

开发环境：

　/js

　　/components

　　\bootstrap.js

　　\app.js