以下是使用
Vue脚手架编写登录
页面的步骤：
1. 创建一个
Vue项目并进入项目目录：
```shell
vue create login-page
cd login-page
```
2. 安装
Vue Router和Axios：
```shell
npm install
vue-router axios --save
```
3. 在src目录下创建一个views目录，并在views目录下创建一个Login.
vue文件，用于编写登录
页面的代码：
```
vue
<template>
<div>
<h1>Login Page</h1>
<form>
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password">
</div>
<button type="submit" @click.prevent="login">Login</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
axios.post('/api/login', {
username: this.username,
password: this.password
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
```
4. 在src目录下创建一个router目录，并在router目录下创建一个index.js文件，用于
配置路由：
```javascript
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;
```
5. 在src目录下创建一个api目录，并在api目录下创建一个index.js文件，用于封装API请求：
```javascript
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'http://localhost:3000',
withCredentials: true,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
});
export default {
login(credentials) {
return apiClient.post('/api/login', credentials);
}
}
```
6. 在src目录下的main.js文件中引入路由和API，并将其挂载到
Vue实例上：
```javascript
import
Vue from '
vue';
import App from './App.
vue';
import router from './router';
import api from './api';
Vue.config.productionTip = false;
Vue.prototype.$api = api;
new
Vue({
router,
render: h => h(App)
}).$mount('#app');
```
7. 在src目录下的App.
vue文件中添加路由占位符：
```
vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
```
8. 运行项目并访问登录
页面：
```shell
npm run serve
```
以上是使用
Vue脚手架编写登录
页面的步骤，希望对你有所帮助。
2654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
