This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

This paper was written at the end of May 2018 and completed and implemented in September 2018. The author in writing this article also don’t know how the vue cli3, previous versions of the vue configuration items are relatively complicated, in August to see cli3 officially released on an article, solved the most of the problems in the plan, then just feel the time is right, the official in the team to implement the new architecture, was considered by the architectural design content here.

Technology stack and background

The overall reference is VUE-CLI, and some adjustments are made according to the actual situation. The NPM repository needs to point to the enterprise-class package manager for convenient management and personalization.

The plan is to adopt multi-SPA mode (multiple single-page applications), the internal flow function adopts page-level routing, module differentiation, popup page and other small functions to separate each page. In view of the current deployment mode, SSR (server rendering) is not used, and static pages are packaged and deployed independently

Better user experience, the first screen load – frame screen (low priority, need to set aside the breakthrough point in order to increase subsequent) first screen loads considered each page automatically generated skeleton screen (refer to hungry yao luo meng ideas) automatic generation H5 skeleton pages 】 【 greatly improve the experience, the internal data loading also USES the transition animation turned around, and so on

  • Build tools: nPm-scripts this is more commonly used, need to study NPM automatic build build local NPM server

  • Packaging tools: Webpack, learning configuration, multi-SPA simultaneous reuse of common resources

  • Higher version JS compatibility: Babel (more in-depth standardized code style tinkering in the middle of the conversion process? From Wang Luofei, need to study the principle of Babel, can be added later)

  • Browser support: Browserslist

  • CSS: Copy vUE – CLI, support for PostCSS, CSS Modules and pre-processors including Sass, Less and Stylus.

  • Unified code style: ESLint

  • The development environment application Server is used to specify the static file directory and the Proxy Server. The Proxy Server follows the VuE-CLI Dev Server Proxy

  • Development framework VUE, low learning cost, quick start

  • Style writing using less, has accumulated technology, do not have to learn again

  • Avoid reinventing the wheel – Plans to introduce Element, which also provides product design tools that may need to be accessed by SASS to modify its style for the company UI specification

  • Data interaction, using AXIos instead of $. Ajax

  • Consider not introducing additional toolkits and working with es 6\7\8…. using native methods

  • Consider using an SVG icon library instead of an icon font?

  • Test automation solutions (not implemented), open the recording mode after recording the test script automatically according to the user action, and can monitor the status, the complete rollback, pay treasure to reference bosses zhen-yu hou www.cnblogs.com/sskyy/p/700…

Status quo and proposed solutions

  • Public Resources section

  • General components – The current situation is multiple branches and multiple projects, while the basic elements are roughly the same, most of the general components are the same but distributed in each project, each time there is a problem, need to modify multiple places, easy to miss, resulting in the same problem repeatedly. The proposed solution is to separate the common part into a common component library, use the company’s local server NPM package management, and add key/ version numbers to deal with components in each project

  • While the common style has most of the same basic elements, depending on the specific situation of the project, the color style may be different, but there are also some personalized style sheets to adopt the solution: the common style set (with global variable definition, style definition, and interfuse, etc.); Project-independent parts: 2 files personalized according to the project (theme color variable definition, personalized style sheet). Also with NPM management, components depend on style (can NPM introduce different less depending on parameter control?).

  • Most of the common methods are the same, but many of them are personalized. The solution is to use NPM package management to handle the global common method. There is also a common method and network request filter interception in the project, which is convenient for unified processing.

  • Page section

  • Subcontracting by module – currently manage pages according to module subcontracting, used in many places, reserved. Vue recommends that SPA needs to modify its original configuration to adopt the following solution: Pages /{module-name}/{page-name}/main.js + app.vue + components, components

  • Template page reuse – Vue uses template pages and loader is used for subsequent rendering, so most of the template pages may be the same, and the title in multiple SPA needs to be changed. The proposed solution is as follows: Index. HTML reuse, use html-webpack-plugin, use webpack to write multiple entry configuration variables into each file to replace the title. The resources

  • Page template – Due to the overall style of most pages similar, the current use of EJS include to public header, foot, menu navigation and introduced into each page, each new page layout has to be copied, most of the work is repeated and unreliable proposed solution: 1. Access PUG (JADE) template language inheriting layout (advantages: simpler writing and convenient template definition; 2. Use mixins or extends components (Advantages: Vue native support; Disadvantages: style conflicts, contamination issues, component nesting, internal value passing) puG recommended, needs to be discussed

  • Ajax request interception – currently using $. Ajax to implement this solution to facilitate the common processing of requests proposed solution: need to investigate how axios implementation, life cycle? Add events?

  • packaging

  • Static resources section – now is according to page need different libraries, reference images and their respective reference, overall uncompressed and merged, since each package path are the same reference resources, problems because of the cache to be updated in real time, and the other page once loaded too many resources, poor performance Proposed solution: streamline js library, make full use of native js advantage; Use Webpack to compress the common resources into a public directory, named by the file hash value when packaging, to solve the cache problem; Page-level resource JS/CSS files are merged and compressed into the corresponding directory of the page; Local images are considered automatically merged into Sprite images

  • Component part – the current use of KO components is in the packaging of the page through the HTML to find the component definition, from the component library reference corresponding components packaged into JS and CSS in the page reference, on demand reference ideas, need to retain the proposed solution: from the component library on demand to introduce the required components of the module, Webpack automatic processing

  • Parameter transfer in the process of packaging – currently using EJS template can be in the process of parameter transfer, convenient for special processing, need to retain the proposed solution: need to study webpack parameter transfer value, Web application server implementation process, add parameter transfer value, PUG template parameter transfer value??

  • Packet sending on the mobile terminal – Currently, the package is compressed and uploaded to FTP by itself. This is cumbersome and error-prone. The solution is as follows: Try automatic compression and upload the package to the corresponding test server according to the configuration. Means of implementation need to be investigated?

  • Which pages to pack – currently controlled by array configuration items, it is recommended to retain the proposed solution: Webpack multiple pages and add multiple entries. Automatic packaging by file directory? Generate corresponding entries according to the configuration items to package (recommended)? Need to investigate

Development requirements

Sort out the basic requirements of hands-on development under this framework, learn cost planning (what level of staff, how much time, what can be done), learning route planning (gradually form the learning route of hands-on projects under this framework, consider the game entry, task 1, 2, 3… Specify project review criteria and suggested time to facilitate ability assessment)

  • Basic requirements – Business development

  • Js CSS HTML programming basics

  • Vuejs usage, and component development

  • Less use of

  • Pug Use Cancels puG use

  • NPM command base

  • Advanced requirements – Basic component development

  • Deep understanding of JS, performance, robustness

  • Understand component planning ideas, general purpose, reduced configuration, lightweight or heavy application for special situations…

  • NPM package management

target

List the goals you want to achieve when planning for later review

  • Maven, similar to JAVA, builds the internal NPM repository, speeds up the download of external packages, and makes the public part into NPM packages to facilitate internal resource management
  • Build a common resource library (style, component, common method package) and publish it to the Intranet NPM repository. The development environment points the NPM repository to the Intranet repository. It can directly use commands to upgrade packages, refer to products and UI designers’ opinions, standardize the basic style library, standardize the functional component library, and organize the common tool method library according to previous experience
  • Further refine the coding specification to form ESLint configurations based on this and standardize the code style
  • Build appropriate automated construction tools, automated construction infrastructure
  • The ability to use PUG templates and VUE components for easy and flexible handling of reusable elements, basically eliminating code copy
  • Use less+ PUG templates to change interface styles at a low costCancel puG
  • Form a gentle learning route planning, after completing all learning tasks, you can start the project, liberate the initial work with people, reduce the learning threshold. (Experiment) Give corresponding score according to task completion (automated test scheme? System scoring), using the way of gamification scoring to carry out performance appraisal
  • Further improve the development efficiency, reduce the cost of learning, to achieve some front-end foundation of the new, can be unaccompanied, half a month to a month to start business development
  • Better front-end performance, reduced load time, smooth transition animation, (late) skeleton screen
  • (Later) automated testing

Tasks that need to be done

  • – useverdaccioSet up internal NPM repository – Access address is set uphttp://192.168.0.11:4873
  • – use.npmrcConfigure the NPM repository location to get resources and updates directly from the local repository — verified to be available, and built in the project root directory.npmrcFile registry=http://192.168.0.11:4873
  • – Study nPM-scripts, VUE-CLI automated build solutions, customized configurations
  • – Organize the third-party libraries needed to form package.json,
  • – Collates ESLint configurations according to internal coding specifications
  • – Build base components, style library projects, upload to local NPM, try to pull updates from outside, try to use built components in projects 
    • Component planning and component construction. 2. Component version management. 3. Component pulling version or dynamic configuration corresponding to different projects according to the incoming parametersCopy the code
  • – Organize the directory structure and configuration items for service development, set up the development environment (VUE + PUG +less+ Webpack) as planned, determine the development mode, package it into a static page, deploy it to the server for access, and determine the feasibility
  • – Develop cli or Webstrom plug-ins to automatically generate basic files based on the planned directory structure
  • – Form a set of automated build tools based on vuE-CLI and the tidy development environment
  • – Use automated build projects to get started quickly (SVN only needs to save SRC directory and configuration items generated by automatic build, node-modules do not need to submit, so it is convenient to update resources)
  • – sort out the learning curve of development mode, get started with the early foundation and learning materials of development, and set up some challenging tasks to complete projects 1,2,3 from easy to difficult… Quick start
  • – (planning) To replace better tripartite library, rich text (support MD?) , document player, file upload…
  • – (Planning) Automatically generates the skeleton screen scheme
  • – (planning) Automated test solutions, event driven?
  • – (planning) CDN?
  • – (Planning) SPA program support
  • – (Planning) SSR program support
  • – open source project architecture and automated build tools
  • -…