element-ui准备

安装

npm install element-ui -S

成功后，打开package.json文件

 "dependencies": {
    "element-ui": "^2.15.5",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  }

引用

在main.js文件中引用

// 引入element UI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import router from './router'

注意在router之前引入

使用

在main.js文件中注册element-ui插件

// 使用element UI
Vue.use(ElementUI)

注册插件方式一: Vue.use(ElementUI) :有 install 的组件

注册插件方式二:Vue.prototype.$axios = axios; 无install 的组件

login.vue login.vue

在src/views中新建login.vue

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/login'
​
Vue.use(Router)
​
export default new Router({
  routes: [
    {
      path: '/',
      name: '',
      component: Login
    }
  ]
})

导入组件:import Login from '@/views/login'

注册网关:Vue.use(Router)

routes:配置路线

:model="ruleForm" 绑定属性对象ruleForm

:rules="rules" 绑定属性对象rules,定义校验规则

ref="ruleForm" 给当前DOM对象命名，类似于id属性；在subjectForm中，使用this.$refs['ruleForm']读于ref定义的表单元素

:pop="username" 为:model绑定的对象的属性，并与rules中名称相同

v-model:绑定表单元素属性值