Single-page development solution based on Vue2.0 and vue2.0

Single-page development solution based on Vue2.0 and vue2.0

On the last day of June 2016, we should sum up the gains and losses of the year, where we do well, where we need improvement, and note what we will use in the future.

After nearly half a year of graduation, I have been responsible for front-end development and maintenance of the company's projects. At that time, the company wanted to separate the front-end and back-end terminals to improve front-end development efficiency and convenience of post-maintenance, so after some investigation, I decided to adopt the SPA model. The main reason was that we couldn't come up with something like that in Midway Island.

The project does not need to be compatible with IE 8 or earlier browsers, so Vue is selected in the selection. javascript is a set of things, because react has also known before, and it is indeed not as fast as getting started with Vue.

In addition to the maintenance time of the old project, vue has been used for more than three months. Let's write your experiences during this time.

1. How to divide components and modules

Componentized development has been a long term of discussion. before having no practical experience, let's look at the blogs written by migrant workers and other predecessors. I feel that this is really cool and easy to use, however, when we start to do this, we will find that it is not as simple and beautiful as we think. For specific questions, refer to this article Vue. js practices.

In terms of component division, I divided the general component into two parts: component (widgets) and module (modules). The component is mainly functional, the module is defined through the UI style.

From the source analysis, a website is composed of many pages, each page contains different blocks, and each block is composed of different elements, we can think of these elements as components, that is, the smallest component unit of the page.

However, in actual development, I did not write all the elements as components, but some functional elements that will be reused before being written as components, such as drop-down boxes and switching switches.

For a module, it contains multiple elements, which may also contain components, such:

 

 

Both components and modules are designed to be reused. They can all be collectively referred to as components. The reason why they are divided into two categories is that the layers are clearer and their responsibilities are single and clear, easier management and maintenance.

Of course, not all parts of the UI are similar or identical. For example:

 

 

The two navigation modes have the same style, but using a general style may be more convenient than writing a component, which can reduce the data processing of a component.

2. component style

In the past, the biggest headache was the class name, but fortunately, Vue implemented the shadow DOM in its own way. Using the shadow DOM and BEM naming, we can use the style division of a single responsibility, so we no longer have to worry about how to name the class.

The advantage of using the BEM standard naming method is not mentioned here. You can use Baidu, but the disadvantage is that the class name may often have a long string, at this time, the use of shadow DOM can be a good solution to this problem.

The elements contained in all modules are nothing more than header, navicat, title, list, item, text ...... at the time of development, I wrote a specification. Which of the three parts of BEM are made up of? This basically satisfies all the modules, and there are a bunch of messy elements in the modules several times. The naming rules will be attached later.

The style of a single responsibility is mainly used to solve the problem of assembling components. In actual development, the UI is basically the same as it looks like several times, however, the uidesigner may also make some depressing diagrams, so that the component presentation and layout style are different, not to mention that the functional content is different.

At this time, in order to achieve better, simpler, and clearer la S, we will use some single-responsibility styles, such:

Just like the three figures, it is clearly the same thing that requires differentiation. If they are all written in one component, it is not impossible, but it is very troublesome, however, if we write a basic style for our components and add a class name with a single responsibility style directly, this is much more convenient. Of course, it is best to discuss with the UI students to maintain the consistency principle of the UI. Do not close your eyes and draw pictures in disorder.

Of course, the style in the same component must still be operated through prop, but in terms of external layout and display, We can reference the component, simply add the required class name. The specific code is not displayed here.

3. Engineering Structure

Let's just go. I really don't want to write it. I'm so anxious to go home.

　　

The less folder in the assets folder contains some single-function styles, such as in the layout. less file:

　　

/* Top margin */. mt30 {margin-top: 30px ;}. mt60 {margin-top: 60px;}/* right margin */. mr30 {margin-right: 30px ;}. mr70 {margin-right: 70px ;}. mr90 {margin-right: 90px;}/* bottom margin */. mb20 {margin-bottom: 20px;}/* left margin */. ml30 {margin-left: 30px ;}. ml40 {margin-left: 40px ;}. ml70 {margin-left: 70px ;}

In the components folder, it is clearer that widgets puts some public widgets, modules put in public modules, and pages are various pages.

The specifications will be posted the day after tomorrow... I went home first and couldn't sit down.