Use vue in Laravel (2)

Source: Internet
Author: User
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    

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.