Página inicial Explorar Ajuda
Registrar Entrar
panhui
/
IMT-PC
1
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

基础项目

panhui 5 anos atrás
pai
d7b93ada1e
commit
b9e864a82c
8 arquivos alterados com 134 adições e 215 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 25 15
      public/index.html
  2. 19 26
      src/App.vue
  3. 77 0
      src/components/Header.vue
  4. 0 154
      src/components/HelloWorld.vue
  5. 1 1
      src/locales/en.json
  6. 6 7
      src/router/index.ts
  7. 3 3
      src/theme/index.css
  8. 3 9
      src/views/Home.vue

+ 25 - 15
public/index.html
Ver arquivo 

@@ -1,17 +1,27 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-  <head>
 
-    <meta charset="utf-8">
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-    <title><%= htmlWebpackPlugin.options.title %></title>
 
-  </head>
 
-  <body>
 
-    <noscript>
 
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
-    </noscript>
 
-    <div id="app"></div>
 
-    <!-- built files will be auto injected -->
 
-  </body>
 
-</html>
 
+
 
+<head>
 
+	<meta charset="utf-8">
 
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+	<meta name="viewport" content="width=device-width,initial-scale=1.0">
 
+	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
+	<title><%= htmlWebpackPlugin.options.title %></title>
 
+	<style>
 
+		* {
 
+			margin: 0;
 
+			padding: 0;
 
+		}
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+	<noscript>
 
+		<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
 
+			Please enable it to continue.</strong>
 
+	</noscript>
 
+	<div id="app"></div>
 
+	<!-- built files will be auto injected -->
 
+</body>
 
+
 
+</html>

+ 19 - 26
src/App.vue
Ver arquivo 

@@ -1,32 +1,25 @@
 
 <template>
 
-    <div id="app">
 
-        <div id="nav">
 
-            <router-link to="/">{{ $t('shou-ye') }}</router-link> |
 
-            <router-link to="/about">About</router-link>
 
-        </div>
 
-        <router-view />
 
-    </div>
 
+    <el-container id="app">
 
+        <el-aside width="0"> </el-aside>
 
+        <el-container>
 
+            <app-header />
 
+            <router-view class="el-main" />
 
+            <el-footer height="300px">
 
+                尾巴
 
+            </el-footer>
 
+        </el-container>
 
+    </el-container>
 
 </template>
 
+<script>
 
+import AppHeader from './components/Header';
 
+export default {
 
+    components: { AppHeader }
 
+};
 
+</script>
 
 
-<style lang="less">
 
+<style lang="less" scoped>
 
 #app {
 
-    font-family: Avenir, Helvetica, Arial, sans-serif;
 
-    -webkit-font-smoothing: antialiased;
 
-    -moz-osx-font-smoothing: grayscale;
 
-    text-align: center;
 
-    color: #2c3e50;
 
-}
 
-
 
-#nav {
 
-    padding: 30px;
 
-
 
-    a {
 
-        font-weight: bold;
 
-        color: #2c3e50;
 
-
 
-        &.router-link-exact-active {
 
-            color: #42b983;
 
-        }
 
-    }
 
+    height: 100vh;
 
+    width: 100vw;
 
 }
 
 </style>

+ 77 - 0
src/components/Header.vue
Ver arquivo 

@@ -0,0 +1,77 @@
 
+<template>
 
+    <el-header height="90px" class="header">
 
+        <el-row type="flex" :gutter="20" class="main" align="middle">
 
+            <el-col :span="4">LOGO</el-col>
 
+            <el-col :span="20">
 
+                <el-menu
 
+                    :default-active="activeIndex"
 
+                    class="menu"
 
+                    mode="horizontal"
 
+                    @select="handleSelect"
 
+                >
 
+                    <el-menu-item index="1">{{ $t('shou-ye') }}</el-menu-item>
 
+                    <el-submenu index="2">
 
+                        <template slot="title">我的工作台</template>
 
+                        <el-menu-item index="2-1">选项1</el-menu-item>
 
+                        <el-menu-item index="2-2">选项2</el-menu-item>
 
+                        <el-menu-item index="2-3">选项3</el-menu-item>
 
+                        <el-submenu index="2-4">
 
+                            <template slot="title">选项4</template>
 
+                            <el-menu-item index="2-4-1">选项1</el-menu-item>
 
+                            <el-menu-item index="2-4-2">选项2</el-menu-item>
 
+                            <el-menu-item index="2-4-3">选项3</el-menu-item>
 
+                        </el-submenu>
 
+                    </el-submenu>
 
+                    <el-menu-item index="3" disabled>消息中心</el-menu-item>
 
+                    <el-menu-item index="4"
 
+                        ><a href="https://www.ele.me" target="_blank"
 
+                            >订单管理</a
 
+                        ></el-menu-item
 
+                    >
 
+                </el-menu>
 
+                <el-dropdown
 
+                    split-button
 
+                    type="primary"
 
+                    @command="changeLocales"
 
+                >
 
+                    {{ $i18n.locale == 'en' ? '英文' : '中文' }}
 
+                    <el-dropdown-menu slot="dropdown">
 
+                        <el-dropdown-item command="en">英文</el-dropdown-item>
 
+                        <el-dropdown-item command="zh">中文</el-dropdown-item>
 
+                    </el-dropdown-menu>
 
+                </el-dropdown>
 
+            </el-col>
 
+        </el-row>
 
+    </el-header>
 
+</template>
 
+<script lang="ts">
 
+import { Component, Vue } from 'vue-property-decorator';
 
+
 
+@Component
 
+export default class Header extends Vue {
 
+    activeIndex = '1';
 
+
 
+    handleSelect(e) {
 
+        console.log(e);
 
+    }
 
+
 
+    changeLocales(lang) {
 
+        this.$i18n.locale = lang;
 
+    }
 
+}
 
+</script>
 
+<style lang="less" scoped>
 
+.header {
 
+    display: flex;
 
+    justify-content: center;
 
+}
 
+.main {
 
+    max-width: 80%;
 
+    flex: 1;
 
+    min-width: 900px;
 
+}
 
+
 
+.el-menu.el-menu--horizontal.menu {
 
+    border-bottom-width: 0;
 
+}
 
+</style>

+ 0 - 154
src/components/HelloWorld.vue
Ver arquivo 

@@ -1,154 +0,0 @@
 
-<template>
 
-    <div class="hello">
 
-        <h1>{{ msg }}</h1>
 
-        <p>
 
-            For a guide and recipes on how to configure / customize this
 
-            project,<br />
 
-            check out the
 
-            <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
 
-                >vue-cli documentation</a
 
-            >.
 
-        </p>
 
-        <h3>Installed CLI Plugins</h3>
 
-        <ul>
 
-            <li>
 
-                <a
 
-                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
 
-                    target="_blank"
 
-                    rel="noopener"
 
-                    >babel</a
 
-                >
 
-            </li>
 
-            <li>
 
-                <a
 
-                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
 
-                    target="_blank"
 
-                    rel="noopener"
 
-                    >typescript</a
 
-                >
 
-            </li>
 
-            <li>
 
-                <a
 
-                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
 
-                    target="_blank"
 
-                    rel="noopener"
 
-                    >router</a
 
-                >
 
-            </li>
 
-            <li>
 
-                <a
 
-                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
 
-                    target="_blank"
 
-                    rel="noopener"
 
-                    >vuex</a
 
-                >
 
-            </li>
 
-            <li>
 
-                <a
 
-                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
 
-                    target="_blank"
 
-                    rel="noopener"
 
-                    >eslint</a
 
-                >
 
-            </li>
 
-        </ul>
 
-        <h3>Essential Links</h3>
 
-        <ul>
 
-            <li>
 
-                <a href="https://vuejs.org" target="_blank" rel="noopener"
 
-                    >Core Docs</a
 
-                >
 
-            </li>
 
-            <li>
 
-                <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
 
-                    >Forum</a
 
-                >
 
-            </li>
 
-            <li>
 
-                <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
 
-                    >Community Chat</a
 
-                >
 
-            </li>
 
-            <li>
 
-                <a
 
-                    href="https://twitter.com/vuejs"
 
-                    target="_blank"
 
-                    rel="noopener"
 
-                    >Twitter</a
 
-                >
 
-            </li>
 
-            <li>
 
-                <a href="https://news.vuejs.org" target="_blank" rel="noopener"
 
-                    >News</a
 
-                >
 
-            </li>
 
-        </ul>
 
-        <h3>Ecosystem</h3>
 
-        <ul>
 
-            <li>
 
-                <a
 
-                    href="https://router.vuejs.org"
 
-                    target="_blank"
 
-                    rel="noopener"
 
-                    >vue-router</a
 
-                >
 
-            </li>
 
-            <li>
 
-                <a href="https://vuex.vuejs.org" target="_blank" rel="noopener"
 
-                    >vuex</a
 
-                >
 
-            </li>
 
-            <li>
 
-                <a
 
-                    href="https://github.com/vuejs/vue-devtools#vue-devtools"
 
-                    target="_blank"
 
-                    rel="noopener"
 
-                    >vue-devtools</a
 
-                >
 
-            </li>
 
-            <li>
 
-                <a
 
-                    href="https://vue-loader.vuejs.org"
 
-                    target="_blank"
 
-                    rel="noopener"
 
-                    >vue-loader</a
 
-                >
 
-            </li>
 
-            <li>
 
-                <a
 
-                    href="https://github.com/vuejs/awesome-vue"
 
-                    target="_blank"
 
-                    rel="noopener"
 
-                    >awesome-vue</a
 
-                >
 
-            </li>
 
-        </ul>
 
-    </div>
 
-</template>
 
-
 
-<script lang="ts">
 
-import { Component, Prop, Vue } from 'vue-property-decorator';
 
-
 
-@Component
 
-export default class HelloWorld extends Vue {
 
-    @Prop() private msg!: string;
 
-}
 
-</script>
 
-
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 
-<style scoped lang="less">
 
-h3 {
 
-    margin: 40px 0 0;
 
-}
 
-ul {
 
-    list-style-type: none;
 
-    padding: 0;
 
-}
 
-li {
 
-    display: inline-block;
 
-    margin: 0 10px;
 
-}
 
-a {
 
-    color: #42b983;
 
-}
 
-</style>

+ 1 - 1
src/locales/en.json
Ver arquivo 

@@ -1,3 +1,3 @@
 
 {
 
-  "shou-ye": "Home"
 
+    "shou-ye": "Home"
 
 }

+ 6 - 7
src/router/index.ts
Ver arquivo 

@@ -1,6 +1,5 @@
 
 import Vue from 'vue';
 
 import VueRouter, { RouteConfig } from 'vue-router';
 
-import Home from '../views/Home.vue';
 
 
 Vue.use(VueRouter);
 
 
@@ -8,16 +7,12 @@ const routes: Array<RouteConfig> = [
 
     {
 
         path: '/',
 
         name: 'Home',
 
-        component: Home
 
+        component: () => import('../views/Home.vue')
 
     },
 
     {
 
         path: '/about',
 
         name: 'About',
 
-        // route level code-splitting
 
-        // this generates a separate chunk (about.[hash].js) for this route
 
-        // which is lazy-loaded when the route is visited.
 
-        component: () =>
 
-            import(/* webpackChunkName: "about" */ '../views/About.vue')
 
+        component: () => import('../views/About.vue')
 
     }
 
 ];
 
 
@@ -27,4 +22,8 @@ const router = new VueRouter({
 
     routes
 
 });
 
 
+router.beforeEach((to, from, next) => {
 
+    next();
 
+});
 
+
 
 export default router;

+ 3 - 3
src/theme/index.css
Ver arquivo 

@@ -11058,7 +11058,7 @@
 
     flex-direction: column;

 }

 .el-header {

-    padding: 0 20px;

+    /* padding: 0 20px; */

     box-sizing: border-box;

     -ms-flex-negative: 0;

     flex-shrink: 0;

@@ -11082,10 +11082,10 @@
 
     flex-basis: auto;

     overflow: auto;

     box-sizing: border-box;

-    padding: 20px;

+    /* padding: 20px; */

 }

 .el-footer {

-    padding: 0 20px;

+    /* padding: 0 20px; */

     box-sizing: border-box;

     -ms-flex-negative: 0;

     flex-shrink: 0;

+ 3 - 9
src/views/Home.vue
Ver arquivo 

@@ -1,20 +1,14 @@
 
 <template>
 
     <div class="home">
 
-        <el-button @click="changeLocales">默认按钮</el-button>
 
-        <img alt="Vue logo" src="../assets/logo.png" />
 
-        <HelloWorld msg="Welcome to Your Vue.js App" />
 
+        <el-button>默认按钮</el-button>
 
+        <el-button type="primary">11</el-button>
 
     </div>
 
 </template>
 
 
 <script>
 
-// @ is an alias to /src
 
-import HelloWorld from '@/components/HelloWorld.vue';
 
-
 
 export default {
 
     name: 'Home',
 
-    components: {
 
-        HelloWorld
 
-    },
 
+    components: {},
 
     methods: {}
 
 };
 
 </script>