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

    // }
  }),