Installing and configuring Element

We are now going to add the Element component library to the project.

As usual, the installation starts with npm:

npm install element-ui

Once installed, we need to load Element and associate it with Vue. There are two approaches:

1. Load all Element components at once.
2. Load only the Element components that we actually need.

For simplicity, we'll use the first approach, but keep in mind that the alternative is probably better for production code. You can find more details here: https://element.eleme.io/#/en-US/component/quickstart.

Open the src/main.ts file:

1. Import the Element library reset stylesheet: import 'element-ui/lib/theme-chalk/reset.css';.
2. Import the Element library stylesheet: import 'element-ui/lib/theme-chalk/index.css';.
3. Import ElementUI: import ElementUI from 'element-ui';.
4. Import the English locale: import * as enLocale from 'element-ui/lib/locale/lang/en';.
5. Register the Element components with Vue: Vue.use(ElementUI, { locale: enLocale });.

Element's default language is Chinese, which is why we have loaded a custom locale.

Great, now we can use Element in our application!