Use vue in Laravel (2)

In Laravel, I used vue (II) to introduce vue and how to quickly build a vue environment in Laravel.

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

Preprocessing

Vue also supports preprocessing tools, such as jade and sass. If Stylus and Jade are used, install npm.

npm install stylus jade --save-dev

In the vue file, specify the pre-processing tool you are using.

 
  .hello  h1 Hello Vue
 《script》export default {  el() {    return '#app'  },  data() {    return {    }  },  computed:{  },  ready() {  },  methods: {  },  events: {  },  components: {  }}《script》

Components

Vue allows us to implement modular encapsulation. taking an Alert module as an example, the function of this module is a pop-up prompt, and users can manually close it. programmers can set styles and content. Directory division: add one more components folder to store the module. The difference between this folder and the vue files under views is that they are displayed on multiple pages, or reusable modules that can independently complete the business logic, and views is the entry point of a Vue instance.

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

Introduce sub-modules

 
  .wrapper  alert()    | Hello Vue  alert(type='error')    | Danger  alert(type='success')    | Login Success
 《script》import Alert from '../components/alert.vue'export default {  el() {    return '#app'  },  data() {    return {    }  },  computed:{  },  ready() {  },  methods: {  },  events: {  },  components: {    Alert  }}《script》

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()
 《script》export default {    props: {        type: {            default: 'info'        },        show: {          type: Boolean,          default: true        },    },    computed:{      typeClass() {        return 'alert-' + this.type;      }    }}《script》

The page effect is as follows:

Click x to close it.

Vue CDN

You may find that, after using the previous wave of operations, we can only generate one js file. The size of this file (not compressed) has reached 2 to KB, this is obviously unreasonable. The reason is that browserify also outputs the entire vue to the js file. But we don't need to change vue. js. We can extract it and use cdn.

You can use browserify-shim to complete this task.

npm install browserify-shim --save-dev

Modify package. json

"browserify": {  "transform": [    "vueify",    "browserify-shim"  ]},"browserify-shim": {    "vue": "global:Vue"}

Modify the blade file and introduce cdn

      Laravel