This is an article, in the development of gold digging process, thinking and summed up, how to use vue. js and peripheral tools set into a complete and comfortable componentized development process.

Previous articles on how to develop VUE applications using Webpack and VUe-Loader include:

  • Uncle hook Vue + Webpack project practice
  • Vue. Js: Lightweight and Efficient Front-end componentization scheme published by You Da on CSDN
  • Vue.js and Webpack for djyde
  • Summary of MVVM learning & VUE practice of Baidu front End Group
PS: Anything below is based on version 0.12 and above, thanks to Vue authorsEspecially greatlyNew features and releases are being added continuously, with version 1.0 coming soon. There is no guarantee that anything below will be overwritten by the new version. If there is anything in this article that upsets you, please clap.

Componentized modular development

In Vue, components are treated as first-class citizens, so before designing and completing a Web App, it’s best to have a good idea of how the components will be built, which components will be reused, and which pages will be switched. On the principle of componentization and modularity, Vue provides extensions to some of the existing popular precompilation tools for managing Vue precompilable files. Vue-loader for Webpack and Vueify for Gulp.

Vue wants each one-page application to be simplified into components by building the system.

Examples developed using Webpack and Vue-loader

In the vue suffix file, three tags, template, script, and style are defined.







Copy the code

From a development perspective, maintain and develop a vUE file that can be used as a home page to reference other VUE components or switch pages, or as a component to be referenced by other Vue files. All the REQUIRED HTML, CSS, and javascript code is in it. Combined with the concept of MVVM, it is very clean and simple to use.

After installing Webpack and the loader you need, you can configure the loader and file import and export in the webpack.config.js file. Webpack precompiles and packages all content and resources into a SINGLE JS file. See Webpack’s website for details.

The front-end philosophy and viewpoint of Webpack is to introduce all resources (HTML, CSS, Javascirpt, picture) modularized with import and require, preprocess the resources as required, and finally package a JS file to be introduced by a single page application. There are a number of features and plug-ins in Webpack that can be used to build large, single-page applications, and the pit is slightly deeper. Here are a few simple loaders to show you how to use Webpack and Vue-Loader to manage an early single-page application.

NPM install –save-dev install babel-loader, Jade-loader, sass-loader, vue-loader

With dependencies installed, you can figure out how to set up the directory. Since everything is compiled into a JS file, you only need to save the Build directory in the public directory.

Nodemodule // various NPM libraries XXX XXX public build index.js // Webpack precompiled file, HTML // into the build directory of index.js vue assets // SCSS and image resources SCSS uuu.scss images ooo.png helper xxx.js // Vue // views xxx.vue // XXX page yyy.vue // yyy page main.js // Webpack precompile portal app.vue // be Main.js references the home page file webpack.config.js // webpack configuration fileCopy the code

Configuration in webpack.config.js:

module.exports = { entry: { 'index': './vue/index/main.js', }, output: { path: './public/bulid', filename: }, module: {loaders: [{test: /\. Vue $/, exclude: /node_modules/, loaders: [{test: /\. vue.withLoaders({ js: 'babel?optional[]=runtime' }) }, { test: /\.scss$/, loader: 'style!css!sass }, { test: /\.css$/, loader: "style!css" }, { test: /\.js$/, loader: 'babel-loader' } ] }, resolve: ModulesDirectories: ['node_modules'], Extensions: [', '.js', '.json']},}Copy the code

For more information about the use of Webpack, please visit the official website.

PS: During debugging, install vue-devTools in Chrome to view binding data in vue instances in real time.

Communication between parent and child templates

Component-based development The second question is, how best to communicate between parent templates and individual pages?

Considering the reusability of the child template, it is best for the child template to define the data that needs to be inherited from the parent template and its own independent data.

In Vue, data and methods are bound between parent and child templates. When parent and child templates communicate or trigger events, three situations occur:

  • The parent template event is triggered when the child template data changes.
  • Parent template data changes, triggering child template events.
  • Parent template data changes to other child templates, triggering other child template events.

In Vue, there are two ways for parent and child templates to trigger events with each other:

  • The event is triggered by a bound bidirectional variable of Watch.
  • Using event model events,$dispatch.$broadcast.$on, trigger and listen events.

For these three cases, Vue provides two methods to communicate and trigger events between father and child, child and child, which can cope with relatively complex situations.

PS: Observe the bidirectional binding variables through watch and trigger a parent-child method to strengthen the coupling degree between the parent and child templates. It is better not to use it if you have to. This is fine only if a variable of its own component fires an event.

Route switching of SPA

When building a SPA page, you usually need a Router library. The official VuE-Router has just been launched and is more complex to use. Using director, combined with the Components property, makes it easy and perfect to switch pages.

With Vue’s Component Keep Alive feature, the ability to cache during switching is awesome. Note that in 0.12, the Component replace attribute defaults to true. If you don’t have a root node to feed the subtemplate, the subtemplate will disappear.

Peripheral tools

Vue is a very young View layer framework that still needs a lot of development and improvement, with few tools and extensions around it. Attach here the address of the vUE peripherals:

Vue-loader: combines with Webpack for component-based development

Vueify: Componentized development in combination with Gulp

Vue – the router: routing

Vue-validator: forms validation library

Vue-resource: network request library

Vue-component-complier: combines with other precompilers

Vue-touch: event emulation

Meteor vUE: Combined development of METEOR and VUE

Vue-syntax-hightlight: Highlighting plugin for vue files for sublime Text

Vue-typeahead: Search input query ahead completion

Vue – i18n: i18n

Vue-devtools: a chrome development plug-in that can be used for debugging