在 Laravel 中使用 vue(二)

2,007

上篇介绍了vue,以及在如何 Laravel 快速搭建vue环境。 这篇讲如何在 Laravel 中更深入使用Vue。

预处理

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


npm install stylus jade --save-dev

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





.hello
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;



Components

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


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

引入子模块











.alert
  padding: 10px;
  &-area
    margin-bottom: 10px;
  &-icon
    width: 20px;
    display: inline-block;
    float: left;
  &-close
    cursor: pointer;
    float: right;
  &-text
    word-break: break-all;
    margin-left: 20px;
    margin-right: 10px;
  &-info
    background: #c7e0f2;
    color: #0082d5;
    border: 1px solid #0082d5;
  &-success
    background: #8AC48A;
  &-error
    background: red;
    color: white;


页面效果是这样的: 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 了,需要的同学自行查阅。

相关阅读

如需转载,请注明出处: w3ctrain.com/2016/06/08/… ,欢迎加入前端Q群( 467969149 )