使用vue和vue-cli动手创建一个登录界面

首先，你需要安装Vue和Vue CLI。安装完成后，你可以使用Vue CLI创建一个新的Vue项目。

在命令行中输入以下命令：

vue create my-project

这将创建一个名为“my-project”的新Vue项目。接下来，你可以使用Vue Router和Vue组件来创建一个登录界面。

首先，在src目录下创建一个名为“views”的文件夹。在该文件夹中创建一个名为“Login.vue”的文件。

在Login.vue文件中，你可以使用Vue组件来创建一个登录表单。例如：

<template>
  <div>
    <h1>Login</h1>
    <form>
      <label for="username">Username:</label>
      <input type="text" id="username" v-model="username">
      <br>
      <label for="password">Password:</label>
      <input type="password" id="password" v-model="password">
      <br>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  }
}
</script>

在该组件中，我们创建了一个包含用户名和密码输入框的表单。我们还使用了v-model指令来绑定输入框的值到组件的数据中。

接下来，你需要在App.vue文件中使用Vue Router来渲染Login组件。例如：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

在该组件中，我们使用了Vue Router的router-view组件来渲染当前路由的组件。现在，我们需要在router/index.js文件中定义一个路由来渲染Login组件。例如：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在该文件中，我们定义了一个名为“Login”的路由，该路由将渲染Login组件。现在，你可以在命令行中运行以下命令来启动Vue应用程序：

npm run serve

这将启动一个本地开发服务器，你可以在浏览器中访问http://localhost:8080来查看你的登录界面。