TAILIEUCHUNG - Ebook Learning Vue.js 2: Part 2
(BQ) This book help you know how to build amazing and complex reactive web applications easily with . Invite you to consult this book. Part 2 includes 5 chapters (Plugins – building your house with your own bricks, testing – time to test what we have done so far, deploying – time to go live,.). Invite you to consult this book. | 6 Plugins – Building Your House with Your Own Bricks In the previous chapter, you learned how to manage the global application store using the Vuex architecture. You learned a lot of new concepts and applied them. You also learned how to create a store, how to define its state and mutations, and how to use actions and getters. We brought our shopping list and Pomodoro applications to life using the knowledge acquired during the chapter. In this chapter, we will revisit Vue plugins, see how they work, and how they must be created. We will use some existing plugins and create our own. Summing it up, in this chapter, we are going to do the following: Understand the nature of Vue plugins Use the resource plugin in the shopping lists application Create a plugin that produces white, pink, and brown noises and apply it to our Pomodoro application The nature of Vue plugins Plugins in are used for exactly the same purpose as they are used in any other scope: to add some nice functionality that, due to its nature, cannot be achieved with the core functionality of the system. Plugins written for Vue can provide various functionalities, starting from the definition of some global Vue methods or even the instance methods and moving toward providing some new directives, filters, or transitions. Plugins – Building Your House with Your Own Bricks In order to be able to use an existing plugin, you must first install it: npm install some-plugin --save-dev And then, tell Vue to use it in your application: var Vue = require('vue') var SomePlugin = require('some-plugin') (SomePlugin) We can also create our own plugins. This is also easy. Your plugin must provide an install method where you define any global or instance methods, or custom directives: = function (Vue, options) { // 1. add global method or property = . // 2. add a global asset ('my-directive', {}) // 3. add an instance method .$myMethod =
đang nạp các trang xem trước
