[JaveWeb Tutorial] (7) Web front-end basics: Introduction to Vue component library Element and quick start program writing and running examples

Introduction to Element

I don’t know if students still remember the front-end development model MVVM we explained before. The vue we learned before focused on VM development and was mainly used for binding data to views. Then the ElementUI we will learn next is a model that focuses on VM development. The front-end framework developed by V is mainly used to develop beautiful pages.

Element: It is a set of Vue-based website component libraries provided by Ele.me's front-end development team for quickly building web pages.

Element provides many components (the parts that make up web pages) for us to use. For example, hyperlinks, buttons, pictures, tables, etc. As shown in the figure below, we compare the effects of the page we developed and that provided by ElementUI: you can find a variety of beautiful buttons provided by ElementUI

The learning method of ElementUI is different from our previous learning method. For ElementUI, as a backend developer, we only need to learn how to copy components from the official website of ElementUI to our own pages and make some modifications . Its official website address: https://element.eleme.cn/#/zh-CN. We mainly study the common components provided in ElementUI. As for other components, students can master ElementUI through the study of these components. Learn the techniques and then study on your own after class.

Quick start example

First we need to master the quick start of ElementUI, and then students will follow the steps together.

First, we need to install the ElementUI component library, open VS Code, stop the previous project, and then enter the following command on the command line:

npm install [email protected] 

The specific operations are shown in the figure below:

Then we need to introduce the ElementUI component library into the entry js file main.js. The code is as follows:

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

Vue.use(ElementUI);

The specific operation is shown in the figure:

Then we need to create a vue component file in the src/views directory according to the development specifications of the vue project. Note that the component name suffix is ​​.vue, and write the basic component syntax introduced before in the component file. The code is as follows:

<template>

</template>

<script>
export default {
      
      

}
</script>

<style>

</style>

The specific operation is shown in the figure:

Finally, we only need to go to the official website of ElementUI, find the component library, then find the button component, and copy the code. The specific operation is as shown in the figure below:

Then find the code for the button, as shown below:

Then we copy the component code into our vue component file, as shown in the figure below:

Finally, we need to introduce our custom components into the default accessed root component src/App.vue . The specific steps are as follows:

Then the specific code in the App.vue component is as follows. The code is automatically generated when we introduce the element-view component through the above steps .

<template>
  <div id="app">
    <!-- {
    
    {message}} -->
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/Element/ElementView.vue'
export default {
      
      
  components: {
      
       ElementView },
  data(){
      
      
    return {
      
      
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

Then run our vue project, and the browser directly accesses the previous 7000 port. The display effect is as shown below:

At this point, our ElementUI introductory program has been successfully written.