Property or method “rules“ is not defined on the instance but referenced during render. Make sure th

Property or method “rules” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

    <Card style="width:300px" id="loginCard" title="欢迎登陆">
      <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="login" label-position="right">
        <FormItem prop="userId">
          <Input v-model="loginForm.userId" placeholder="请输入用户id"/>
            <span slot="prepend">
              <Icon :size="16" type="ios-person"></Icon>
            </span>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
            <span slot="prepend">
              <Icon :size="14" type="md-lock"></Icon>
            </span>
        </FormItem>
        <FormItem>
          <Button @click="login" type="primary" long>登录</Button>
        </FormItem>
      </Form>
    </Card>

再data中定义下需要的属性或者方法（rules）就好了

export default {
  name: 'LoginForm',
  data: () => ({
    loginForm: {
      userId: 1,
      password: 'abc123',
    },
    // form: {

    // },
    // rules: {

    // }
  }),