.

package.json

@@ -9,10 +9,11 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "element-ui": "^2.15.12",
     "sass-loader": "^13.2.0",
-    "view-design": "^4.7.0",
     "vue": "^2.6.14",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -1,15 +1,15 @@
 <template>
 	<div id="app">
-		<!-- <router-view></router-view> -->
-		<div class="sss">
-			121212
-		</div>
+		<router-view></router-view>
 	</div>
 </template>
 
 <script>
 	export default {
-		
+		data() {
+			return {
+			}
+		},
 	}
 </script>
 
@@ -18,10 +18,10 @@
 		font-family: Avenir, Helvetica, Arial, sans-serif;
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
-		text-align: center;
 		color: #2c3e50;
 	}
-	.sss{
-		color: red;
+	*{
+		margin: 0;
+		padding: 0;
 	}
 </style>

src/components/HelloWorld.vue

@@ -1,13 +0,0 @@
-<template>
-	<div class="hello">
-	</div>
-</template>
-
-<script>
-	export default {
-		
-	}
-</script>
-
-<style>
-</style>

src/components/tabs.vue

@@ -0,0 +1,43 @@
+<template>
+	<div>
+		<el-tabs editable type="card" :value="$route.path" @edit="handleTabsEdit" @tab-click="tabclick">
+			<el-tab-pane v-model="editableTabsValue" :key="item.name" v-for="(item, index) in $router.options.routes[1].children"
+				:label="item.meta.title" :name="item.path" @tab-remove="ssss">
+			</el-tab-pane>
+		</el-tabs>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				editableTabsValue: '',
+				TabsData: []
+			}
+		},
+		
+		methods:{
+			tabclick(e){
+				this.$router.push(e.$options.propsData.name) 
+			},
+			handleTabsEdit(e){
+				console.log(e)
+			},
+			ssss(e){
+				this.$router.push(e) 
+				console.log(e)
+			}
+		},
+		mounted() {
+			console.log('0')
+		},
+		destroyed(){
+			console.log('1')
+		}
+			
+	}
+</script>
+
+<style>
+</style>

src/main.js

@@ -1,13 +1,14 @@
 import Vue from 'vue'
 import App from './App.vue'
-// import router from './router';
-import iView from'view-design';
-Vue.use(iView)
-import'view-design/dist/styles/iview.css';
-
+import router from './router/index.js';
+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,
+	router,
+	store,
   render: h => h(App),
 }).$mount('#app')

src/router/index.js

@@ -4,18 +4,49 @@ Vue.use(VueRouter);
 
 const routes = [
 	{
-		path:'',
+		path:'/',
 		name:'Login',
 		meta: {
 			title: '冷链验证报告管理系统线上版本',
 		},
 		component: () => import('@/views/login/login.vue')
+	},
+	{
+		path:'/index',
+		name:'index',
+		meta: {
+			title: '首页',
+		},
+		component: () => import('@/views/layout/index/index.vue'),
+		children: [{
+			path: '/home',
+			name: 'home',
+			component: () => import('@/views/home/home.vue'),
+			meta: {
+				title: '工作首页',
+			},
+		},{
+			path: '/test',
+			name: 'test',
+			component: () => import('@/views/test/test.vue'),
+			meta: {
+				title: '测试服务',
+			},
+		},{
+			path: '/Contact',
+			name: 'Contact',
+			component: () => import('@/views/Contact/Contact.vue'),
+			meta: {
+				title: '联系我们',
+			},
+		},]
 	}
 ]
 
-const router = new VueRouter[{
+const router = new VueRouter({
 	mode: "history",//hash
-	routes
-}]
+	base: process.env.BASE_URL,
+	routes,
+});
 
 export default router;

src/store/index.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+	state: {
+		tabList: ['1','2','3','4']
+	},
+	mutations: {
+		// addTab: (state, tab) => {
+		// 	if (state.tabList.some(item => item.path === tab.path)) return
+		// 	state.tabList.push(tab)
+		// }
+	},
+	getters: {
+		// 获取tbsList
+		getTabs: (state) => {
+			return state.tabList.length
+		}
+	},
+	actions: {},
+	modules: {}
+})

src/views/Contact/Contact.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="login">
+		联系我们	<input v-model="vlaue" />
+	</div>
+</template>
+
+<script>
+	export default {
+		name:'Contact',
+		data() {
+			return{
+				vlaue:''
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/home/home.vue

@@ -0,0 +1,20 @@
+<template>
+	<div>
+		工作台
+		<input v-model="vlaue" />
+	</div>
+</template>
+
+<script>
+	export default {
+		name:'home',
+		data() {
+			return{
+				vlaue:''
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/layout/index/index.vue

@@ -0,0 +1,83 @@
+<template>
+	<div class="">
+		<el-container>
+			<el-aside width="180px">
+				<el-menu @select='select' :default-active="$route.path" router class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff">
+					<el-menu-item :index="item.path" v-for="(item,index) in $router.options.routes[1].children"
+						:key="index">
+						<i class="el-icon-setting"></i>
+						<span slot="title">{{item.meta.title}}</span>
+					</el-menu-item>
+				</el-menu>
+			</el-aside>
+			<el-main>
+				<el-header>
+					<tabs></tabs>
+				</el-header>
+				<el-main>
+					<keep-alive :include="includeTabs">
+						<router-view></router-view>
+					</keep-alive>
+				</el-main>
+			</el-main>
+		</el-container>
+	</div>
+</template>
+
+<script>
+	import tabs from '@/components/tabs'
+	export default {
+		components:{
+			tabs
+		},
+		computed:{
+		},
+		data() {
+			return {
+				includeTabs:localStorage.getItem('includeTabs'),
+			}
+		},
+		watch: {
+			'$route': {
+				handler(to, from){
+					console.log('打印',localStorage.getItem('includeTabs'))
+					if (this.includeTabs.indexOf(to.name)==-1) {//不存在
+						// var arr = localStorage.getItem('includeTabs')
+						// arr.push(to.name)
+						// localStorage.setItem('includeTabs',arr)
+					}
+				},
+				immediate:true
+			}
+		},
+		methods:{
+			select(e){
+				console.log('点击',e)
+				// this.$store.dispatch('getters')
+			}
+		},
+	}
+</script>
+
+<style>
+	.el-header {
+		background-color: #B3C0D1;
+		color: #333;
+		line-height: 60px;
+		padding: 0;
+	}
+
+	.el-aside {
+		background-color: #D3DCE6;
+		color: #333;
+		text-align: center;
+		line-height: 200px;
+	}
+
+	.el-main {
+		background-color: #E9EEF3;
+		color: #333;
+		line-height: 160px;
+		padding: 0;
+	}
+</style>

src/views/login/login.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="login">
-		登录
+		<el-button type="success">成功按钮</el-button>
+		<router-link to="/home">登录</router-link>
 	</div>
 </template>
 

src/views/test/test.vue

@@ -0,0 +1,22 @@
+<template>
+	<div class="login">
+		测试页<input v-model="vlaue" />
+	</div>
+</template>
+
+<script>
+	export default {
+		name:'test',
+		data() {
+			return{
+				vlaue:''
+			}
+		},
+		mounted() {
+			console.log('打印',this.$store)
+		},
+	}
+</script>
+
+<style>
+</style>