[Complete project construction] Realize vue front-end construction test system based on vue-cli - ②Introduce element-ui in project development [All introduction]

1. Open the official document of element ui

Enter the installation directory under the component navigation bar 

Enter the following command to install element ui [this section only introduces the implementation of global references, not local references] 

npm i element-ui -S

In my-app [open the vscode terminal, enter the file to create vue-cli and enter the installation]

As shown in the picture, it is downloading

 After the download is complete, it will be displayed as shown in the figure

 Open package.json to verify whether the installation is successful: it is found that the version number of element-ui can be queried in depandencies, and it is successful

 

2. On the official website of element-ui, enter the quick start under the component navigation bar, and find the complete import in the element 

Write the missing code into the main.js file under the created vue-cli folder

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

After importing, as shown in the figure

3. Write the element ui component for testing [for convenience, add it in the App.vue component here] 

Note that the native style of App.vue should be removed [otherwise it may affect the style]

①Before removal

 ② after removal

Annotate the originally introduced HelloWorld component

 Introduce the el-button component of element ui (the code is as follows: see the official document for details)

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

 At this point, the code segment of App.vue is shown in the figure

 

3. Start the project and check whether the introduction of element-ui is successful

Enter the specified directory and enter the following command

npm run serve

 turning on

 Start successfully

 Open the project and find that element ui has been successfully used