以下是一个使用Electron、Vue 3和Element Plus创建带有登录功能和侧边栏菜单的基本模板的简化示例。
首先，确保你已经安装了Node.js和Vue CLI。
- 创建一个新的Vue项目：
vue create electron-vue3-element-app- 进入项目目录：
cd electron-vue3-element-app- 添加Electron：
vue add electron-builder- 安装Element Plus：
npm install element-plus --save- 在
src/components下创建Login.vue和SideMenu.vue组件。
Login.vue:
<template>
<el-form>
<el-form-item>
<el-input v-model="username" placeholder="Username"></el-input>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="password" placeholder="Password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">Login</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
// 这里应该是验证用户名和密码的逻辑
this.$router.push('/home');
}
}
};
</script>SideMenu.vue:
<template>
<el-menu>
<el-menu-item index="1">
<i class="el-icon-location"></i>
<span slot="title">Home</span>
</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">About</span>
</el-menu-item>
<!-- 更多菜单项 -->
</el-menu>
</template>
<script>
export default {
// 菜单逻辑
};
</script>- 在
src/router/index.js中配置路由：
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
import SideMenu from '../components/SideMenu.vue'
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{ path: '/', component: Login },
{ path: '/login', component: Login },
{
path: '/home',
component: Home,
children: [
{ path: 'sidemenu', component: SideMenu }
]
},
// 更多路由
]
})
export default router- 在
src/App.vue中设置基本布局：
<template>
<div id="app">
<router-view v-if="isAuthenticated" />
<login-form v-else />
</div>
</template>
<script>
import LoginForm from './components/Login.vue'
export default {
components: {
LoginForm
},
data() {
return {
isAuthenticated: false
}
}
}
</script>- 在
src/main.js中引入Element Plus：
i