Vue project optimization skills

Vue batch registration of global components

1. In the global componentcomponentsAdd to folderglobal.jsFile The global component configuration file contains the following contents:

important Vue from 'vue'
		
function changeStr (str) {
    //charAt removes the first self-check ABC of the character => ABC
    return str.charAt(0).toUpperCase() + str.slice(1)}//require.context(a,b,c) a => directory b => Whether there is a subdirectory c => regex that matches the file
const requireComponent = require.context('. '.false, /\.vue$/)
requireComponent.keys().forEach(fillName= > {
	/ / the I
	const config = requireComponent(fillName)
	const componentName = changeStr(
	    fillName.replace(/ ^ \ \ / /.' ').replace(/\.\w+$/.' ')
	)
	Vue.component(componentName, config.default || config)
})
Copy the code

Once this file is created, you can write global components directly in the components file. Since the second parameter in require.context() is false, all components need to be stored directly in the Components file as.vue files

In 2.main.jsGlobal introduction of theglobal.js

Note: Registering global components will cause performance loss, so you need to clear the usage scenarios of this method. This method is suitable for use only when components are frequently used, such as some forms, pop-up boxes, prompt boxes, input boxes, and other components

2. Vue main routing optimization

Main principle: usewebpack 的 require.context() API

Suppose the demo has two modules, home and login

1.In the projectrouterAdded to folderhome.router.js 和 login.router.jspartition

General content:

export default {  
  path: '/home'.redirect: '/home'.component: (a)= > import('@/views/layout'),  
  meta: {    // Routes are sorted in ascending order according to the size of the permission code
    role: [10000].title: 'home'  
	},  
  children: [{path: ' '.name: 'home'.component: (a)= > import('@/views/home/index'),
      meta: {
        title: 'Platform Home page'.icon: 'iconfont icon-shouye'.role: [11000],},},],}Copy the code

In 2.routerThe primary route of a folder imports partition routes in batches to the folder

General content:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let routerList = []
function importAll (r) {
  r.keys().forEach(   //r(key). Default Is because export default is used to export partition routes
   (key) => routerList.push(r(key).default)
  )
}
importAll(require.context('. '.false, /\.router\.js/))
RouterList = routerList.sort((a, b) => { return a.meta.role[0] - b.meta.role[0] })export const asyncRoutes = [...routerList]export default new Router({ mode: 'history', base: '', routes: asyncRoutes})

Copy the code

Conclusion: The advantages of this method are to reduce the routing complexity of large projects, manage the routes by partition, and facilitate maintenance and iteration.

Although permission codes are added to the above routes, the distinction between static routes and dynamic routes is not made. If permission judgment is required for a project, only partition routing files need to be differentiated, such as partition files of static routes.crouter.jsEnd, dynamic routing partition file with.arouter.jsAt the end, the partition routing file is imported into the main route in two timesimportAll()Method to import two routes separately by modifying the re for two executions.

In need of frequentimportTry to use this method properly!

Vue-Cli 3 Introduces SCSS global variables

1. Create a global variable file firstglobal.scss

$theme-color: #efefef;
Copy the code

2. The configurationvue.config.js

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/global.scss"; `}}}}Copy the code

The variables defined in global.scss can now be used anywhere, mainly for global configuration of theme styles such as body background color, global default font size, color, and so on.

Iv. Vue-cli2 packing opengzipThe compression

1. Install the package plug-in:compression-webpack-plugin

Use NPM install: NPM install –save-dev [email protected]

Vue-cli2 uses Webpackage 3.0+, but the latest version of Compression -webpack-plugin needs webpackage 4.0+ to support, so when installing the plug-in here, you need to specify a lower version number to prevent compatibility problems.

2. After the installation is complete, modify itconfigUnder folderindex.jsThe configuration file

Change productionGzip: false to true

3. AddcssFile Compression Configuration

The webpack.prod.config configuration of vuE-CLI does not match the CSS file, so if you need to compress the CSS file, Change the re matches in the Build folder.

Modified to

4. Runnpm run buildpackage

The system compresses files larger than 10kb to generate static files ending with gz

5. Finally, after uploading to the server,nginxThe configuration file is as follows

Now you can visit happily!

V. VuE-CLI3 packing opengzipThe compression

1. Install the package plug-in:compression-webpack-plugin

NPM install –save-dev compression — webpack-plugin

2. Modifyvue.config.jsconfiguration

3. Runnpm run buildpackage

After packaging, you can see that the packaging file generates a gz-terminated compressed file

4. Modify as abovenginxServer configuration, can be accessed happily ~