Quickly set up website front work using Element-UI

1. Introduction      

Element-UI is a popular front-end component library for designers and web developers worldwide. It is developed in China and widely used in Chinese web companies like Ele. me. This tutorial will introduce how to use Element-UI to set up a simple website properly.

        Before we start our project, one crucial we need to know is that Element-UI only caters to the Vue framework. Therefore, you need to install the Vue CLI first.

2. Set up Element-UI environment in Vue CLI

The first step is to create a Vue 2 CLI project. 

Then we need to add the Element-UI package to our project. Open a new terminal and run.

npm i element-ui -S

Open your package.js file. You are ready to go if you see "element-ui" in your dependencies.

 "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.10",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },

Then, we must import the Element entirely into our Vue project. Switch to the main.js file, and type into it as follow:

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 all these steps, you have already set up the environment for Element-UI successfully! Is that simple? Then, we will figure out how to create a simple page step by step.

2. Layout Container and Layout

  Usually, the first step in creating a page is to design the layout of the page. Element-UI provides many different types of Layout designs that cover the majority of popular websites. For example, the classic header, main content, and side bar are:

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

See, after implementing this code in your project, ElementUI will automatically create a header-main-aside layout for you without extra CSS. For more types of Layouts, you can look for ElementUI's official website. 

3. Other Components

The official website of ElementUI provides very specific examples and tutorials for its different components like buttons, form, and pop windows. Every part is displayed with some simple example teaching users how to use it. For example, if we want to create a form for login like below:

photo source: official website of ElementUI.

<el-form ref="form" :model="form" label-width="120px">
  <el-form-item label="Activity name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="Activity zone">
    <el-select v-model="form.region" placeholder="please select your zone">
      <el-option label="Zone one" value="shanghai"></el-option>
      <el-option label="Zone two" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="Activity time">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="Instant delivery">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="Activity type">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="Online activities" name="type"></el-checkbox>
      <el-checkbox label="Promotion activities" name="type"></el-checkbox>
      <el-checkbox label="Offline activities" name="type"></el-checkbox>
      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="Resources">
    <el-radio-group v-model="form.resource">
      <el-radio label="Sponsor"></el-radio>
      <el-radio label="Venue"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="Activity form">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">Create</el-button>
    <el-button>Cancel</el-button>
  </el-form-item>
</el-form>

 The elementUI will come with a sample code. The best way to learn ElementUI is to have fun and explore yourself!