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