vue-cli实现登录
使用 Vue CLI 实现登录功能
安装 Vue CLI 并创建项目
确保已安装 Node.js，运行以下命令安装 Vue CLI：
npm install -g @vue/cli创建新项目：
vue create vue-login-demo选择默认配置或手动配置（推荐包含 Vue Router 和 Vuex）。
配置路由
在 src/router/index.js 中设置登录路由：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Home from '@/views/Home.vue'
Vue.use(Router)
const router = new Router({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{ path: '/home', component: Home, meta: { requiresAuth: true } }
]
})创建登录页面
在 src/views/Login.vue 中编写登录表单：
<template>
<div>
<h2>登录</h2>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleLogin() {
this.$store.dispatch('login', {
username: this.username,
password: this.password
}).then(() => {
this.$router.push('/home')
})
}
}
}
</script>使用 Vuex 管理状态
在 src/store/index.js 中配置登录逻辑：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isAuthenticated: false,
user: null
},
mutations: {
SET_AUTH(state, payload) {
state.isAuthenticated = true
state.user = payload.user
}
},
actions: {
login({ commit }, credentials) {
return new Promise((resolve) => {
// 模拟 API 调用
setTimeout(() => {
commit('SET_AUTH', { user: credentials.username })
localStorage.setItem('token', 'fake-token')
resolve()
}, 500)
})
}
}
})路由守卫验证
在 src/router/index.js 中添加全局前置守卫：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})后端集成（可选）
如需连接真实后端，替换 login action 中的逻辑为实际 API 调用：
actions: {
async login({ commit }, credentials) {
const response = await axios.post('/api/login', credentials)
commit('SET_AUTH', { user: response.data.user })
localStorage.setItem('token', response.data.token)
}
}样式优化
通过 CSS 或 UI 库（如 Element UI、Vuetify）美化登录页面。例如安装 Element UI：
npm install element-ui在 main.js 中引入：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)测试运行
启动开发服务器：
npm run serve访问 http://localhost:8080 测试登录流程。
