preface

Recently, I am building a front-end framework for the middle and background management system in the company. Although the company has a ready-made middle and background framework to choose from, it is not particularly suitable for the project of our department. Therefore, I have incorporated some of my personal ideas and thoughts into it based on the original framework. This article will focus on my practice points in architecting the front end of a mid-background system.

Technology selection

Whether it’s the front end or the back end, starting a new project from scratch can’t avoid the selection of technology, which should be the first thing to consider, everything will be built on this.

1. JS framework

Considering the mainstream technology stack of the company and department and the technical capability of team members, we choose Vue as the main front-end technology stack. This is not a difficult choice, but the next thing you need to think about is selecting a sub-stack around this technology stack.

Since we use Vue, it is inevitable to use its scaffolding tool (the latest version is Vue CLI 3) to build the underlying project in order to build the project quickly. Also indispensable are Vue Router, a routing library of Vue, and Vuex, a state management tool, which are basically used in Vue projects. In addition, considering the internationalization function of the project, we also added the official library vuE-I18N for internationalization configuration.

2. The UI framework

Since we were building a mid-background system, it was essential to have a UI framework to take care of our view-level development. Excluding the smaller ones, the current mainstream Vue UI frameworks on the PC are better than Element UI and iView. The company’s existing framework uses Element UI, so we chose iView (after all, there is a mid-background framework like iView-admin) to differentiate it.

3. The Node framework

Considering that after the front-end and back-end separation, the front-end needs to enable its own service to run the packaged resources, so although we can use the devServer of Webpack locally, but publishing to the Node server requires a script to start the service. We have chosen the small, configurable Koa2 framework for this implementation (which will be expanded to include the Node middle tier).

4. Other

After the selection of JS framework, UI framework and server framework has been implemented, we also need to consider other technologies besides the framework itself, for example, we choose AXIos to realize the interface request, use less to preprocess CSS style, and use MockJS to realize the data simulation of the interface.

Finally, a legend is used to summarize the project technology stack, as follows:

The directory structure

According to the above technology stack, we have realized the following directory structure. The directory structure outline of the whole project is as follows:

├ ─ ─ / build /# vue CLI required compilation and configuration│ ├ ─ ─ / lib /# Build a library of tools| └ ─ ─ pro - server. JsRun the Static resource pack node service├ ─ ─ / config /# WebPack environment configuration├ ─ ─ / dist /# Packaged resources├ ─ ─ / public /# HTML templates and other public resources| └ ─ ─ index. HTML# HTML template file├ ─ ─ / docs /# Project documentation resources├ ─ ─ / SRC /# Project work area│ ├ ─ ─ / assets /# Project image resource file│ ├ ─ ─ / common /Project public method script file| | ├ ─ ─ / libs /# Rely on the JS library| | ├ ─ ─ utils. Js# Project toolset| | └ ─ ─ variable. Js# Project constant management│ ├ ─ ─ / components /# Project common components│ ├ ─ ─ / config /Project profile global configuration data| | ├ ─ ─ global. Js# global data| | └ ─ ─ apiUriConf. JsAPI interface configuration file│ ├ ─ ─ / lang /# Project internationalization configuration│ ├ ─ ─ / mock# interface mock configuration file│ ├ ─ ─ / router /Route configuration file│ ├ ─ ─ / services /Interface encapsulates address file│ ├ ─ ─ / store /Vuex configuration file│ ├ ─ ─ / views /# page component│ ├ ─ ─ App. VueGlobal parent component│ ├ ─ ─ index. Less# global style│ └ ─ ─ the main js# project entry file├ ─ ─ browserslistrc# Browser support configuration├ ─ ─ Babel. Config. JsSet transcoding rules (Babel) and plugins (environment calls)├ ─ ─ editorConfig# Code editing tool default format├ ─ ─ eslintignore# eslint does not handle, ignoring path configuration├ ─ ─. Eslintrc. Js# esLint detailed rule configuration├ ─ ─ postcss. Config. Js# postcss configuration file├ ─ ─ gitignoreGit ignores uploaded files├ ─ ─ NPMRC# NPM source configuration file├ ─ ─ package - lock. JsonNPM will only be available if you install a higher version├ ─ ─. Prettierrc. Json# Code style configuration├ ─ ─ package. Json# Project dependencies├ ─ ─ the README, md# Introduction to project installation startup├ ─ ─ vue. Config. Js# vue CLI3 entry profile└ ─ ─ yarn. The lock# yarn depend on
Copy the code

conclusion

Technology selection is the prerequisite of project development, the use of excellent and stable technology to ensure the stability and easy maintenance of the whole system development. The technology selection in this paper can be used as a reference, and the specific needs to be combined with the actual situation of the company or department project.

How to build the Front End of a Back-end Project (WebPack + Interface Configuration)

about

Reprint please specify from — wechat official account: front-end hula hoop (love-fed)

If you think this article is helpful to you, you can follow my wechat public number and come here to talk about the front end.