Front-end development: How to write a beautiful Vue

(Web front-end learning exchange group: 328058344 no small talk, not like!)

How to use it beautifully -Vue- Basics)How to use Vue basics beautifully

Software engineering, as a programmer, should be a skill to learn well. Examples such as “Code 2” and “Clean Programs” are definitely worth reading. Web front-end development, with its ease of entry (and high demand), has created a flood of quick fixes and unreadable code. If you can’t master it gradually, in the long run, it’s not all others who will be wronged (those who read your code), but you. To take a simple example, if you can’t learn to organize your code structure well, even if you have a master architect, once the project gets bigger, you will still face the pain of being trapped by yourself. In fact, there are many developers, failed to develop good coding literacy, such as variable method naming, can also make people tremble; It is obvious that this is an act of harming others and not benefiting oneself, and it must be done right.

Eslint is a great tool for teams to have; Since it is difficult to ensure that everyone is well-educated, it must be properly enforced; At least avoid clumping up some messy code to confuse the army. Of course, there are always some people who are uncomfortable at first, so the importance of playing with the editor again shows its value; This leads to the topic of automating (semi-) workflows, which will be explored in a later article.

Front-end basic technology, engaged in front-end development, long-term strategy, basic skills are very important; JavaScript in particular; This is also evident when writing Vue. Others such as Html, Css, needless to say; In addition, Scss and other preprocessors should also be learned and applied to improve development efficiency and save development costs. After all, only by saving enough time, can we do more optimization, save more energy and time, and thus form a good cycle.

Vue basics, this is very important, read up on [vue.js official tutorial], there is no better tutorial; According to previous experience, impatient is not hot tofu, owe will eventually return; At least initially, you need to read through it, otherwise you will not be able to locate the problem in time, which will undoubtedly waste more time. On top of that, find a good mini-project on Github and read it carefully to discover a lot of gameplay to learn.

Using Configuration Well, Chapter 18 of Code Book covers table-driven Methods, a must-read for programmers. In many cases, query tables are used to simplify logic and inheritance tree relationships. This is particularly valuable in the collaborative, modular development model; Configuration should be used well, so that modules are separated from each other, so that there is no strong dependence on each other, so that the development process can greatly avoid code conflicts. For example, if you know JavaScript features, you can write:

const files = require.context('.', true, /\.svg$/)
const modules = {}
files.keys().forEach((key) => {
  if (key === './index.js') return
  modules[key.replace(/(\.\/|\.svg)/g, '')] = files(key)
})
export default modules

Copy the code

In this way, you can write a convenient [Icon Component]. When you use it, you just need to add a new Svg to assets and then fill in the corresponding Svg name when referencing the Icon. With this and it, we can use this configuration to decompose and combine each module, it is very convenient.

Vue has three exciting features; The first is the bidirectional binding of its data, that is, linking View and Model through data binding, so that data changes are automatically mapped to View updates. The other is its data-driven component system, namely: A nested component tree is used to describe the user interface (while a component corresponds exactly to the ViewModel in MVVM). The third is the single-file component format based on the build tool, which provides a powerful Loader API to define the preprocessing logic for different file formats, thus allowing us to integrate CSS, templates, Even custom file formats are used as JavaScript modules, which greatly improves code reusability; Webpack also implements a number of advanced features based on loader, such as automatic block packaging and on-demand loading, automatic positioning of image resource references, base64 inline-based image size, module hot replacement at development time, and so on. Of course, Vue also has several other impressive designs.

In view of this, if you can master its data binding and transmission, component development, as well as surrounding Webpack and other related configurations, you can regard the application level as entering a new level. Historically, this is not an easy task, as Vue is used to solve needs, not research. Who’s to say that a driver on the road knows everything there is to know about a car? I believe that in the next very long time, it is necessary to learn, explore, and then use these aspects.

How to use Vue- combat components) How to use Vue- combat components

Vue features a nested component tree that describes the user interface. So component design and writing is critical; At the very least, it should be easy to modify and maintain, reusable and readable, poorly coupled, open to team development… … And so on. Once the project is complex, it is necessary to consider the design of the entire architecture in advance, so that it is clear and reasonable; Use of component caches, avoidance of spawning overweight components… . And Vue component system is driven by data, more to take into account data communication between various components, to avoid data by multiple operations, difficult to locate bugs and other problems.

This is a skill that has to be developed over time, not overnight. However, part of the content only need to deliberately pay attention to, that is, visible its effectiveness. For example, concise and obvious naming, good coding practices, and a unified coding style by the team to ensure code readability. Use design pattern principles, such as the single responsibility principle, to split the components into finer granularity, ensure the single function of the components, to improve the reuse of components; Another example is interface isolation principle, using stable server interface to separate the changing modules, so that components can be decoupled; In complex projects, redundancy and inheritance also need to be used. At this time, we also need to pay attention to the Richter substitution principle, dependency inversion principle… . It is also worth studying the optimizations provided by Vue itself, such as route lazy loading: With the asynchronous component of Vue and code splitting feature of Webpack, it is easy to realize lazy loading of routing components, which can only be loaded when the component is visited, so as to improve the efficiency of page loading. In addition, the server side is also used to realize first screen rendering and component caching, especially the data communication between components. This will be covered in a later section, but not here.

Js practice: How to use Vue2.0 to develop rich interactive WEB applications; Vue has many related points that are worth a glance. Also, if you are writing common components for your team, it is important to remember to include usage documentation. You see, in order to write good Vue(code), software design knowledge is indispensable, right? (Web front-end learning exchange group: 328058344 no small talk, not like!)

How to use Vue- how to use Vue-

Vue data binding was described earlier (Version 1.) in [Vue Data Binding of Various Types]. Although Vue has been upgraded to 2. Now, there are many changes in data binding, but the overall impact is not big, for example: fragment instances are no longer allowed; Mustache should be replaced with V-HTML; For details about changing the order of v-for traversal parameters, see Migrating from Vue 1.x. Here we discuss the transfer of data between VUE components.

After $dispatch() and $broadcast() are removed, Vue2 uses Prop (including v-model customization) to transmit parameters from parent components to child components. The transmission can only be one-way. Vue2 has removed the.once and.sync modifiers to prevent adverse effects on the parent component, and the child component needs to explicitly pass an event rather than rely on implicit bidirectional binding. If you attempt to modify the parent component data passed through props directly within the component, this is considered anti-pattern and raises the following error:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.

However, if the prop itself is passed by reference, such as an object or array, any binding method will be bidirectional due to the nature of the data type itself! These are explained in Vue documentation – One-way Data Flow; Look at this example:

Note here that Vue either listens for value changes of the base data type or for reference changes of the reference data type; Therefore, vUE encapsulates a set of methods (including $set and $remove) for arrays. If you change the contents of the reference type directly, even if the data has been modified, VUE will not be aware of it, so the view will not update. So the Vue is aware and drives view updates. One thing to add here: Vue implements watcher of data by converting data into getters/setters using Object.defineProperty (ES5 feature), which redraws the associated Dom when called to refresh the view.

Therefore, if you need to change the reference data passed to the parent component, you should modify the data after the deep copy. Note that the Object. Assign is not a deep copy, even if you use object.freeze () to freeze the data. For a child component to send parameters back to its parent, you can use $emit or, of course, callback Functon (see the Jsfiddle example). For communication between non-parent and child components, Vue provides Vuex to realize the same communication in the way of state sharing. For this point, we should pay attention to balance and consider from the perspective of overall design to ensure the necessity of introducing it. If the project is not too complex, you can design your own VUE-Bus to provide a global event center that can be used as easily as the built-in event stream. Of course, Vue also provides $refs, which can be called across layers or something like this.$parent.$parent; Provided does not mean recommended; Use as little as possible, unless you have to, or prank someone. Of course, you can also use native Api sessionStorage, localStorage and so on for data storage, in order to reach the purpose of communication; For both gains and losses, it is good to strive for flat unified communication. In view of space, I will not repeat it.

How to use -Vue- WebpackHow to use Vue Webpack beautifully

As mentioned above, vue-CLI is recommended, which has helped us to configure Webpack. When writing the Router configuration, it is easy to implement lazy loading of routing components, allowing the project to be split into several JS packages and a slightly larger vendor to be loaded on demand at run time. That is, we can configure routing components as follows (of course, we can also block components) :

import Frame from './.. /views/Frame' export default { path: '/', component: Frame, children: [{ path: '/nicelinks', meta: { title: SetTitleLang ('./../views/Nicelinks'], component: resolve => require(['./../views/Nicelinks'])}]}Copy the code

In addition to this, there are still a lot of things that need to be optimized in the Webpack area to shorten the build time of packages, improve their size, etc. For example, the ColdLLreferencePlugin extracts the files that are commonly used and seldom changed and inserts them into another unified file (vendor.dlL. js), and the external chain is introduced with script. There are many online tutorials, so I won’t repeat them.

The latest vuE-CLI also helps with the injection of the [WebPack-bundle-Analyzer] plug-in (webpack plug-in and CLI utility), which can bundle content into an intuitive tree for easy interaction. Give you an idea of what you’re really introducing into the package you’re building; We can use her to figure out what modules it’s made of in general, find the wrong ones, and then optimize it. We can easily run her (NPM run analyz) by injecting the following command in package.json, which opens http://127.0.0.1:8888 by default for display.

Analyz: NODE_ENV=production NpM_config_report =true NPM run build

With the introduction of the DllReferencePlugin, webpack-bundle-Analyzer presumably adds vue to webpack.dll.conf.js; For example, the following configuration is performed:

entry: {
   vendor: [
     'lodash',
     'superagent',
     'vue',
     'vue-router',
     'vue-i18n'
     'vuex'
   ]
 }

Copy the code

When you use Webpack-bundle-Analyzer to analyze, you will find that vue.com common.js, a Parse Size of 71 KB, will appear in vendor.xxx.js. Isn’t it supposed to be typed into vendor.dlL. js? In order to ensure the integrity of this article, we have to mention that after the 2.2 update of VUe2, there are 8 files, respectively:

vue.common.js

vue.esm.js

vue.js

vue.min.js

vue.runtime.common.js

vue.runtime.esm.js

vue.runtime.js

vue.runtime.min.js

This is the difference between each file in the Vue2 dist directory, you can browse. In addition, the vue article clarifies the difference between the two when build-vs-runtime builds independently; This vue.common.js belongs to a standalone build, while the default NPM package exports run-time builds. To use a standalone build (template support), add the following aliases to the WebPack configuration:

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}
Copy the code

So in webpack. DLL. Conf. Vue js equipped with cash and lead to vendor. XXX. In js vue.com mon. Js, could be explained: The vUE package configuration in DLL differs from that introduced in Resolve, which defaults to a runtime build. This problem can be solved if it is guaranteed to be consistent. This has been tested and results in the following data (resolve configured as above) :

1. Vendor.xx. js 611KB, vendor.dll. Js 180 KB;
2. Vendor.xx. js 540KB vendor.dll. Js 207 KB; vendor.dll.

Vendor.xx. js +71 KB, which is exactly the Parse Size of vue.common.js; Vendor.dll. js differs by -27KB, which is the size of the run-time build. If you open the generated vendor-manifest.json, you will also find that the vUe-related references are:

/node_modules/vue/dist/vue.common.js ./node_modules/vue/dist/vue.runtime.common.js

How to use Vue workflow beautifully

“Light skill does not represent martial skill, but speed determines the distance between you and me.” — Baifeng (The Bright moon of qin Dynasty). Intelligent, automation trend is more and more obvious, as a programmer, if not as soon as possible to adapt, its predicament can be imagined. In the near future, blue-collar code workers are bound to be struggling in the tide of technology; Therefore, practitioners are more required to quickly and steadily solve the needs, while keeping the knowledge and skills updated. This is naturally the decisive role of business skills, but if there is a good workflow mechanism, is bound to icing on the cake. And this topic, the dots, lines and planes involved, can not be summed up in a word; This will continue to change and update in gradual learning and exploration. But at least one current rule is: semi-automated, if not fully automated. (Web front-end learning exchange group: 328058344 no small talk, not like!)

Many friends use Hexo to build their blogs; Hexo is a Node.js based product that makes it easy to publish blog posts; You just need hexo clean,hexo G,hexo D; Article data one more, a set of down, also have 20s+; If you know anything about NPM, add point names to package.js, such as this.

"scripts": {
  "start": "sudo hexo clean && sudo hexo g && sudo gulp && sudo hexo d"
}
Copy the code

Then simply run NPM start, which reduces the time consumption to 2s. The savings are small, but an order of magnitude improvement, and the cost is small and permanent. So it is necessary to this, with trifling meager experience slightly make elaboration, throw brick in order to lead big jade.

• Vue-cli although powerful, but after all as a basic public, not complex. There should be scaffolding of your own (team), when ready to start a new project, just run the scaffolding to initialize the whole project, not copy it a little bit, then reconfigure it all, import routes, inject Bootstrap… . The same project should also have a library of templates that can be generated with one click, or an automated Json parsing mechanism.

• Before beginning to write code, must with background ER, predetermined interface, parameters and return data; And make it easy to retrieve and test the visual API documentation. Nothing is more important (if the project is over a month/person). There are plenty of open source tools like Swagger-UI.

• When writing code, think before you write. When writing, make sure the editing tools are sharp, such as retrieving syntax errors, complete opening and closing tags, automatically formatting and beautifying code to conform to convention Eslint requirements, and keep your code clean and concise; Imagine if your desk was covered with fly ink all day.

• Vue-cli has been configured with agents, there is no need to worry about local debugging cross-domain issues; However, how to quickly submit effective code, you need to equip yourself. Whether it’s a command line or a SourceTree visualization tool, it’s easy and quick. You should also use the pre-commit tool to perform verification before commit to prevent illegal commit and affect teammates.

• I have experienced the miserable process of manual testing of VARIOUS APK and the difficult process of manual build release. I still feel sad when I think about it. Therefore, monitor the changes of warehouse code, automatic construction, this is a necessary good product in home life. I’ve also experienced a variety of bizarre ways to close bugs, and I confess that doing so takes more time than solving the so-called Bug. However, all of these were just the criticism of the team’s short-sighted knowledge at that time. Now, with Jenkins and GitLab, the team has no such pain and touching anymore.

• What does it mean to write beautiful Vue? Not only is the code beautiful, but it’s also efficient and resource saving. Data-driven Vue is efficient in and of itself; But not all code written in C is more efficient than JavaScript, and that’s a variable that depends on who writes it. Therefore, in addition to Code Review Code, there must also be a proven comprehensive analysis method. To ensure that code is loaded on demand, Css is properly written & referenced, and so on.

• What does it mean to write beautiful Vue? Also lies in its reliability, stability, and these are ultimately reflected in the product; Therefore, a good product must not only be equipped with access, behavior analysis, event burying points, but also error reporting. In the past, we used to use the simple book as a product of reading and writing, but now it is not only full of chicken soup and grumpy headlines, but also full of bugs, especially on the Web page (Mac Mini, Pc), there is no feedback, it is terrible to see; What is? Assume they are not using a sentry-like product tool.

• A back-end technology; Don’t understand the back-end of the front end is not a good designer; This seems to be a joke, but actually quite reasonable. In today’s popular model of separate front-end and back-end development, it is easier and more efficient to work with each other if both sides of the business understand each other’s technology. And more often, and for some needs, front-end write background, is also common; For the individual is also good, art is not pressure body. Recently, I have been writing some personal products. If I look for background development assistance, I will have no less trouble than learning how to write the back-end. And it’s not a long-term solution. Even if none of these, to solve Vue SEO and improve rendering speed, do Vue SSR related, but also need to understand some background technology.

• Design related; This design, not only includes code structure, level, interface design, for the front-end practitioner, must also include page correlation; For example, the personal product under development: Qing Cheng Chain (English name: NICE LINKS), due to the lack of design aesthetics, it can be said that it is difficult to initially shape the general application, but from the visual effect, always feel so bad, still waiting for exhaustion in the hard thinking. Even if there is no similar requirement, the page has already been drawn by the designer. If you want to restore it perfectly, the quality related to design is also indispensable. After all, it’s up to front-end developers like me to see what the product looks like to the user.

Write the epilogue at the end

“You have to be a programmer first, then a front-end programmer” makes a lot of sense and will become more obvious over time. Therefore, the purpose of this paper is not only to study and apply Vue, but also to share some development experience, programming experience and product user experience of current writing front-end with the current popular framework Vue as an entry point. Obviously, this is just the tip of the iceberg. And the front end development is so, thriving, it is difficult to cover everything. Only by adhering to the mentality of continuous learning, embracing changes and facing the future, can we not be left further behind in the turbulent tide. Talking about here, it is necessary to share, has recently been collecting updated tutorial] [updated version front-end resources, its focus on collecting outstanding nowadays and future technologies, and tools, optimization and testing, security, and so on essence of chapters, aims to study for the front-end, skills upgrading, such as field of vision extension, information search a convenient; Interested friends, you can pay attention to understand, or further, to assist supplement & correction, so that it can serve more people.