好的，下面是一个简单的示例代码，其中包含了您提到的要求：
1. 在终端中
使用 Vue CLI 创建一个新的
Vue 项目，并安装 Element UI、
Vue Router、
Vuex：
```
vue create my-project
cd my-project
npm install element-ui
vue-router
vuex
```
2. 在 `src` 目录下创建 `views` 目录，并在其中创建 `
Login.
vue` 和 `
Main.
vue` 两个组件。`
Login.
vue` 组件包含一个登录表单，`
Main.
vue` 组件包含一个欢迎信息。
3. 在 `router` 目录下创建 `index.js` 文件，并配置路由，将 `/
login` 路径指向 `
Login.
vue` 组件，将 `/
main` 路径指向 `
Main.
vue` 组件。
```javascript
import
Vue from '
vue'
import Router from '
vue-router'
import
Login from '@/views/
Login.
vue'
import
Main from '@/views/
Main.
vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/
login',
name: '
login',
component:
Login
},
{
path: '/
main',
name: '
main',
component:
Main
},
{
path: '*',
redirect: '/
login'
}
]
})
```
4. 在 `store` 目录下创建 `index.js` 文件，并配置
Vuex，定义 `state`、`getters`、`mutations` 和 `actions`，用来存储和修改
用户名和密码。
```javascript
import
Vue from '
vue'
import
Vuex from '
vuex'
Vue.use(
Vuex)
export default new
Vuex.Store({
state: {
username: '',
password: ''
},
getters: {
getUsername: state => state.username,
getPassword: state => state.password
},
mutations: {
setUsername: (state, username) => {
state.username = username
},
setPassword: (state, password) => {
state.password = password
}
},
actions: {
setUsername: ({commit}, username) => {
commit('setUsername', username)
},
setPassword: ({commit}, password) => {
commit('setPassword', password)
}
}
})
```
5. 在 `
main.js` 中导入 Element UI、
Vue Router、
Vuex，并创建
Vue 实例，将其挂载到 `#app` 元素上。
```javascript
import
Vue from '
vue'
import App from './App.
vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
new
Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
```
6. 在 `
Login.
vue` 组件中，通过 `v-model` 双向绑定
用户名和密码，通过 `this.$store.dispatch` 触发
Vuex 的 `setUsername` 和 `setPassword` 方法，将
用户名和密码存储到
Vuex 中。同时，在点击登录按钮时，通过 `$router.push` 方法跳转到 `/
main` 路径。
```html
<template>
<div class="
login">
<h1>登录</h1>
<el-form>
<el-form-item label="
用户名">
<el-input v-model="username" />
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="password" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="
login">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
this.$store.dispatch('setUsername', this.username)
this.$store.dispatch('setPassword', this.password)
this.$router.push('/
main')
}
}
}
</script>
```
7. 在 `
Main.
vue` 组件中，通过 `$store.getters`
获取用户名和密码，并显示欢迎信息。
```html
<template>
<div class="
main">
<h1>欢迎您，{{ username }}</h1>
</div>
</template>
<script>
export default {
computed: {
username() {
return this.$store.getters.getUsername
},
password() {
return this.$store.getters.getPassword
}
}
}
</script>
```
8. 在 `router/index.js` 中
使用全局钩子函数 `beforeEach`，判断用户是否已经登录。如果已经登录，则允许访问 `/
main` 路径，否则跳转到 `/
login` 路径。
```javascript
router.beforeEach((to, from, next) => {
const isLoggedIn = store.getters.getUsername !== '' && store.getters.getPassword !== ''
if (to.path === '/
login' || isLoggedIn) {
next()
} else {
next('/
login')
}
})
```
这样，一个包含 Element UI、
Vue Router、
Vuex 的登录界面就完成了。用户输入
用户名和密码后，点击登录按钮，将会跳转到主界面，并显示欢迎信息。如果用户未登录，则无法访问主界面。
718
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
