上篇介绍了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
页面效果是这样的: 点击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 了,需要的同学自行查阅。
相关阅读
如需转载,请注明出处: http://w3ctrain.com/2016/06/08/vue-in-laravel-2/ ,欢迎加入前端Q群( 467969149 )