Introducing Element in the Vue framework

The article will talk about how to introduce Element in the Vue framework

So let's talk about the Vue framework first: Vue is a progressive, JavaScript framework. Many people don't understand what progressive is, in simple terms, it is easy to use, flexible, and efficient (without too many restrictions)

Here is how to install npm :

Open cmd and find the path of your Vue project

run

npm and u-element and -S

Then write the following in main.js:

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

Vue.use(ElementUI);　　//don't ignore

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

The above code completes the introduction of Element. It should be noted that the style file needs to be imported separately.

Introduce on demand

With the help of  babel-plugin-component , we can introduce only the required components to reduce the size of the project.

First, install babel-plugin-component:

npm install babel-plugin-component -D

Then, modify .babelrc to:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

There are many examples on the Element official website. Here I will pick one or two for you to demonstrate.

Write the following in Vue.app:

1.

<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"</Warning button>roundel-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

result:

 2.

<div class="block">
  <span class="demonstration">有默认值</span>
  <el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
  <span class="demonstration">无默认值</span>
  <el-color-picker v-model="color2"></el-color-picker>
</div>

<script>
  export default {
    data() {
      return {
        color1: '#409EFF',
        color2: null
      }
    }
  };
</script>

结果：

3.

<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

结果：