The main js configuration

Definition: Main.js is the entry file for the project. All pages in the project will load main.js.

There are three main functions:

1. Instantiate Vue.

2. Place plug-ins and CSS styles that are commonly used in your project.

3. Store global variables.

After the project is created, there will be a default configuration in main.js, but this simplified configuration is not enough to actually use it. The following through the configuration of three content to let the reader have a preliminary understanding, not much nonsense to open the whole.

1. Select an appropriate front-end UI framework

The installation element:

npm i element-ui -S

Add the code below

import Element from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Many students will encounter installation, add references, when using, do not render normally, the solution is as follows

Install element theme: NPM I elder-theme -chalk -D, perfect solution

2. Register global filters

** Definition: ** filters are used to preprocess the data to be displayed and then display it

Create the instance script. The script file directory is shown in the following figure

Add the code below

import * as filters from './filters'

Import * here refers to all objects in index.js in the filters folder;

Object.keys(filters).forEach(key => {  Vue.filter(key, filters[key])})
Copy the code

Filter registration is achieved through vue. filter, the above code can quickly achieve multiple filter DA

Method of use: {{10000 | toThousandFilter}}

Note: In addition to global filters, local registrations can also be performed in individual components

Filter characteristics

1. The filter can series {{10000 | Filter1 | Filter2}}

2. You can define a global filter with high reusability

3. No cache, only calculated when called

3. Configure global properties

Create the instance script. The script file directory is shown in the following figure

Add a reference to main.js:

import comFun from './comfun'

Add the code below

Vue.prototype.$comFun = comFun

Vue.use(comFun)

$timestampTostr(“1605708367”) $timestampTostr(“1605708367”)

Enlightenment:

Of course, the configuration of main.js varies from project to project,

For example, we need to configure axios to interact with the background, and jS-cookie to use cookies.

These will be covered in later articles, this article is mainly for beginners to have a general understanding of main.js

Read on:Vue entry route Guard implementation permission Verification (5-1)