第二步：加入选项卡Tab

因为选项卡中v-model参数和导航栏default-active功能一致，所以可以实现连接。
最终代码：
<template>
	<div class="mainheight">
		<el-container class="all-height">
			<!--顶栏容器-->
			<el-header class="header">
				<div class="navbar">
					<el-image style="height: 30px;width: 30px;" :src="url"></el-image>
					<span style="margin-left: 8px;">{{appname}}</span>
			</el-header>
			<!--主要区域容器-->
			<el-container class="all-height">
				<!--侧边栏容器-->
				<el-aside class="aside" width="240px">
					<div class="all-height">
						<!--@select="handleSelect" 导航监听-->
						<el-menu :default-active="String(activeNav)" class="all-height" unique-opened router>
							<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
								<!--顶级菜单-->
								<el-menu-item v-if="!item.leaf && !item.leafthree" :index="item.children[0].path">
									<i :class="item.children[0].meta.icon"></i>
									<span slot="title">{{item.children[0].meta.title}}</span>
								</el-menu-item>
								<!--二级菜单-->
								<el-submenu :index="index+''" v-if="item.leaf">
									<template slot="title">
										<i :class="item.meta.icon"></i>
										<span slot="title">{{item.meta.title}}</span>
									</template>
									<el-menu-item v-for="child in item.children" v-if="!item.hidden" :index="child.path"
										:key="child.path">
										<span slot="title">{{child.meta.title}}</span>
									</el-menu-item>
								</el-submenu>
							</template>
						</el-menu>
				</el-aside>
				<!--mian容器-->
				<el-main style="padding: 0;">
					<el-tabs v-model="TabsValue" type="border-card" @tab-remove="removeTab" @tab-click="tabClick">
						<el-tab-pane v-for="item in TabsList" :key="item.name" :label="item.title" :name="item.name"
							:closable="item.closable" :ref="item.ref">
							<span slot="label"><i :class="item.icon"></i> {{item.title}}</span>
							<component :is="item.content"></component>
						</el-tab-pane>
					</el-tabs>
				</el-main>
			</el-container>
		</el-container>
</template>
<script>
	import index from '@/components/home/index'
	import set from '../../../set.json'
	export default {
		data() {
			return {
				appname: set.name,
				url: "http://" + set.selsectip + ":" + set.port + "/public/logo.ico",
				TabsValue: 'index',
				TabsList: [{
					path: "/index", //path控制导航当前高亮
					title: '首页', //标题
					name: 'index', //用于显示当前名称
					icon: "el-icon-s-platform", //首页图标
					closable: false, //可否关闭
					ref: "tabs",
					content: index //路由显示页面地址
				TabsIndex: 1
		watch: {
			'$route': function(to) { //监听路由的变化，动态生成tabs
				let flag = true //判断是否需要新增页面
				let tabs = this.TabsList;
				const path = to.path
				// console.log(Object.keys(to.meta.title))
				if (Object.keys(to.meta).length != 0) {
					//console.log(tabs.name)
					for (let i = 0; i < tabs.length; i++) {
						if (tabs[i].name == to.meta.name) {
							this.TabsValue = tabs[i].name //定位到已打开页面
							//console.log("标签的名字：" + tabs[i].name)
							//console.log("菜单的名字：" + to.meta.name)
							flag = false
							break
					//新增页面
					if (flag) {
						//获得路由元数据的name和组件名
						const thisName = to.meta.name
						const thisTitle = to.meta.title
						const thisComp = to.meta.comp
						//console.log(thisComp)
						let newActiveIndex = ++this.TabsIndex + ''
						//console.log(newActiveIndex)
						//console.log("新增页面名字："+thisName)
						this.TabsList.push({
							path: to.path,
							title: thisTitle,
							name: thisName,
							closable: true,
							ref: 'tabs',
							content: thisComp
						this.TabsValue = thisName
		methods: {
			removeTab(targetName) {
				let tabs = this.TabsList;
				let activeName = this.TabsValue;
				if (activeName === targetName) {
					tabs.forEach((tab, index) => {
						if (tab.name === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								activeName = nextTab.name;
								this.tabClick(nextTab)
				this.TabsIndex = --this.TabsIndex + ''
				this.TabsValue = activeName;
				this.TabsList = tabs.filter(tab => tab.name !== targetName);
			tabClick(thisTab) {
				 * thisTab:当前选中的tabs的实例
				 * 通过当前选中tabs的实例获得当前实例的path 重新定位路由
				let val = this.TabsList.filter(item => thisTab.name == item.name)
				//console.log(val)
				this.$router.push({
					path: val[0].path
		computed: {
			setHeight() {
				return document.documentElement.clientHeight - 60
			setMainHeight() {
				return document.documentElement.clientHeight - 131
			activeNav() { //当前激活的导航
				return this.$route.path
		created() {
			console.log(this.$router.options.routes)
			this.$router.push({
				path: "/"
</script>
<style>
	.mainheight {
		position: fixed;
		height: 100%;
		width: 100%;
	.all-height {
		height: 100%;
	.header {
		width: 100%;
		box-sizing: border-box;
		border-bottom: 1px solid #ebebeb;
		background-color: #fff;
	.navbar {
		font-size: 14px;
		position: relative;
		height: 100%;
		/*padding: 0 20px;*/
		display: flex;
		justify-content: space-between;
		align-items: center;
	.navbar el-image {
		height: 30px;
		width: 30px;
	.aside {
		height: 100%;
		margin: 0px;
		padding: 0px;
	.el-tabs__item {
		font-size: 16px;
</style>
源码地址：https://download.csdn.net/download/Mib_vi/34452700
                    最终效果：第一步：根据ElementUi制作Layout布局和菜单栏在components下新建vue，layout.vue代码：&lt;template&gt;	&lt;div class="mainheight"&gt;		&lt;el-container class="all-height"&gt;			&lt;!--顶栏容器--&gt;			&lt;el-header class="header"&gt;				&lt;div class="navbar"&gt;.
淘宝的npm源
npm config set registry 'https://registry.npm.taobao.org'
npm config set ELECTRON_MIRROR='https://npm.taobao.org/mirrors/electron/'
或者使用安装依赖
npm run dev
npm run build
				电子-VUE-SQLITE3
 该项目是与sqlite3一起使用的电子战入门套件，该项目的灵感来自邮递员（  ）。 邮递员是最流行的应用之一，它可以与电子React。 我们在此项目中附加了一些流行的javascript脚本，这些脚本可立即使用。
 希望您可以轻松地用它构建一个精美的现代桌面应用程序。
渐进式JavaScript框架
使用Web技术创建本机应用程序的框架
 Vue-具有vue-cli脚手架的Electron＆Vue.js快速入门样板，
 使用BootstrapVue，您可以使用Vue.js在网络上构建响应式，移动优先和ARIA可访问的项目。
 世界上最受欢迎的前端开源工具包
使用BootstrapVue，您可以使用Vue.js在网络上构建响应式，移动优先和ARIA可访问的项目。
 -简单和最小线图标
 -Node.js的异步，非阻塞SQLite3绑定。
  -ESLin
node-gyp的github文档-
全局安装 npm install -g node-gyp
通过命令npm install --global --production windows-build-tools,但是要注意
的是必须以管理员的身份启动CMD窗口
安装完成之后执行一下命令
npm config set msvs_version 2017
其他安装方法……百度
项目的安装与使用
clone到本地
# clone到本地
git clone https://github.com/648702308/electron-vue-serialport.git
# 切换到项目目录
npm install`或者`cnp
     *    layui-tab 代表一个选项卡
     *    |-layui-tab-brief 代表简介风格的选项卡
     *    |-layui-tab-card 代表卡片风格的选项卡
     *       ...
<template>
  <el-tabs v-model="activeTab" type="card"
           @tab-remove="removeTab" @tab-click="tabClick">
    <el-tab-pane
1.使用 css 父级选择器来限制样式覆盖的范围, 不然会全局修改的 代码中最外层的样式 class="home" ,下面定义要覆盖的样式都要以.home为前缀.
2.把原来的边框修改成了圆角.
3.增加标签页之间的间距.
4.增加文字到标签页边框的距离
5.修改背景色, 你也可以自定义颜色
<template>
  <div class="home">
    <div styl
electron+vuecli3 实现设置打印机，静默打印小票功能
git clone https://github.com/sunniejs/electron-vue-print-demo.git
npm install
npm  run electron:serve
1.用户点击打印
2.查询本地 electron-store(用来向本地存储，读取数据)是否存打印机名称
3.已经设置，直接打印
4.没有设置，弹出设置打印机框
5.用户设置好确认后打印
有什么问题可以提 issue 或扫描微信二维码跟我联系，项目持续优化，加群获取最新更新消息
您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。
如果对你有帮助送我一颗小星星（づ￣3￣）づ╭:red_heart:～
				electron-vue-element-admin
基于最新的Node，最新的vue-element-admin和最新的Electron，并且package.json中依赖的package都使用最新的版本，让完整版的vue-element-admin成功跑在Electron中。
Workable electron-vue-element-admin with latest Electron, latest vue-element-admin and latest dependency packages. It also work well on MacOS/Windows both in developmemnt mode and production mode.
2020-04-25更新说明：
更新组件到最新版本：
Node v13.12.0
electron v8.2.3
vue v
# serve with hot reload at localhost:9080
npm run dev
# build electron application for production
npm run build
This project was generated with @ using . Documentation about the original structure can be found .
简单展示其中一个页面，具体详情请看
├── LICENSE
├── README.md
├── appveyor.yml
├── build
│   └── icons
├── dist
				菜单切换之前都是用菜单el-menu和el-tabs标签页拼接的，但是菜单没有的组件打不开了，所以改为根据路由打开内容，主要就是改为router-view
借鉴学习了这位大大的思路  指路链接
自己成功之后记录下
路由 router.js
const routes = [
    path: '/',
    name: 'home',
    component: () => import("../views/Home.vue"),////这里是核心： center作为容器组件，包含左右菜单