Quick start with ElementUI (jar package downloaded locally)

Element-ui is a front-end framework developed based on Vue launched by the front-end team of Ele.me.

I just learned Element-ui recently, and I can't wait to practice, but found that the ready-made component styles can't be used. Refer to the usage method of the official website, as shown in the figure:

The display effect is also unsatisfactory. In the process of Baidu, it is found that the link reference may be unstable and the access is very slow. Later, the tutorials on the Internet were set up step by step, and as a result, many unexpected problems appeared. After watching a lot of big cow's videos, I realized it's so simple! ! ! The tutorial is as follows:

1. Since it is a vue-based framework, first import the vue.js frame package.

Link: Install Vue.js

It is recommended to use the development version during the learning phase.

2. Next is the local reference of Element-ui. Enter the official website of Elementui.

Link: Element - Website Rapid Prototyping Tool

Pull the page to the bottom and find the code repository. (Or go directly to the github official website), search for "ElementUI/lib".

link: lib-master

Click Download ZIP in Code.

After downloading, unzip it (the folder should be lib-master), and put this document and the vue.js framework package downloaded before in the same directory under the project structure.

3. Create a new html file and reference the jar package in the file. (If the last run does not work, it may be that the vue.js reference should be placed in front of the Element reference)

<link rel="stylesheet" href="js/lib-master/theme-chalk/index.css"/>
<script src="js/vue.js" charset="utf-8"></script>
<script src="js/lib-master/index.js" charset="utf-8"></script>

4. Just refer to the components in Element-ui.

Find any component to test, such as a button.

The code can be cv.

ps: Don't forget to instantiate Vue! Otherwise it won't work.

Full code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app">
  <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>

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

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

  <el-row>
    <el-button icon="el-icon-search" circle></el-button>
    <el-button type="primary" icon="el-icon-edit" circle></el-button>
    <el-button type="success" icon="el-icon-check" circle></el-button>
    <el-button type="info" icon="el-icon-message" circle></el-button>
    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
  </el-row>
</div>
</body>
<link rel="stylesheet" href="js/lib-master/theme-chalk/index.css"/>
<script src="js/vue.js" charset="utf-8"></script>
<script src="js/lib-master/index.js" charset="utf-8"></script>
<script>
  new Vue({
    el: '#app'
  })
</script>
</html>

Quick start with ElementUI (jar package downloaded locally)

Guess you like