Shulou(Shulou.com)06/03 Report--

The main content of this article is to explain "what is vue-automation". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what vue-automation is.

What's this

Vue-automation is an out-of-the-box Vue project template based on Vue CLI 4

As we all know, although Vue CLI provides the function of scaffolding, because the official scaffolding is too simple, we still need to do a lot of things when it is used in actual project development, and vue-automation is to solve this pain point and improve your development efficiency by at least 50%.

Characteristics

Default integration of vue-router, vuex and axios

Automatic introduction of global SCSS resources

Automatic registration of global components

Support SVG icon, CSS sprite image automatic synthesis

Support mock data for independent development without back-end shackles

Support for GZip and CDN to optimize project volume / load speed

Team code specification can be easily realized by combining IDE plug-in, ESlint, stylelint and Git hook.

Feature introduction configuration

Two sets of configurations for development environment and production environment are provided by default, which can be configured in the .env.development and .env.production files under the root directory. The configurable items include the website title, the interface request address and whether to enable CDN support.

Developers can expand according to their actual business needs. If you are not familiar with this area, you can read the section on Vue CLI environment variables and patterns.

Global SCSS resources

Global SCSS resources are not global styles, they are variables, @ mixin, @ function and so on.

Store global SCSS resources in the assets/styles/resources/ directory, that is, files in this directory can take effect and use without having to refer to them on the page.

The utils.scss file is stored in the project by default, and there are several @ mixin and% in it. You can try to use them on the page to see the effect.

Similarly, the SCSS resources generated under the wizard diagram directory are also globally callable.

Genie diagram

Also known as sprite map, the principle is to merge multiple small images into a large picture, in order to reduce HTTP requests and improve the speed of website access.

The location of the original picture of the wizard is located in the assets/sprites/ directory, which should be distinguished by folder.

Before the project runs, the corresponding wizard image files (sprite image and .scss file) will be generated according to the folder, and multiple wizard files will be generated from multiple folders. It should be noted that when the project is running, modifying the pictures in the folder will regenerate the relevant wizard files, but if you create a new folder, you will need to rerun the project to generate the corresponding wizard files.

Sprite diagrams can be used directly through @ include in .vue files without the need to manually introduce .scss files:

/ / method 1 / / @ include [folder name]-sprite ([file name]); .icon {@ include example-sprite (address);} / / method 2 / / @ include all- [folder name]-sprites; @ include all-example-sprites

The final output is as follows:

/ * method 1 * / .icon {background-image: url (img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); background-position: 0px 0px; background-size: 210px 210px; width: 100px; height: 100px;} / * method 2 * / .example-address-sprites {background-image: url (img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); background-position: 00; background-size: 210px 210px; width: 100px; height: 100px Example-feedback-sprites {background-image: url (img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); background-position:-110px 0; background-size: 210px 210px; width: 100px; height: 100px;} .example-payment-sprites {background-image: url (img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); background-position: 0-110px; background-size: 210px 210px; width: 100px; height: 100px;}

If it is a small project, there are not many static icons, but all can be placed in one folder; if it is a medium and large project, the folder can be divided by module, so that different modules will eventually generate their own wizard files.

SVG icon

Now more and more projects begin to use SVG icon as a substitute for wizard diagram, and this framework also provides SVG icon support for easy to use. It is recommended to download high quality SVG icons from Alibaba vector icon library.

First put the svg file in the src/assets/icons/ directory, and then you can use it in the page. Name is the name of the svg file.

Component is a global component, so you do not need to register to use the

Global component

Global components are stored in the components/global/ directory, and it is important to note that each component is distinguished by folder.

At least one component entry with the file name index, such as index.vue, is kept in the folder of each component.

The component must set the name and make it unique. Auto-registration will set the name of the component to the component name, which can be written in SvgIcon.

Although the folder name is not associated with name, it is recommended that it be consistent with name.

If the component is called through js, make sure that the component entry file is index.js, which can be referenced by the ExampleNotice component.

Vue-router

Routes are also automatically registered, but because of the concept of priority, the first defined routes will match first, so the routes under the same module need to be placed in a routing profile.

Developers only need to care about the files in the router/modules/ directory. A module corresponds to a .js file. You can refer to the router/modules/example.js file.

Vuex

Vuex also implements automatic registration, developers only need to pay attention to the files in the store/modules/ folder, but also distinguish the files according to the module.

Create a new template:

/ / example.js const state = {} const getters = {} const actions = {} const mutations = {} export default {namespaced: true, state, actions, getters, mutations}

The namespace of the file is enabled by default, and the file name is registered as the module name by default.

How to use it:

This.$store.state.example.xxx; this.$store.getters ['example/xxx']; this.$store.dispatch (' example/xxx'); this.$store.commit ('example/xxx'); Axios interceptor

The purpose of the interceptor is to intercept each request and response, and then do some global processing.

For example, the interface response error report can be displayed with a unified error message in the interceptor to facilitate business development.

This framework provides an interceptor reference code src/api/index.js, because each company provides different interface standards, so the file requires developers to customize the corresponding interceptor according to their company's interface.

The code is simple: first initialize the axios object, and then axios.interceptors.request.use () and axios.interceptors.response.use () are the interception code for the request and response, respectively.

Only a simple intercept is done in the reference code, for example, token will be automatically attached to the request, and the login failure or API error will be determined according to the error message in the response.

Quickly create a file

This function is based on plop.

In the process of development, you can't avoid manually creating pages, components and other files frequently, and you have to write some necessary code in the files. Is it very troublesome? Now you can deal with all this in a more concise way.

The template provides three template files: page (page / layout), component (component) and store (global status) by default, which can be selected by yarn new instruction.

In the actual project development, it is suggested that the template files suitable for the project should be customized according to the project, which can greatly improve the development efficiency and unify part of the standards when multi-person collaborative development.

The template directory is. / plop-templates/. If you are creating a new template, remember to reference it in the project root directory plopfile.js.

Code specification: IDE editor

To ensure a uniform code style, use VS Code as the development IDE and install the following extensions:

EditorConfig for VS Code

ESLint

Vetur

Prettier-Code formatter

Stylelint

After installation, add the following configuration to settings.json:

"editor.codeActionsOnSave": {"source.fixAll.eslint": true, "source.fixAll.stylelint": true}

The end result is that the current file is automatically formatted when it is saved.

Code specification: Git hook

The above action only formats the code's writing specification, such as indentation, spaces, semicolons at the end, and so on.

When the code is submitted, Git's hook checks the code for errors that IDE cannot automatically fix, such as the occurrence of unused variables. If there is an error, the submission will be cancelled and will not be allowed until the developer has fixed all the errors, ensuring that the code in the repository is absolutely correct.

Files that do not require code specifications can be ignored by modifying .eslintignore and .stylelintignore, such as referencing some third-party plug-ins or components in the project.

If the git init repository initialization is performed after the dependency package installation, the Git hook cannot be initialized. It is recommended that you perform yarn or npm I again after git init, and reinstall the dependency package.

Code specification: configuration code specification

There are three main configuration files, namely IDE configuration (.editorconfig), ESLint configuration (.eslintrc.js and .eslintignore), and StyleLint configuration (.stylelintrc and .stylelintignore).

Take code indentation as an example. By default, this template is indented with 4 spaces. If you want to adjust it to 2 spaces, you need to modify it in .editorconfig:

Indent_size = 2

Modify it in .eslintrc.js:

'indent': [2,2, {'SwitchCase': 1}],... 'vue/html-indent': [2,2],... 'vue/script-indent': [2,2, {'switchCase': 1}]

Modify in .stylelintrc:

"indentation": 2

After the modification, execute the following two commands respectively:

Yarn run lint yarn run stylelint

This action will format the code once, and if the rule supports automatic repair, the code that does not conform to the rule will be formatted automatically.

With the above example, when the indentation rule is adjusted, we do not need to manually adjust each file, we can automatically apply the new indentation rule through the command.

Extended function

In addition to the above common features, vue-automation also supports related configurations such as mock, CDN, GZip and mobile, making it easy to adapt to any development scenario and can be used out of the box.

Ecology

In my current company, vue-automation has been steadily used in dozens of real projects, covering corporate websites, shopping malls, digital screens, Wechat official accounts and other different fields.

At the same time, on the basis of it, we expand and develop a set of independent middle and background system framework: Fantastic-admin, which ensures that the function is comprehensive and surpasses most similar frameworks on the market on the basis of easy to use.

At this point, I believe you have a deeper understanding of "what vue-automation is", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.