项目准备-Element-UI入门

比眉伴天荒 2022-12-27 09:06 158阅读 0赞

# 前言 #

搭建vue+node项目

--------------------

# Element-UI入门 #

1.初始化项目：

vue create element-test

cunweizhao@cunweideMacBook-Pro kang2 % sudo vue create element-test
    Password:
    
      vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
      You may want to run the following to upgrade to Vue CLI 3:
    
      npm uninstall -g vue-cli
      npm install -g @vue/cli

这段的意思是要先卸载vue cli2,然后重新安装vue cli 3。

sudo npm uninstall -g vue-cli

![在这里插入图片描述][20201210135811349.png]

sudo npm install -g @vue/cli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70]

vue create element-test

![在这里插入图片描述][20201210140319251.png]

2.安装

sudo npm i element-ui -S

![在这里插入图片描述][20201210140418602.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 2]  
3.Vue 插件  
在main.js中安装

import ElementUI from 'element-ui'
    
    Vue.use(ElementUI)

4.引用样式：

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 3]

# 基本语法练习 #

<template>
      <div id="app">
      <el-button @click="show">按钮</el-button>
      </div>
    </template>
    
    <script>
    
    export default { 
      name: 'App',
      methods: { 
        show(){ 
          this.$message.success('element-ui提示')
        }
      }
    }
    </script>
    
    <style>
    #app { 
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![在这里插入图片描述][20201210143109469.png]

### 按需加载 ###

*  对项目进行打包

npm run build

*  发现很多库太大  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 4]  
    这是由于我们未使用按需加载，所以对element-ui进行全量打包的结果，按需加载的用法如下：
 *  安装 babel-plugin-component

npm install babel-plugin-component -D

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 5]

*  修改babel.config.js

module.exports = { 
      presets: [
        '@vue/cli-plugin-babel/preset'
      ],
      plugins: [
          [
            'component',
            { 
              "libraryName": "element-ui",
              "styleLibraryName":"theme-chalk"
            }
          ]
    
      ]
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 6]

*  修改 main.js引入方法  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 7]

### 插件引用： ###

可以通过element插件快速集成element-ui

vue add element

*  首先创建一个新的项目：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 8]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 9]

# 表单基本用法 #

*  el-form容器，通过model绑定数据
 *  el-form-item容器，通过label绑定标签
 *  表单组件通过v-model绑定model中的数据

<template>
      <div id="app">
        <el-form inline :model="data">
          <el-form-item label="审批人">
            <el-input v-model="data.user" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="data.region" placeholder="活动区域">
              <el-option label="区域一" value="shanhai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'app',
      data(){ 
        return { 
          data:{ 
            user: 'zcw',
            region: '区域二'
          }
        }
      },
      methods:{ 
        onSubmit(){ 
          console.log(this.data)
        }
      }
    }
    </script>
    
    <style>
    #app { 
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 10]

## 表单校验 ##

定义校验规则，可以绑定到el-form或el-form-item

export default { 
      name: 'app',
      data(){ 
        const userValidator =(rule,value,callback) =>{ 
          if(value.length>3){ 
            callback()
          }else{ 
            callback(new Error('用户名长度必须大于3'))
          }
        }
        return{ 
          data:{ 
            user:'zcw',
            region:'区域二'
          },
          rules:{ 
            user:[
              { 
                required: true, trigger:'change',message:'用户名必须录入'
              },
              { 
                validator: userValidator, trigger:'change'
              }
            ]
          }
        }
      },
      methods:{ 
        onSubmit(){ 
          console.log(this.data)
          //去空判断
          if(!this.data.user){ 
            this.$message.error('不能为空')
          }
        }
      }
    }

![在这里插入图片描述][20201210165403109.png]

*  优化表单校验：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 11]

<template>
      <div id="app">
        <el-form inline :model="data" :rules="rules" ref="form">
          <el-form-item label="审批人" prop="user">
            <el-input v-model="data.user" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="data.region" placeholder="活动区域">
              <el-option label="区域一" value="shanhai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'app',
      data(){ 
        const userValidator =(rule,value,callback) =>{ 
          if(value.length>3){ 
            callback()
          }else{ 
            callback(new Error('用户名长度必须大于3'))
          }
        }
        return{ 
          data:{ 
            user:'zcw',
            region:'区域二'
          },
          rules:{ 
            user:[
              { required: true, trigger:'change',message:'用户名必须录入'},
              { validator: userValidator, trigger:'change'}
            ]
          }
        }
      },
      methods:{ 
        onSubmit(){ 
          console.log(this.data)
          //去空判断
          // if(!this.data.user){ 
          // this.$message.error('不能为空')
          // }else if(this.data.user.length>10){ 
          // this.$message.error("不能太长")
          // }
          this.$refs.form.validate((isValid,errors)=>{ 
            console.log(isValid,errors)
          })
        }
      }
    }
    </script>
    
    <style>
    #app { 
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![在这里插入图片描述][20201210170746724.png]  
![在这里插入图片描述][20201210170805630.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 12]

### 表单校验的高级用法 ###

用法一： 动态改变校验规则  
1.rules只包含一个校验规则

{ 
    	rules: { 
    		user: [
    			{ required: true, trigger: 'change', message: '用户名必须录入'},
    		]
    	}
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 13]

<template>
      <div id="app">
        <el-form inline :model="data" :rules="rules" ref="form">
          <el-form-item label="审批人" prop="user">
            <el-input v-model="data.user" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="data.region" placeholder="活动区域">
              <el-option label="区域一" value="shanhai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="addRule">添加校验规则</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'app',
      data(){ 
        const userValidator =(rule,value,callback) =>{ 
          if(value.length>3){ 
            callback()
          }else{ 
            callback(new Error('用户名长度必须大于3'))
          }
        }
        return{ 
          data:{ 
            user:'zcw',
            region:'区域二'
          },
          rules:{ 
            user:[
              //{required: true, trigger:'change',message:'用户名必须录入'},
              { required: true, trigger:'blur',message:'用户名必须录入'},
              //{validator: userValidator, trigger:'change'}
            ]
          }
        }
      },
      methods:{ 
        onSubmit(){ 
          console.log(this.data)
          //去空判断
          // if(!this.data.user){ 
          // this.$message.error('不能为空')
          // }else if(this.data.user.length>10){ 
          // this.$message.error("不能太长")
          // }
          this.$refs.form.validate((isValid,errors)=>{ 
            console.log(isValid,errors)
          })
        },
        addRule(){ 
          const userValidator = (rule,value,callback) =>{ 
            if(value.length>3){ 
              callback()
            }else{ 
              callback(new Error('用户名长度必须大于3'))
            }
          }
          const newRule =[
                  ...this.rules.user,
            { validator:userValidator,trigger:'change'}
          ]
          this.rules = Object.assign({ },this.rules,{ user:newRule})
        }
      }
    }
    </script>
    
    <style>
    #app { 
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![在这里插入图片描述][20201210172017971.png]

### 手动控制校验状态 ###

*  validate-status:验证状态，枚举值，共四种：  
    success: 验证成功  
    error: 验证失败  
    validating: 验证中  
    （空）:未验证  
    error: 自定义错误提示  
    1.设置 el-form-item属性

<el-form-item label="用户名" prop="user" :error="error" :validate-status="status">
      </el-form-item>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 14]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 15]

# 表单属性解析 #

*  label-position: 标签位置，枚举值，left和top

:inline="false"

label-width: 标签宽度  
label-suffix： 标签后缀  
inline: 行内表单  
disabled:设置整个form中的表单组件全部disabled,优先级低于表单组件自身的disabled  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 16]

[20201210135811349.png]: /images/20221120/f15762110e0a4e7db7df5590f7fdc76c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70]: /images/20221120/2b6e8e14e30b429eafd39bd11e983b4f.png
[20201210140319251.png]: /images/20221120/97868e92514247dc8f967c583be957f0.png
[20201210140418602.png]: /images/20221120/4abed7b354aa4adab0fffb6850dadfbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 1]: /images/20221120/6e667cecf7bf45f48bcc6896235ad017.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 2]: /images/20221120/6d6aa96c1d724b7a85d5bb4a8dd01e45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 3]: /images/20221120/3a8e412d6a4f4cbeb39ce15f5ebe9a55.png
[20201210143109469.png]: /images/20221120/c9d4b754891c4232a982947667129881.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 4]: /images/20221120/d0edaec4cdaa4919bf48d1528baead0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 5]: /images/20221120/c1d8c0ec397f4a0680cab8aba8791647.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 6]: /images/20221120/114de1b3a76141729bf0912cd83aa133.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 7]: /images/20221120/6ac5b1c2c35f4b5b9a94de507f2f2c74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 8]: /images/20221120/75bc2e560b0947ae94a669f6321660fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 9]: /images/20221120/f59f2903508b4cc9a1b3e2a019245d43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 10]: /images/20221120/ca6e43b1202d4d65acba8869bd6642fa.png
[20201210165403109.png]: /images/20221120/98a152dc3f274f14a8cd2bdad21380e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 11]: /images/20221120/a76e4646b5c84412a4e7b48ec0d77ccf.png
[20201210170746724.png]: /images/20221120/6f33633594214170ae0859c9f099d844.png
[20201210170805630.png]: /images/20221120/3fd423f1a9944c88b81492e865cd6950.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 12]: /images/20221120/4d4a65dcef49419098571b0009bc42e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 13]: /images/20221120/09ecda611f6d498e9290cfde62e91f7a.png
[20201210172017971.png]: /images/20221120/854faff56dc843f1b6ab027121746eff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 14]: /images/20221120/e7514fc152e64906afb08f5e84cc8c2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 15]: /images/20221120/ee032737554e4c8c9bf21b98794108ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMzcwOTEz_size_16_color_FFFFFF_t_70 16]: /images/20221120/e229909adf3a4889acd6b5f14b102b4b.png