vue脚手架登录页面

你想要了解如何使用Vue脚手架创建一个登录页面，是吗？下面是一个简单的示例，帮助你创建一个基本的登录页面。

首先，你需要安装Vue脚手架。在命令行中运行以下命令：

npm install -g @vue/cli

安装完成后，你可以使用以下命令创建一个新的Vue项目：

vue create login-page

进入项目目录：

cd login-page

接下来，你可以使用Vue Router创建一个登录页面的路由。在命令行中运行以下命令来安装Vue Router：

npm install vue-router

在src目录下创建一个名为router.js的文件，并添加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import LoginPage from './components/LoginPage.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

接下来，在src目录下创建一个名为components的文件夹，并在其中创建一个名为LoginPage.vue的文件。添加以下代码：

<template>
  <div>
    <h1>Login Page</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 @click.prevent="login">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 在这里处理登录逻辑
      // 可以使用this.username和this.password获取输入的值
    }
  }
}
</script>

最后，打开src/main.js文件，并添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

现在，你可以运行以下命令启动应用：

npm run serve

然后在浏览器中访问http://localhost:8080/login，就可以看到你的登录页面了。

这只是一个简单的示例，你可以根据自己的需求进一步扩展和自定义登录页面。希望对你有帮助！