在 Laravel 中使用 vue（二）

最新推荐文章于 2024-08-16 23:32:06 发布

「已注销」

最新推荐文章于 2024-08-16 23:32:06 发布

阅读量75

点赞数

文章标签： vue.js laravel javascript 前端 ecmascript

本文链接：https://blog.csdn.net/JOUeu/article/details/128628060

版权

上篇介绍了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

页面效果是这样的： vue-in-laravel-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 了，需要的同学自行查阅。

在 Laravel 中使用 vue（二）

预处理

Components

Vue CDN

TheEnd

相关阅读