Using Vue in Laravel (ii)

The previous article describes Vue and how to Laravel quickly build the Vue environment.

This article tells how to use Vue more deeply in Laravel.

Pretreatment

Vue also supports the use of preprocessing tools such as Jade, sass, and so on. Suppose you use stylus, Jade, then npm install it.

NPM Install stylus Jade--save-dev

Then specify in the Vue file, what is the preprocessing tool you are using

 
  
   
  . Hello  H1 Hello Vue
 
  

Components

Vue allows us to do a modular package, taking an alert module as an example, the function of this module is popup prompt, then the user can manually close, the programmer can set the style, content and so on. Directory division, add one more components of the folder to hold the module, it is different from the Vue file under the views, they are rendered on multiple pages, or can be completed independently of the business logic of the reusable module, and under the views is a Vue instance of the portal.

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

Introducing sub-modules

 
  
   
  . Wrapper  alert ()    | Hello Vue  alert (type= ' error ')    | Danger  alert (type= ' success ')    | Login Success
 
  

Specific implementation of the Alert module

 
  
   
  . 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 ()
 
  

The page effect is this:

Click X to close it.

Vue CDN

You may find that after using the above wave operation, we only produce a JS file, the volume of the file (uncompressed) has reached 2, 300KB, which is obviously unreasonable. The reason is that browserify the entire Vue into the JS file as well. But in fact vue.js we don't need to change. We can pull it out and use a CDN.

You can use Browserify-shim to do this.

NPM Install Browserify-shim--save-dev

Modify Package.json

"Browserify": {  "transform": [    "Vueify",    "Browserify-shim"  ]}, "Browserify-shim": {    "vue": " Global:vue "}

Modify the blade file to introduce a CDN

      Laravel                      

Before is directly the entire Vue file is pressed into, now replaced by a statement, file size 13KB

var _vue = (typeof window!== "undefined"? window[' Vue ']: typeof global!== "undefined"? global[' vue '): null);

TheEND

I have submitted the relevant source code in the Laravel project to GitHub, and the students need to check it out for themselves.

