前言

搭建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

在这里插入图片描述

sudo npm install -g @vue/cli

在这里插入图片描述

vue create element-test

在这里插入图片描述

2.安装

sudo npm i element-ui -S

在这里插入图片描述

3.Vue 插件
在main.js中安装

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

4.引用样式：

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

在这里插入图片描述

基本语法练习

<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>

在这里插入图片描述

按需加载

对项目进行打包

npm run build
发现很多库太大

这是由于我们未使用按需加载，所以对element-ui进行全量打包的结果，按需加载的用法如下：
安装 babel-plugin-component

npm install babel-plugin-component -D

在这里插入图片描述

修改babel.config.js

module.exports = {
presets: [

'@vue/cli-plugin-babel/preset'

],
plugins: [

  [
    'component',
    { 
      "libraryName": "element-ui",
      "styleLibraryName":"theme-chalk"
    }
  ]

]
}

在这里插入图片描述

修改 main.js引入方法

插件引用：

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

vue add element

首先创建一个新的项目：

表单基本用法

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

在这里插入图片描述

表单校验

定义校验规则，可以绑定到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('不能为空')
      }
    }
  }
}

在这里插入图片描述

优化表单校验：

在这里插入图片描述

表单校验的高级用法

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

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

在这里插入图片描述

<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>