用vue2.0初始化一个能够使用mock后端数据实现登陆的项目

好的，对于您的问题，实现带有Mock后端数据的登录系统可以采取以下步骤：

1. 首先，搭建Vue2.0项目，可以使用Vue CLI或手动创建。安装所需要的依赖项。

2. 使用mockjs创建模拟数据（例如用户的信息，登录凭证等）并暴露在项目的mock API上。

3. 在Vue中定义登录组件，包含用于输入用户名和密码的表单。在提交表单时，使用axios或其他http库发起ajax请求。

4. 创建一个登录API使用axios或其他http库调用mock数据。

5. 如果登录成功，保存登录凭证（可以使用LocalStorage或Cookies）并重定向到指定的页面。否则，显示错误消息。

下面是一个大致的实现方案：

1. 首先安装Vue CLI：npm install -g @vue/cli

2. 创建项目并安装依赖：vue create login-project

3. 安装axios和mockjs：npm install axios mockjs

4. 在/src/mock/下创建一个mock.js文件，包含一些和登录相关的mock数据和API。例如：

import Mock from 'mockjs'

// 模拟用户数据
Mock.mock('/api/user', {
  'username|1-5': /[a-z]/,
  'password|6-10': /[0-9a-zA-Z]/
})

// 模拟登录API
Mock.mock('/api/login', 'post', function (options) {
  const { username, password } = JSON.parse(options.body)
  if (username === 'admin' && password === '123456') {
    return {
      code: 0,
      token: 'mock-token'
    }
  } else {
    return {
      code: -1,
      message: '用户名或密码错误'
    }
  }
})

5. 在main.js中引入axios和mockjs并启用mock API：

import axios from 'axios'
import Mock from 'mockjs'

axios.defaults.baseURL = 'http://localhost:8080'

Mock.setup({
  timeout: '100-500'
})

// 加载mock模块
require('./mock')

6. 在/src/components/Login.vue中创建登录组件：

<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="login">
      <div>
        <label>Username:</label>
        <input type="text" v-model="user.username">
      </div>
      <div>
        <label>Password:</label>
        <input type="password" v-model="user.password">
      </div>
      <button type="submit">Submit</button>
      <span>{{ message }}</span>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Login',

  data () {
    return {
      user: {
        username: '',
        password: ''
      },
      message: ''
    }
  },

  methods: {
    login () {
      axios.post('/api/login', this.user)
        .then(response => {
          if (response.data.code === 0) {
            localStorage.setItem('token', response.data.token)
            this.$router.push('/dashboard')
          } else {
            this.message = response.data.message
          }
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

7. 在App.vue中定义路由和导航：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/login">Login</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

8. 启动开发服务器：npm run serve

现在，您可以通过访问http://localhost:8080/login来在浏览器中尝试这个简单的登录系统了。如果您使用的是Vue CLI生成的项目，请注意启动服务时的端口号可能不同。