preface

Some time ago, the company decided to use vue-ANTD-Admin, an open source front-end solution, for various reasons. Before that, I heard about Ant Design Pro, which should be developed by the internal team of Ali. Vue-antd-admin is its vue copy. In fact, there is Ant Design Pro Vue, which is also an open source Vue clone. This integration solution can quickly improve business development efficiency, but as far as I know, there are some disadvantages:

First, this kind of project considers the scene is more comprehensive, for a specific company project, but appears to be more redundant design, after reading through the document, can complete the business function development at a faster speed, but within its framework; Customization needs are ever-changing, at this time if it is not consistent with the design concept, it is necessary to do a larger compatible secondary development.

Second, performance optimization will be very troublesome, also because of too much redundant design, resulting in a large number of files, which is against the streamlined optimization strategy.

Third, lack of challenge, project technology upgrade is not very convenient.

So teams to reasonable assessment to decide whether or not suitable for the current project, is suitable for our project at that time, our team, products, design without too much interference, influence is still in the front, so efficiency really quickly, and it provides some very cool effect and module, compete with yourself to develop, can save a lot of time, For example, the configuration setting can quickly modify the project layout, theme color, multi-language, animation, etc., which are usually the highlights of the project are included.

During this period of time, in the process of using vue-antd-admin, there are some experiences, although maybe not very big pit, but I think it is worth recording and sharing.

Login system

The official uses JS-cookie to inject the token returned by login into the request header, and the back end verifies accordingly. We don’t need this because we need single sign-on and uniform cookie injection.

Single sign-on (SSO) means that a user can log in to one application system and access all other trusted application systems.

It is usually used between independent and trusted projects on the Intranet. A dedicated login system is used for each service system.

Menu: Render icon

Menus provide asynchronous and synchronous loading methods, synchronous is nothing to say, generally 404 pages; Generally, service function pages are loaded asynchronously. Route data is obtained through the interface and the local router.map.js file is combined to generate the final ROUTE JSON. Note here: Three attributes icon, Invisible, and Page have been injected into the metadata attribute meta of Routes, which will play a role in generating menus and headers. I found that the icon here is the type property of the Icon component rendered to the Ant Design Vue component library. The source is located in menu/menu.js

return ! icon || icon == 'none' ? null : h(Icon, { props: { type: icon } })Copy the code

The hundreds of ICONS provided by the component library certainly cannot meet all the requirements. They are generally designed by the designers of their own companies, so there needs to be some modification. {type: icon} is actually the data passed to a-icon component prop.

return ! icon || icon == 'none' ? null : h(Icon, { props: { component: icon} })Copy the code

I’ll use the Component property instead, as the official definition says: Component controls how ICONS are rendered, usually a Vue component with a render root tag, which invalidates the Type property.

Here I use Component to render a custom SVG icon into the menu; In business development, there are places where the source design needs to be modified everywhere. Each author’s thinking logic is different, and the architecture of the design is also different. Such nesting is quite multi-tiered, and it is necessary to comb through his design concept and find the final rendered function.

Minimum pixel problem

Remember that in Chrome, the default minimum supported is 12px, and some scene UIs provide text at 10px. How to achieve this

Here are a few options to consider:

  1. In the browser Settings, it is possible to change the minimum display pixel, set the appearance = custom font = minimum size, but this is not widely operable and should not be allowed to be operated by the user.
  2. In the form of SVG images, SVG can be scaled without affecting sharpness.
  3. Font scaling, which is most recommended, compatibility is also possible
Scale10px {font-size: 12px transform: scale(0.8); scale10px {font-size: 12px transform: scale(0.8); transform-origin: left; }Copy the code

Pulldown options of Drawer and Select components are incorrect

The dropdown options and positioning of these two components will be rendered to the body by default, and the scrolling of the menu will not work properly in the mute case, so we need to change the element nodes rendered by them:

This can be done using the getContainer and getPopupContainer properties.

Theme customization

Vue Antd Admin provides a variety of theme customization functions, such as theme color, theme mode, navigation layout, animation, etc. These “highlights” function makes the project look cool a lot. I remember a small episode, I was going to open the configuration entry in dev, sit environment. However, due to a bug in the configuration of environment variables, the first version was released when it was launched, and I found it when the business accepted it. At that time, I was quite nervous and ready to send another version urgently, but the business and products all thought this function was very good, and even strongly requested to keep it.

However, after we discussed with the boss, in order to prevent them from playing around and causing bugs, we still disabled the subetting environment. Open the setting.config.js file. See, the hideSetting property is false by default, as long as the online environment is changed to true, it will be fine.

// hideSetting drawer, true: hide, false: do not hide hideSetting: process.env.vue_app_env_name === 'prod'? true : falseCopy the code

You may have noticed that VUE_APP_ENV_NAME is my custom variable that represents the current runtime environment, so where is this variable defined? Don’t worry, I want to go into a little more detail about environment variables, please look later.

The environment variable

In the browser window represents the global object, while the global object in Node is called global. Process is mounted under global, so it can be used globally. The Process object provides information about and controls the current Node.js process. Env. This property returns the object containing the current user environment. If you need to differentiate multiple environments, you can also customize global variables in env, such as interface domain name, buried project configuration, etc. Specific configuration schemes:

Vue – cli scaffold

The Vue CLI scaffolding provides the concept of ‘mode’, which by default provides three modes: development, test, and production. This is not sufficient in most cases. We can override the default mode for the command line by passing the –mode option argument. For example, if you want to use development environment variables in build commands:

vue-cli-service build --mode development
Copy the code

When running vue-cli-service, all environment variables are loaded from the corresponding environment file (which needs to be created manually). You can specify environment variables by placing the following files in your project root directory

Env.[mode] # is loaded only in the specified mode. Git ignores itCopy the code

Example: package. Json:

"Serve ": "vue-cli-service serve --mode=sit". VUE_APP_CURRENT=sit is added to the.env.sit fileCopy the code

VUE_APP_CURRENT is the variable we defined. Note that only NODE_ENV, BASE_URL, and variables starting with VUE_APP_ will be statically embedded in the client-side code via webpack.defineplugin. This is to avoid accidentally exposing a private key on the machine that might have the same name.

Generic scheme cross-env

Cross-env is an NPM tool designed to unify syntactic differences between using environment variables on multiple platforms, such as Windows. Direct NODE_ENV=production does not work, macOs does; It can erase these differences and give users a unified experience across different platforms.

I originally created it to solve a problem I had using NPM scripts in Angular-Formly. This makes it easier for Windows users to contribute to the project.

From: www.npmjs.com/package/cro…

It’s also very simple to use, first to install into the project,

npm install --save-dev cross-env 
Copy the code

Use this in the package.json script:

"build:sit": "cross-env CDN_ENV=sit vue-cli-service build"
Copy the code

The custom CDN_ENV variable has been configured into the process.env object by the above directive, but it is not yet accessible in the runtime environment. To access the CDN_ENV variable in the runtime environment, further configuration is required:

1. ChainWebpack under vue.config.js if vue-cli: config => { config.plugin('define').tap(args => { args[0]['process.env'].CDN_ENV = JSON.stringify(process.env.CDN_ENV) Return args})} {cross-env is not recommended for vue-cli. Plugins: [new webpack.defineplugin ({NODE_ENV: JSON. Stringify (process.env.cdn_env),})]Copy the code

All custom variable objects including CDN_ENV can be accessed through process.env in any.vue or.js file.

DefinePlugin is a plugin that replaces custom variables in your code with other values or expressions at compile time, in this case process.env.cdn_env. So the CDN_ENV variable has been modified and replaced at compile time prior to access.

conclusion

While developing business projects with Vue-antD-Admin, the overall experience was good, with a lot of relief (yawn). Common components such as search, table, keep-alive cache multi-tab pages, theme configuration, etc. saved us a lot of time. And learn the author’s architectural ideas.

However, on the premise of sufficient time and personnel reserve, it is recommended to build a structure by yourself, which will give you more sense of achievement and gain.

Thank you for watching, the next part is ready to write front-end burial point, mainly god’s plan practice, please look forward to.