Vue full bucket practice project summary (recommended)

From the front-end point of view, Vue can be said to be the most ideal front-end MVVM framework. Everything is the interface service, and it is difficult to get the difficulty. This article will record a full-family bucket (Vue + Vue-Router + Vuex) The process of the jQuery + Template project, and the harvest during the period.

The official document of Vue is the best tutorial to learn Vue, there is no one, maybe because the frame author is the design, there is no back-end background, so each The abstract concept is just right in Vue to use the most easily understood way. Here is only the concept of Vue, Vue-Router, Vuex, and fully understand the official documentation.

The core function of VUE is two-way binding, automatically implements the interface-driven data change and data drive interface changes, which can greatly reduce the front-end interactive application. Development costs. The similar framework is more than Vue, but the realization of VUE will have a certain advantage in performance by means of ES5 native characteristics.


Vue-router is the official route, used to organize the mapping relationship between the URL and components, and automatically respond to the URL’s change in the component. Make developers only need to put the attention points on the development of the component, and the route helps you solve the trivial problem. Vuex

Vuex provides a centralized data management mode to deal with the complicated data flow, such as the sharing data of multiple components, The data that may cause the synchronization does not synchronize, or because the hook of the Object object in JS points to the same instance in memory, once the operation of the original data will be contaminated to other components, it is necessary to have a more organized data mode of operation. That is VUEX.

After understanding the basic concept of Vue, it will definitely unconsciously. Take them with JQuery Technology Stack is compared, want to know if these things are really necessary.

Can you first solve the problem with jQuery? The answer is affirmative, remember to use jQuery from one one INPUT when you initially make a form? This is the interface-driven data; if you have made any asynchronous interaction, you should have jquery to populate the AJAX data into the experience in the interface in the interface, which is the data driver interface. Although it can be done, it is a bit cumbersome, even with the above verification plugin and front-end template engine, but still needs to manually call the verification method and rendering method in each running node. It is also a website page, which can be complicated to a certain degree. This will be a big burden. Then the routing, the essence of the route is to implement the interface switching and interface to maintain the URL, and the single page application must have, this is actually not related to the technology stack, as long as the routing needs, even JQuery-based projects However, it has made a way, but only the JQuery era rarely makes a single page application.

VUEX is entirely based on the two-way bindings, which is equivalent to adding a broker between data and components. Components cannot directly operate data, can only submit operational requirements like brokers, by brokers To implement the operation, solve the various unpredictable problems caused by people, and the data is moved from the application, which has established a Store, which eliminates the problem of data pollution between components. jQuery should say that there will be this need, because jQuery is completely manual operation data, which is not expected.

After compared with jQuery, the applicable scene of Vue is obvious. From the development perspective, the more complex the complex items, the more, single page The most suitable, the content of the content is the most unsuitable. If the individual pages in the website can be used locally, such as the shopping cart page.

Of course, all this must be built in the premise of not compatible IE8, I am a little doubtful for this, because I see some 2C sites are using Vue, how do these front-end ER how to take the boss? ?

This reconstructed project is a front-end component management system developed by the previous company. This project is because it is more familiar with demand, this is a typical single page application, and complexity is moderate, and it is more suitable for use as a startup. The project background is an outsourcing station company, and the design link deposits a large number of reused components. The designer often only needs to fine-tune the component, and the pages are delivered to the front, theoretically, these components can be completed at the front end. Use, but in fact, the front end must re-implement the entire page every time, waste a lot of manpower.

The idea of ​​this project is to develop all components, unified entered a platform management, designers can pick components on the platform, and Real-time preview and adjustment components, the entire process will find the adjustment result to generate a string code, as long as the code is handed over to the front end, you can use this string code to reproduce the designer’s modified components on the platform, and One-click copy component HTML / CSS / JS code, quickly applied to the project, so that the cost of development cost of the component portion is close to zero. Platform need to implement the following functions:

management component that supports the classification, search, sort,

display components, supporting components online preview / edit

component transfer, Support to generate component code and code reproduce component

to support the use of statistical components, easy to further optimize component
  1. function analysis
  2. the first edition is a jQuery + template implemented, this technology stack is too flexible, the advantage is better to do what the needs are, the disadvantage is how to do anything, is not conducive to clear thinking, often accompanied by side doing to change.
  3. The component is unified in a widgets / folder, known as component library, because it is a pure front-end project without file operation capability, so the component reads depending on a static JSON file, this file acts as a component library Directory, including components classification,All information such as label, name, date, is probably like this:

[{“Title”: “Navigation”, “List”: [{“widget” : “Bread-1”, “Title”: “Icon Braggs”, “Tag”: “Braz / Icon”, “Author”: “UI”, “Date”: “2015-06-04”}. ..}, …]

The component is stored in the component library in the form of a column / number secondary folder, and the storage directory is set as the component code. For example, component BREAD-1 means that the component storage address is a widgets / break / 1 / folder.

Of course, the internal file structure of the component must also be agreed, as follows:
   Widgets | -Bread | -1 | -Album.jpg // Thumbnail | -config.json // Profile | -Script.js // Script Template | -style.css // Style Template `-Temp.htm // Interface Template 

With these conventions, the program can get all the components of information, the acquisition, display, and retrieval of the components can be achieved through the directory file.

The most critical is the config.json file in the component, which contains the configurable items of the component and its default values. The platform reads this configuration file when the component is displayed, and the configuration panel is generated according to the configuration information. This can define all variables in the component interface, style, script, the configuration file is probably like this:

 {"cssconfig": {"fontsize": {"Name" : "Fontue", "Value": "12px", "Type": "text"}, ...}, "jsconfig": {...}, "showwidth": {"name": "Raster Width, "Value": 12, "Type": "Number"}, ...}}   
CSSCONFIG, SHOWCONFIG, JSCONFIG, three branches in the configuration file It is a collection of variables that can be modified in the component. If you want to apply these variables to the component, you need to use the front-end template engine, so the three parts of the component are written by template. After the template engine, Can get the actual HTML / CSS / JS content after the configuration, such as the style template is probably like this:

.widget-break-1 {font-size: $ {FONTSIZE .value}; color: $ {textcolor.value};} .widget-break-1 a {color: $ {textcolor.value};}. widget-break-1 A: Hover {Color: $ {hovercolor.value} }. widget-break-1 .ion {font-size: $ {iconsize.value}; margin: 0 $ {iconmargin.value};}
   is obtained After the component actual code, just update the result inserted into the page, it is updated in a timely manner, where HTML and CSS can replace the text, JS, because it is modularly introduced, only replacing the module content does not overload the module, must be heavy After the name is replaced, the name of the JS module isRandom. 
There will be a problem here, and some components need to be used multiple times in the page, then the JS selector of this component will conflict, this problem can solve the random name of the JS module, we The agreement is agreed as a reserved variable in component development, and the platform is automatically assigned a random string, which is the same inside the component instance, and the multiple calls are different, so as long as the $ {id} is used as the ID or Class of the component parent node. In order to solve the problem of selector conflict, it can also be used as a CSS namespace of the component to make the possible CSS naming conflicts also resolve invisible.

The above is the core function of the project.

In addition, LocalStorage is used as a storage method to implement a single-machine version of data statistics. You can collect records of components of the current browser, as well as the configuration of each use, which is mainly for local storage, but The project’s own development also uses the front-end template. When the component’s template will be used to cache after the first load, the cache policy of these content is different, and the user data should be permanently stored. The project template should be manually updated manually, the component The template needs to be determined by the situation. When the store is more, it needs to be cleaned. When it is cleaned, the deletion is unrealistic. All delete the storage that may not be misleading other applications. The practice is to encapsulate the localStorage operation, storage method In the case of Key, add a special prefix, when delete the local stored key and determine if the matching prefix knows whether it is a stored store, the corresponding value method must be reversed first to the key plus the prefix. Value.
 The other localStorage is only supported by the string. In order to facilitate our access object type, the package method also supports automatic conversion, but this conversion can not be blindly encountered to turn the character, value When you match the object, you can turn your object, because sometimes the user may really save a object string, and I will want to take it back when I take it out, to solve this problem, you need to do a small HACK, when storage method When the value is object is detected, it will be converted to a string and put a marking string in front. The value method will only be rear after detecting this identity.The string is restored to the object. Although this method can meet the needs, it is not very insurance, because this prefix is ​​fixed, theoretically, there is always a winning, do not know if this problem is better than other better solutions .   The main function point of the project is these. 

One reconstruction

The first reconstruction only used Vue, first in the process of reconstruction It’s a variety of convenience. It is the way to call the template engine to do the way. It was originally to be binding in JS. Now it is directly bound to the template, and there are other grammatical sugar.

Of course, the most important or two-way binding, based on the two-way binding allows the interface and data to automatically associate, people feel that the program has certain autonomy, but in order to make this autonomy Developers must plan each step in advance, which is not so free to jQuery. For example, jQuery is better than a special flexible crane, you can lose weight, you can figure out bricks; VUE is like an universal remote control, you tell him that you have to move the brick to a place from somewhere, what happens during the period How to deal with, press the button to automatically move.

There are various ways, and the cranes can be well flexible. It is easy to avoid on the road. The disadvantage is that you have to open it; buttons can be programmed automatically, the disadvantage is You have to investigate the pit on the road in advance, and all the other cars have been scheduled. All the situation is clear, otherwise it will turn into the car or hit the car, and you will feel this kind of binding sense from jQuery, you must feel this kind of binding sense, forced you must “Sutrack”, can’t get on the car first.

A large part of the reconstruction period is to establish a Vue instance, collect data from each corner of JS to Data, and focus on the process of operation data to Methods, will data The screening process is concentrated in computed. This whole process can be clearly reviewed each implementation details. It is not reasonable to reflect on every implementation. In fact, it is to summarize the process of turning the heavy machine into one remote control button, as all After the summary is completed, the VUE example has become the end of us.The project can run automatically.

After remanufacturing, the various functions of Vue rendering the logical part of the logical part, in addition to this, there is no improvement to the project itself, because there is no routing, so refreshing page status loss problem still exists Because of the use of Vuex, it is also solved with a deep copy; and based on the assembly development mode, the code organization is broken, and these issues require secondary reconstruction. Secondary Reconstruction

The second reconstruction goal is to improve routing, Vuex, code organization, and wild dog clouds.

Although there is a first reconstruction experience, the second reconstruction is still a bit awkward, the route and VUEX should be on? Think about it, the routing thing is “demolition”, and Vuex is “change”, and it feels a small amount of work, so I will first on VUEX.

Vuex understanding of the concept of thin air a bit abstract, but once that’s handy to spend, but this thing is not like the route, almost no distinction between scenes can be used to introduce the problem of pollution data after Vuex naturally resolved, and Vuex brought action => mutation => store upon acceptance process becomes really make things simple, the process of introducing Vuex basic data is transferred to the Store, the operation data dispersed actions, getters, mutations go, while Many synchronous data operations are not needed, so that the code amount is reduced.

After the introduction of the route, you can’t divide the view at the beginning, the big view is definitely the login, registration, main interface, the problem is that the main interface needs to be resolved, theoretical can be divided Fine, but combined with the actual use scenario found that the switching of the interface is relatively frequent, the overhead of the components frequently loaded and unloaded will be large, and the coupling components are dismantled to different views, and many status information is required, which is a bit not worth it. If you do not continue to separate your main view. Considering that the access overlap is not high, it will naturally need to make asynchronous loading, only load components when accessing, Vue itself supports asynchronous components, so this is very simple, as long as you can returnBack to a promise, you can use any way to get the component.

Next to access wild dog clouds, real user management and data statistics, wild dog clouds can provide a series of functions such as user authentication and data storage. It can also develop one by JS by it. Complete web application. This, all the operations of LocalStorage have changed to the operation of wild dog clouds, and the data has become more reliable.

The second reconstruction is completed, and the overall feeling of business code is much reduced, but the total code amount is estimated is not less, after all, it has also increased three framework files, but after heavy split, the number of files At the beginning, three JS turned ten JS, Seajs used in modularization instead of WebPack, because individuals still hosted their attitude toward WebPack, and the key is not based on WebPack development. The code will mix a lot of private goods, let your code become nausea, you can’t afford it, this is not too acceptable, and in multi-page scene Seajs, the local cache is more advantageous than WebPack, of course, they The difference is the same as JQuery and Vue, the essence is not a thing, the key is to use the scene, suitable for the best.

After the report

After two reconstruction practices and stepped pits, the Vue framework has a deeper understanding, and VUE wants to use the flexibility, development The project architectural capacity has a minimum requirement. If you want to introduce VUE into the underlying, there is a minimum requirement for the planning capabilities of infrastructure builders. These are the JQuery Technology Stacks, and the process of using VUE is also accepting these constraints. Process, they can guide developers to build their own rules system, this is a good thing, and it is a general trend. After all, the real freedom is only existing in rules.

The full code of this article see Github.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment