Vue Webpack scaffolding template out of the box

This is a scaffolding project for developing a single page Web application; We use Vue as the development framework, Webpack as the construction tool, and Element-UI as the UI component library. Vue-router, VUEX, vuE-I18N are also injected to support single page applications, complex state management, and multi-language Settings. In addition, it relies on loDash, DayJS, JS-cookie and other development tool libraries to improve page development efficiency. Of course, in the actual project, you can remove or modify freely according to actual needs. Two demo pages are provided in this project that you can view online.

How to use this scaffold template, such as prerequisites, usage, and demo, is explained in the README and will not be covered here. This scaffolding template was built on vue-CLI when vue-CLI was 2.*; Another is that projects can be used out of the box, such as VUex, ESLint, etc., are introduced by default (the benefits are: clear and complete project Settings; If multiple languages are not required, subtraction can be done on this basis by removing VUE-I18N and related codes; Second, there is no need to write extra code to allow users to selectively introduce dependencies, saving effort and doing more valuable things. Third, this is also a tao advocate, like ESLint, pre-commit, etc. are excellent for team projects, and should be introduced by default); So the entire directory structure looks like this:

├ ─ ─ LICENSE -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- project LICENSE (MIT LICENSE) file ├ ─ ─ build -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to store the project build documentation ├ ─ ─ the config -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - To store the project build relevant configuration file ├ ─ ─ dist -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to store the project build output file after ├ ─ ─ index. The ejs -- -- -- -- -- -- -- -- -- -- -- -- -- project initiation document (/ index. HTML) ├ ─ ─ Package - lock. Json - recording NPM modify depend on lock file ├ ─ ─ package. The json -- -- -- -- -- -- -- -- -- -- the NPM package. The json processing details ├ ─ ─ the SRC -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- Project application main code │ ├ ─ ─ App. Vue -- -- -- -- -- -- -- -- -- -- - the application's main component │ ├ ─ ─ assets -- -- -- -- -- -- -- -- -- -- -- -- storage resources: Style, images, fonts │ ├ ─ ─ components -- -- -- -- -- -- -- -- project custom common components │ ├ ─ ─ constants -- -- -- -- -- -- -- -- -- project public normally on custom │ ├ ─ ─ filters. The js -- -- -- -- -- -- -- -- project custom vue Filter instructions │ ├ ─ ─ global. Js -- -- -- -- -- -- -- -- - to help share the mian. Js work │ ├ ─ ─ helper -- -- -- -- -- -- -- -- -- -- -- -- project custom auxiliary various tools │ ├ ─ ─ locales -- -- -- -- -- -- -- -- -- -- - Deposit (public) multilingual configuration │ ├ ─ ─ main. Js -- -- -- -- -- -- -- -- -- -- - the population of project code file │ ├ ─ ─ mixins -- -- -- -- -- -- -- -- -- -- -- -- to deposit a mixin code related │ ├ ─ ─ the router -- -- -- -- -- -- -- -- -- -- -- -- storage & To handle the related routing │ ├ ─ ─ store -- -- -- -- -- -- -- -- -- -- -- -- -- storage & handling Vuex related │ └ ─ ─ views -- -- -- -- -- -- -- -- -- -- -- -- -- storage project page code ├ ─ ─ the static -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - static Assets (not webpack processing) ├ ─ ─ the test -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- project of all kinds of test related └ ─ ─ yarn. The lock -- -- -- -- -- -- -- -- -- -- -- -- -- lock file record with yarn modified to rely onCopy the code

This is critical for code design and writing; Because: Code is written to people first, then to machines. When designing your code, it’s worth the time and effort to make it readable. However, asking everyone to voluntarily maintain a uniform code style is no less difficult than trying to achieve greatness on their own. So ESLint is a dependency and definitely a must for team projects; Inject it into Git’s pre-commit hook to enforce a uniform code style. At this time, there is the possibility of eternal transmission. The same is true for code submissions. It’s not a good habit to submit meaningless messages in the hope of a quick fix. Because when you look back, you’ll realize that everything that went wrong happened at the right time. Fortunately, for these tasks, this scaffolding has been done for you; Of course, you can adjust it to your team’s overall preferences.

Here is an ancient example of handling Http requests; It may seem extreme and even weird, but it’s still a common play (using the current popular MVVM framework; Even Query.Ajax supports chained calls); However, there are some hardworking developers who take the trouble to write similar code, which is fine in itself; But when handed over to someone else to maintain, or to read, it can cause harm.

$.ajax({ type: "GET", url: "xxx/getYyyContent", data: { username: $("#username").val() }, dataType: "json", success: function (data) { const textContent = data.data.textContent $('#text-content').html(textContent) }, error: Function (error) {// Do something to handle error}, complete: function (error) {// Do something to handle error});Copy the code

Avenue to simple, excellent development process, must be easy to write and maintain! This scaffold references the class libraries AXIos and Q, and encapsulates them simply to handle Http request correlation; Enable it to support chain calls, and at the same time, unified processing of returned data, simplify returned content, so that the final result can be obtained as simple as possible, see Helper /ajax.js. In addition, it is recommended that developers store interfaces in a unified folder based on functional module planning, such as Helper /apis; So clear, easy to call, and for multi-person collaborative development, and do not respond to each other, reduce unnecessary conflicts. Similar to the good use of configuration, table driven method of programming, should live to learn and use, throughout; For a more detailed description, see The Basics of Using Vue beautifully. If Http requests are handled this way, they can be modified to look like this as shown in the annoying example above:

const params = { username: this.form.username } this.$apis.xxx.getYyyContent(params).then(result => { this.textContent = result.textContent }).catch(error => {// Do something to handle error}).fin(() => {// Do additional processing whether the request succeeds or fails})Copy the code

One of the highlights of the scaffolding is that it keeps updating and optimizing the mainstream dependency libraries, such as Webpack, Element-UI, etc. Using WebPack to build Web applications, how to make it present a good build speed, optimize the package volume/file number after the build, improve its running efficiency, is every front-end developer should know. In this respect, also made a lot of learning and trying, and some experience recorded in: Webpack packaging optimization volume & Webpack packaging optimization speed. For its configuration scheme, see Vue Webpack Config; Of course, welcome to put forward your valuable suggestions to help further improve it. Also worth mentioning is the balance between the size of the build package and the number of files: avoid packages that are too large or too small; Webpack also provides plugins to help with this, such as LimitChunkCountPlugin and MinChunkSizePlugin. In view of the HTTP working mechanism, it is a good choice to build js files as few as possible, but not large (100KB ~ 500KB) on the basis of not destroying the on-demand loading. Of course, this refers to the situation that the server is enabled with GIP compression; If the front end is responsible for turning on gzip compression, the upper limit should be lower. In addition, considering optimization of projects over HTTP/2 is another dimension of the solution, which is not discussed here.

As you know, NPM (yarn also) allows you to define script commands using the scripts field in package.json files. It supports wildcards, variables, hooks, external arguments, concurrent & asynchronous execution, and more. Therefore, you can use NPM Script to create your own efficient workflow. In this scaffolding, the default is simply to provide simple commands that you can use in your own scripts in conjunction with your favorite tools, such as gulp, bash, and so on, to shape your own efficient workflow. The following is a brief description of the default commands:

• Improve unit test correlation; At the code level, good unit testing helps to improve the quality of the code, so that the project quality and subsequent maintenance can be better. Consider updating this section with reference to Vue Test Utils in a later release.
• SEO optimization related; This is a question that should be considered by all sides; But at the project design level, it can be consideredServer side renderingTo greatly improve SEO; However, this involves more adjustments than other solutions for projects that are already in the development stage.”A Chain of Cities | NICE LINKS”Is based onprerenderIn thenginxLayer, pre-render for the browser to optimize SEO, now looks ok. The alternative isPrerender SPA PluginIn theWebpackPrerender static HTML content when building a project. A compromise will be considered for this area in future releases.

• How to write a beautiful Vue
• Webpack package optimization for speed
• Webpack package optimized volume section
• Npm VS Yarn Memo sheet
• “Lead” the most complete front-end resource collection
• Updated version of the front-end resources tutorial
• The grass at night – Front notes
• Replacement of the Experienced front end “Posture” (I)
• Wall crack recommended article collection