欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

在 Laravel 中使用vue(二)

程序员文章站 2022-04-25 22:25:14
...
上篇介绍了vue,以及在如何 Laravel 快速搭建vue环境。

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

预处理

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

npm install stylus jade --save-dev

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

Components

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

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

引入子模块

Alert 模块的具体实现

页面效果是这样的:

点击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 了,需要的同学自行查阅。