VUE （三）element-ui

骑猪看日落 2021-12-12 20:09 232阅读 0赞

### 1.引入element ###

在项目文件夹下shift+鼠标右键打开命令窗口

执行：

npm i element-ui -S

![2019071217220035.png][]

### 2.配置main.js ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70][]

import Vue from 'vue'
    import App from './App.vue'
    import router from './components/router/idnex'
    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(Element, { size: 'small' })
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
      router
    }).$mount('#app')

### 3.修改index.vue ###

<template>
    <div class="hello">
         <router-link to="/Login">登录</router-link>
    <h1>{
       { msg }}</h1>
    <h2>Essential Links</h2>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="text">文字按钮</el-button>
    </div>
    </template>
    <script>
    export default {
    name: 'hello',
    data () {
    return {
    msg: 'Welcome to Your Vue.js App'
    }
    }
    }
    </script>
    
    <style scoped>
    h1, h2 {
    font-weight: normal;
    }
    ul {
    list-style-type: none;
    padding: 0;
    }
    li {
    display: inline-block;
    margin: 0 10px;
    }
    a {
    color: #42b983;
    }
    </style>

### 4.效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 1][]

[2019071217220035.png]: /images/20211210/111ceda1bb2a40d88ea888c6c96d144c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70]: /images/20211210/ab503b0a2a3843e3926805ff7052e699.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzY5OTQ0_size_16_color_FFFFFF_t_70 1]: /images/20211210/e93eb0f5bd1748ce98c83a2cab78910a.png