Xmo-vue3- Template is a background development template designed to maximize the efficiency of ‘vue3 +Vite2’ development with the minimum cost

Making the address

Project Preview address

preface

I recommend looking at the code first and then the article

WHY according to

Using xmo-vue3-template, you will be able to

0. The development experience is as comfortable as putting on new underwear in the New Year

1. Get a background management system out of the box

2. The use of disciplined modular + layered architecture code specification, ocD benefits

3. Save your time and energy

4. Maximize the experience of Vite2 +vue3+typescript development

5. At the same time, as the template will continue to be updated iteratively according to the technology, paying attention to this template will be able to experience the optimal development efficiency scheme verified by the author in the subsequent synchronization.

6. Finally, each key point of the project is annotated. If you don’t understand anything, you can submit an issue and ask for additional annotation.

HOW to do HOW

Xmo-vue3-template has the following properties. There may be things you haven’t heard of yet, and if you want to try out the best development experiences, I recommend that you get to know them, and you’ll get a completely new development experience on the Vue project.

1. useprettier commitlint git-cz 和 huskyConduct quality management;
2. The project structure is modular (modules) rather than traditional componentized design (components);
3. ProfusevitePlug-ins, reducedapiAnd the componentimportImport;
4. usingtypescriptEnsure code type, especially pay attention to the unification of the front and back end types;

Quality management

1. Prettier allows you to format code consistently, for example

   1. How much indentation code should have;

   2. When to break a line;

   3. More…

      You can have your own code style, but it can lead to confusion. Prettier’s original code style, by contrast, provides a stable development experience for you and your team without having to worry about formatting inconsistency and not being able to read other people’s code or your own.

      Q: Why not use esLint; A: ESLint has A relatively high barrier to use, and its specification is not uniform and can be intrusive. Eslint should be used with javascript by nature, and there is very little room for ESLint with typescript.

2. Commitlint + git-cz make your Git commit provide valid information

   Most of the time the git commit of most developers is shit and provides little valid information. Use these two plug-ins to provide the COMMIT specification to optimize this phenomenon.

   The unqualifiedcommitWill be stopped.

   Git commit -m “chore: None”

3. husky

   Husky can hijack Git operations and, in conjunction with Lint-staged, automatically format your code at Git commit time (default prettier).

Modular construction

Disadvantages of componentization

1. Too often, Vue development tends to fall into the trap of reusable for reusable’s sake. (There aren’t really that many components that need to be reusable, but it’s easy to create extra reusable components)

2. Although the services of the two components are very different, they still need to handle the properties of reusability through props. Once a business modification occurs, complex logic modifications may be made to a single component to preserve the reusability.

3. It is difficult to identify the functions of componentized components or quickly locate the application scenarios of components based on component names.

4. It’s not easy to divide responsibilities when working in a team.

Advantages of modularity

1. Components reduce the focus on reusability and focus on real business requirements.

   1. Wait until there are scenarios that need to be reused on a large scalecomponentsFolders are also late for registering reusable components

2. Close business; The usual module scheme is page differentiation, that is, each page is divided into a module, each module corresponds to each part of the page, what you see is what you get, reduce the mental cost.

3. It is conducive to team collaboration. During team development, each member can create his own module and develop only under his own module, without referring to other modules or worrying about the influence of others’ development on him.

   1. If a structure similar to another module appears, a new component can be copied directly

4. More efficient.

Modular + layered concrete implementation plan

1. The view layer is modular by page (Modules are divided by page, managing VUE files and a small number of TS files for cross-component data management, each page is divided into a module), and the page is divided into multiple sub-components according to the location of components.

2. The logic layer is modular by function, whereas the traditional front-end only needs to distinguish three modules

   1. API module – Defines axiOS requests and back-end data types for back-end interfaces.

   2. Config module – Defines global static configuration information.

   3. Service module – Defines specific function items

      1. For example, inauthModule, definitionloginandlogoutMethod, and responsiveprofile(User’s personal information) object.

3. The view layer refers to the methods of the logical layer, and the logical layer refers to each other.

The API module defines the interface corresponding to the backend. The interface name is Method + interface name. For example, the login behavior is PostLoginForm.

A service defines a specific function, and its name needs to reflect the consequences of its behavior. Logging in is login, and logging out is logout. When a developer references a service, it does not need to be logged out.

Although Router and assets are separated separately, they do not have interactivity with other modules. (Assets manage global styles, while Router manages global routes)

Vite plug-in

Plugins have been introduced and the average developer doesn’t need to care.

• Vite automatic introduction – see this article for details

  • unplugin-auto-importGlobal automatic implicitimportExport – Usually used to importvue vue-routerExport – configured
  • unplugin-vue-componentsGlobal automatic implicitimport VueComponent – Usually used for importselement-plusComponents such as common component libraries – default configurationelement-plus
  • vite-plugin-style-importGlobal automatic introductionimportStyle files – usually used for importselement-plusPublic component library style files
    

    Note that v2.0.0 has bugs. Do not manually install the latest version.

  Unplugin-auto-import and unplugin-vue-Components generate auto-imports. D. ts and components. D. ts declarations, respectively. Since these declarations are generated repeatedly during development, Git garbage is easy to produce, so you can put it in.gitignore. However, this method will result in a lack of declaration files and will not be able to properly build vite, so you should first generate the full declaration file before building.

• Rollup-plugin-visualizer generates a visualization of each module occupied while packaging.

• Vite -plugin- SVG – ICONS – Importing SVG native ICONS – configured and used with SvgIcon component

Use the typescript

When working with typescript as a team, you first need to evaluate whether and to what extent your colleagues know typescript. I classify typescript capabilities into the following levels.

1. LV1 doesn’t know anything. First heard of or usedtypescriptOr will onlyany;
2. LV2 works a little bitinterfaceBuild simple objects;
3. LV3 havetypescriptProject actual combat experience, know generics<T>andtypeDefine slightly more complex types;
4. LV4 didtypescript, can use generics,inferAnd type traversal to define advanced types, to know how to define global types, to extend general objects;
5. Proficient in LV5typescriptDevelopment, customs clearancetypescriptThe type of gymnastics.

To develop typescript + vite projects, regular members need to be at least LV2 level and team leaders need to be at least LV3 level in order to take advantage of typescript. Otherwise, it’s all any, TS-ignore, or error.

The benefits of working with typescript in this project fall into the following categories.

1. To minimize the capability requirements of members, the project recommends using typescript to define types first in the API folder, where AXIOS interacts with the back end. Because the front and back end interactions produce the most data models, the benefits of typing them are greatest.

2. The second is to define simple types in reactive objects of ref and reactive, such as ref
   
   () and const a: {} = reactive({}). They maximize the development benefits of Volar +vue3.
   

This project declares the global type, so it can be generated using ref< resquest.auth.loginform > without active reference

3. Combine backend and reactive type +volar, can cover95%The demand, let the development be full of type clew, threshold also won’t too tall.

conclusion

Talk is cheap. Show me the code.
Copy the code