Project introduction

Why foundation? First of all, I think I can really compare the basic digging friends, second, I think there is a lot of room for improvement.

Why system? This is because it is a coherent set of projects, divided into style libraries, scaffolding, component libraries, editor extensions, generated templates, and code repositories. Six separate projects make up the infrastructure we use today.

Why process? Because these projects have seen me grow. The project was developed in different time periods, and it was supplemented continuously for about a year before and after, reaching the point that it was basically sufficient (it is better to say that I had not been upgraded). In the early stage, I was basically responsible for the main development, and in the later stage, I was responsible for the basic maintenance.

Because it is for the company’s internal project services, so part of our unique system structure, also do not involve internal unique code.

Project background

This paragraph is more nonsense, I need to say from the beginning of my entry, is also a review of my work experience.

When I came here, it was Xiao Guan Xi who came in, not because Internet companies were doing online processes for their traditional businesses. At the beginning, I also cut my own image and didn’t have much contact with new technology. When I first came to the company, I used c# to write pages, and I started to write pages and bind data in vs. Most of the company’s systems are background management systems, so there is no need to write styles.

The second paragraph: after working for about half a year, the department manager decided to use the model of separating front end and back end. One is that complex projects are too troublesome to write, and the other is that the development progress is really slow. Since no one in the department knew the three frameworks at that time, I chose a relatively simple Vue framework. Then, WHEN I had time to read the documents, I studied by myself and found an experienced person to write. However, I left the company for some reasons in a few months (I am also a good friend now).

The next step is to maintain the old project while writing the new one in Vue. There is no design structure, no common components, no structure specification, just arbitrary writing, the business is very complex, the project depends on chaos, hot update that is almost a region.

The fourth paragraph: their work and weekends to query all kinds of information learning, learning excellent solutions. Writing basic components, design structures, and definition specifications while understanding the underlying business and finding common ground and patterns. The final result is also very satisfactory. The infrastructure is there, the specifications are there, the templates are there, and the development is much clearer and easier. At the beginning, only our department used this structure. Due to the structural adjustment and direction adjustment of the company, the business increased greatly, and our current scheme was naturally put forward. Finally, the background system of the whole company unified the technology stack, and the communication and connection were much more convenient. This set of standards can be said to improve the efficiency of a lot of people, so they are recognized by a lot of people.

Practice process

Base style library

Basically is the reference theme-chalk source code to write, also uses its internal functions.

These naming conventions and tools are also learned after reading the source code, all templates of the same style with a set of style library will not be re-written to improve development efficiency.

  1. BEM and OOCSS naming ideas are selected in naming conventions. BEM is used to style components and make it easy to tease out the structure. OOCSS mainly writes common classes such as color, layout, text, and spacing classes.

  2. Preprocessing it is convenient to use Scss to do some loops and common variables.

  3. There are no special requirements for compiling using the simplest Gulp, plus plugins such as Autoprefixer and clean-CSS.

  4. The style library starts with ie8 compatibility processing, which is gracefully degraded.

  5. Finally published to the CDN external introduction of the way to use, other special needs in their own system to do.

More common two paragraph style writing method

@include b(panel) {
  box-sizing: border-box;
  // ...
  @include when(not-shadow) {
    box-shadow: none;
  }
  @include e(main) {
    display: table;
    // ...
    @include when(not-border) {
      border-right: none; }}}.ie-8 {
  @include b(panel) {
    border: 1px solid #dddddd;
    &__main {
      border-bottom: 1px solid #dddddd; }}}Copy the code
@for $i from 12 through 60 {
  .lh-# {$i} {
    line-height: $i * 1px ! important; }}@for $i from 12 through 40 {
  .fz-# {$i} {
    font-size: $i * 1px ! important; }}Copy the code

Foundation scaffold

Scaffolding is more like a template extracted from the beginning to keep the configuration and dependencies consistent for each project (real scaffolding was not written before), from which new projects are created.

A long time ago, vue-CLI 2.x was not upgraded either. This main definition code specification configuration, template configuration does some other configuration. Learn the detailed structure of the CLI, as well as webpack configuration.

  1. In order to solve the problem of too large a set of projects, use cross-env NODE_TYPE= XXXXX to solve the problem.

  2. To solve the problem of slow asynchronous routing, dynamic-import-node is enabled in development mode.

  3. To solve the problem of memory overflow, configure the increase-memory-limit command.

  4. Because the template of the background system is a routine to define the structure, generate a default template.

Base Component library

In the past, the theme of training was basically as follows.

  1. Unified resource management.
  2. Unified layout management.
  3. Unified development ideas.
  4. Relatively friendly to the development of unfamiliar layouts.
  5. Reduce style errors caused by layout errors.
  6. Maximize the use of loaded resources and minimize the load of resources.
  7. Maximize component commonality and minimize impact between plates.

First of all, it is not a pure component library that contains some business presence. First of all, we explain the characteristics of the background management system layout of the three-stage left, middle and right. What we have achieved is that people can coordinate freely across departments, develop and write front-end with back-end staff, and fully understand the structure of unfamiliar business.

  1. With vuEX built in, it is necessary to store standard fields of user information, data of a list currently selected, etc.

  2. Built-in filter, this kind of more extensive, picture cutting, text interception, unified dictionary class conversion, etc.

  3. Built-in Directive, calculating height of scrollbars, prompts, etc.

  4. Built-in function, communication protocol between systems, etc.

  5. Built-in interceptors, uniform loading, uniform error message, etc.

  6. Built-in utils, time conversion, data manipulation, string manipulation, storage, validation, etc.

  7. The built-in components, ElementUI, are still functional components, and the layout can’t be implemented by itself.

  8. Upload components, our pictures are uploaded to Ali Cloud, the front desk upload also need to carry out authentication and other operations, encapsulation in internal use only need to pass configuration on the line.

  9. For example, there are image previews, specific radio, multiple selection, switching and so on. They are basically small functions but the specific ones that are more difficult to deal with are basically packaged by project.

  10. Finally, documentation and examples are indispensable.

Editor plug-in

Since there are internal components, editor hints are also necessary. Code hints are based on Vetur. You can develop custom component data custom component data. See the document for details, and post a few effects below.

Component and property hints

Configuration file structure

Generate template

Because components are split according to certain standard rules, the advantage of having more standards is that there are rules to follow. The main functions, automatic file creation, automatic creation of the default module, custom create components and routing configuration, the creation of the basic template is actually said in front of that set. The main idea is to concatenate the string and output the file.

The following is incomplete code, which basically reads the configuration file -> reads the template file -> passes the configuration into the template -> returns the rendered string -> writes the file.

const fs = require("fs");
const path = require("path");
const config = require(".. /index.config");
const copy = require(".. /config/copy");

let fileDataPath = path.resolve(config.entry, "Resources");
let mkdirPath = path.resolve(config.output, "Resources");

let fileDataRoute = require(".. /template/Resources/Router/index");
let fileDataItemFn = require(".. /template/Resources/Router/item");

fs.mkdir(mkdirPath, err= > {
  copy(path.resolve(fileDataPath, "Api"), path.resolve(mkdirPath, "Api"));
  copy(path.resolve(fileDataPath, "Static"), path.resolve(mkdirPath, "Static"));
  copy(path.resolve(fileDataPath, "Store"), path.resolve(mkdirPath, "Store"));
  fs.mkdir(path.resolve(mkdirPath, "Router"), err= > {
    fs.writeFile(mkdirPath + "/Router/index.js", fileDataRoute, err= > {});
    config.data.center.forEach(item= > {
      if(item.en ! = ="state") {
        fs.writeFile(mkdirPath + `/Router/${item.en}.js`, fileDataItemFn(item), err= >{}); }}); }); });Copy the code

Because the module name is Chinese, but the establishment of the module name needs English, in order to facilitate the direct call Baidu translation interface translation. Chinese is still shown as a file and route name. Finally, we reached a consensus that whether it was generated or handwritten, just look at the route and know where the file was, just copy the route address and search for the file name.

// Request translation
request.get(parmas(_allCn), (error, response, body) = > {
  let fanyicallback = function(res) {
    let result = res.trans_result[0];
    let cn = result.src.split("/");
    let en = result.dst.split("/");
    let obj = new Object(a); cn.forEach((item, index) = > {
      obj[item] = en[index].toLocaleLowerCase().replace(/ /gim."");
    });
    // console.log(obj)
    translate(obj);
  };
  eval(body);
});

// Handle Chinese translation of source data
let translate = function(value) {
  for (let item of config.data.center) {
    if (item.en === "example") {
      item.en = value[item.cn];
    }
    if (item.module) {
      for (let ite of item.module) {
        if (ite.en === "example") {
          ite.en = value[ite.cn];
        }
        if (ite.module) {
          for (let it of ite.module) {
            if (it.en === "example") { it.en = value[it.cn]; }}}}}}};Copy the code

Where you can upgrade, especially if you have standard templates, you can visually drag and drop the requirements template, and then you can generate the files once the requirements are aligned.

Code warehouse

According to our existing problems, when we proposed to use the GitLab platform, we only put forward a few suggestions and then accepted the proposal. I didn’t deploy the platform. I just tracked the push.

What problem was solved? Lack of a complete platform for project management, documentation, testing, continuous integration, and deployment.

What needs to be done right now? Unable to verify code quality. Unable to control quality. There is no public repository for code sharing.

Conclusion thinking

The above problems are indispensable in the implementation of the project, but they can be solved in the era of information sharing. It is not a problem to inquire more and think more.

This is just the structure of our back office management system. I am not responsible for the rest. And there are other little things, and I don’t sort them out, and I’m basically messing around with little things for efficiency.

Looking back on these two years of public projects, standing in the present big front of the era may not count. I might be able to do better now, but I have to say they are part of the process of growing up.

Finally, the current company is not a big company and there is a limit to what you can do. If you are not in a big company, you may be able to find the technical breakthrough that the company needs to move up. To myself: Although I am in charge of the business of the department. If I am still here this year, I think I will try my best to upgrade the existing technical support and build the team after all, technology is the foundation.

In this paper, to participate in

This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign.