在 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 了,需要的同学自行查阅。
上一篇: JS排序算法小结