php 使用 vue2,在 Laravel 中使用vue（二）

上篇介绍了vue,以及在如何 Laravel 快速搭建vue环境。

这篇讲如何在 Laravel 中更深入使用Vue。

预处理

vue还支持使用预处理工具，比如jade, sass等等。假设使用Stylus, Jade，那就npm install 一下呗

npm install stylus jade --save-dev

然后在vue文件中指定，你使用的预处理工具是什么

.hello h1 Hello Vue

Components

Vue允许我们做模块化封装，以一个Alert模块为例，这个模块的功能是弹出提示，然后用户可以手动关闭，程序员可以设置样式，内容等等。目录划分，增加多一个components 的文件夹来存放模块，它跟views下的vue文件区别在于，它们是在多个页面呈现，或者是可以独立完成业务逻辑的可复用模块，而views 下是一个Vue实例的入口。

.├── components│ └── alert.vue├── entries│ └── hello.js└── views └── Hello.vue

引入子模块

.wrapper alert() | Hello Vue alert(type='error') | Danger alert(type='success') | Login Success

Alert 模块的具体实现

.alert-area(v-if='show') .alert(:class='typeClass') span(class='alert-close', @click='show=false') x i.fa.fa-info-circle.alert-icon(style='font-size: 16px;line-height: 20px;') .alert-text slot()

页面效果是这样的：

点击x可以关闭它。

Vue CDN

你可能会发现，使用上面一波操作之后，我们只产出一个js文件，这个文件的体积(未经过压缩)已经达到了2、300KB，这显然是不合常理的。原因是browserify把 整个vue也产出到js文件中。但其实 vue.js 我们并不需要改动到。我们可以将它抽出来，使用cdn。

可以使用 browserify-shim 来完成这件事。

npm install browserify-shim --save-dev

修改 package.json

"browserify": { "transform": [ "vueify", "browserify-shim" ]},"browserify-shim": { "vue": "global:Vue"}

修改 blade 文件,引入cdn

Laravel

之前是直接整个vue文件压入，现在替换成一条语句，文件大小13KB

var _vue = (typeof window !== "undefined" ? window['Vue'] : typeof global !== "undefined" ? global['Vue'] : null);

TheEnd

我把Laravel项目中相关 源代码 都提交到github 了，需要的同学自行查阅。

本文原创发布php中文网，转载请注明出处，感谢您的尊重！