This is a self-summary of the blogger’s first project. Blogger rectified the front-end work time, if you want to include formal complete project flow, actually only last month has just completed projects in order to be a complete flow of the project, after a month of day and night to work overtime, I finally in project launched today, so the comparison at leisure, to do here, to share some of their project.

Actually bloggers had failed to complete access to a separate project before and after the end, from the project file, to the development, testing, deployment of online and so on a series of processes are relatively meng, who took to these has not been very understanding, can have such a complete project experience is to own a front the formal start of his career, Of course for each senior front end, the blogger is also very young, hope to get advice.

First of all, let’s briefly take a workflow of the front-end part of this project. The project is also based on Vue+ Element + AXIOS +vuex+ VUE-Router, which is separated from the front and back ends

  1. Front-end VUE project workflow:
  • As a front end after we get a prototype first simple analysis of the logical relationship between prototype page, and each button to jump page, for reusable page as individual components, in order to reuse, reduce code duplication, and code reuse is always the goal we pursue, bloggers every time I see repetitive code how see how not pleasing to the eye, In fact, in addition to the prototype drawing of the project, there should be a design draft, but this project is very urgent, so we just write the page against the prototype.
  • Analyze plug-ins and dependencies that may be used by the project, design the configuration of routing, development environment, test environment and production environment, etc. If you don’t know this at the beginning, you can add it later, but you’ll find that there are a lot of changes to be made later, so make sure you know what plug-ins, dependencies, and front-end configurations you need at the beginning.
  • For page development, pay attention to the adaptation of the screen resolution, so as to avoid different computer resolutions, resulting in layout chaos. Blogger is not that kind of experience, the head will page to write good, all wait for debugging late only to find that many page adapter resolution of the problem is too much, then one by one to change, very delay development efficiency, also considering the image zooming, etc., are all need special layout, or change the screen resolution, image will be stretched.
  • Don’t know what are the front end of the big company, our company is generally written pages later, have a backend to the integration of data to a page, so the theory, we finished the page, but the development has been completed, but for me, if front just write page, that is a waste of resources, why get front end separation? However, due to the tight development time of the project, there is no interface document. Generally, the data is integrated and displayed on the page according to the interface document provided by the backend. Without interface documentation, the blogger is in a secondary position, telling the peer at the back end how to request an interface.
  • When we get data from the background, we must write judgment to prevent the capture of errors without data, keep in mind that the blogger ate a great loss in this. Don’t assume that catching errors is something the back end does; the front end doesn’t need it. When our code or HTTP request is wrong, Jin cannot locate the error by displaying the error on the page, and the serious error directly leads to the program cannot run, which is not what we want to see. We need to catch the error, and it is better to make a prompt message, such as token expiration. Error caught by promise reject. Axios provides request and response interceptors. We can encapsulate an AXIos request, define interceptors in the request, and catch most HTTP request errors.
  • Each page is completed, the page jumps, buttons, and other functions for simple preliminary tests, lest appear some should not be a simple logic errors, don’t think finished just a matter of a page, page written is actually began, many simple logic errors are, we can try a try out blogger was taken for granted, always thought that should be ok, You didn’t even test the simple click button page jump by yourself. As a result, when you finally tested it, the test partner looked helplessly at the blogger and said how many bugs you had. Before working on a complete project, bloggers tend to skip testing, but now it turns out that an experienced front end still needs to undergo some testing, so bloggers are also considering learning some simple tests such as unit testing
  • After the previous series of tests, our project was finally launched, but when it was launched, we found that it took more than 30 seconds to open the home page. Ok, when we looked at the code, the problem came out again. The echarts ICONS used in the project were all introduced, but not all of them were actually used. So finally all changes for on-demand introduced the use of a few charts, a package again, so he suddenly lost more than 400 k, and then a look at the use of the images are 7800 k, asked about the company the front end of the great god, just know need to compress images, while a pixel was lost, but the size can even lose half (blogger project is not electricity, after all, For the image requirements are actually not very big), so again a compression, packaging and small hundreds of K, the server opened gzip, but also can be viewed normally.

The following is also my first time using VUE to write front-end project problems encountered by some of the experience of the students can directly skip.

  1. Vue knowledge points collection
  • The application of this keyword in VUE and when to use this, how to use this. Specific everybody can refer to a blog post that blogger writes before
  • Mounted () specifies that a component is created when the DOM element is not created, so do not manipulate the DOM element.
  • The window.open method opens a new page, which is invalid if opened in an asynchronous request. You need to assign to a variable and then open it with a method like.location.href = URL. When the blogger project needed to download the PDF, I got the data from the background and directly opened window.open. I didn’t think about it. Then I searched on the Internet and found such a saying, which was also a reminder to students who didn’t know.
  • Vue.nexttick () is used to manipulate the DOM after data changes. Vue performs DOM updates asynchronously. When data is modified, DOM updates are not performed immediately, but are queued. So to get the updated DOM to work with, you must perform a callback in the nextTick() method. This method is described in the VUE documentation API, but is not used much in the blogger project.
  1. Element pay attention to the collection of points
  • If the form’s item element needs validation, it needs to add a prop attribute, otherwise validation will not work. In addition, if it is a custom validation, the validation method is written in front of the data function, because the return directly returns the result. Note that the custom validation method is written in front of the data function, so the data returned by data cannot be used in the validation.
  • We use Element components. Sometimes we need to modify some of the styles, but we find it useless to assign classes to components directly. In this case, we can try using the new CSS syntax /deep/ to make styles work inside components. Of course, not all cases can, need to be determined according to the specific situation.