初始化

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.env.dev

@@ -0,0 +1,4 @@
+NODE_ENV = 'production'
+VUE_APP_BASE_URL = http://101.201.121.115:8093/
+VUE_APP_LOGIN_TITLE = 沈阳领新智科智能信息系统有限公司
+VUE_APP_LOGIN_LOGO = ../assets/img/logo.png

.env.prod

@@ -0,0 +1,4 @@
+NODE_ENV = 'production'
+VUE_APP_BASE_URL = http://101.201.121.115:8093/
+VUE_APP_LOGIN_TITLE = 沈阳领新智科智能信息系统有限公司
+VUE_APP_LOGIN_LOGO = ../assets/img/logo.png

.env.test

@@ -0,0 +1,4 @@
+NODE_ENV = 'production'
+VUE_APP_BASE_URL = http://101.201.121.115:8093/
+VUE_APP_LOGIN_TITLE = 沈阳领新智科智能信息系统有限公司
+VUE_APP_LOGIN_LOGO = ../assets/img/logo.png

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    parser: "babel-eslint",
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};

README.md

@@ -1,4 +1,4 @@
-# myapp
+# standard-project
 
 ## Project setup
 ```

babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

package.json

@@ -1,42 +1,34 @@
 {
-  "name": "myapp",
+  "name": "standard-project",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "vue-cli-service serve --mode dev",
+    "build-test": "vue-cli-service build --mode test",
+    "build-prod": "vue-cli-service build --mode prod",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "element-plus": "^1.0.2-beta.48",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.0.0",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "prettier": "^2.2.1"
+  }
 }

src/App.vue

@@ -1,26 +1,27 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <router-view />
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+export default {};
 </script>
 
-<style>
-#app {
+<style lang="less">
+* {
+  margin: 0;
+  padding: 0;
+  font-size: 12px;
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+#app {
+  width: 100%;
+  height: 100%;
 }
 </style>

src/components/Header.vue

@@ -0,0 +1,89 @@
+<template>
+  <div id="title-wrap">
+    <img :src="logo" />
+    <p>{{ title }}</p>
+    <el-avatar shape="square" :size="32" fit="contain" :src="userLogo" />
+    <el-badge is-dot class="item">
+      <el-button
+        class="share-button"
+        icon="el-icon-message-solid"
+        type="primary"
+      ></el-button>
+    </el-badge>
+    <el-button
+      class="question-button"
+      icon="el-icon-question"
+      type="primary"
+    ></el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HelloWorld",
+  data() {
+    return {
+      logo: require(process.env["VUE_APP_LOGIN_LOGO"]),
+      title: process.env["VUE_APP_LOGIN_TITLE"],
+      userLogo: require("../assets/img/logo.png"),
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+#title-wrap {
+  img {
+    float: left;
+    width: 25px;
+    height: 25px;
+    margin-top: 10px;
+    margin-left: 53px;
+  }
+
+  p {
+    float: left;
+    margin-left: 12px;
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 48px;
+    text-shadow: 0px -1px 0px #215c85;
+  }
+  .el-avatar {
+    float: right;
+    margin-top: 8px;
+    margin-right: 24px;
+  }
+  .item {
+    float: right;
+    height: 30px;
+    margin-top: 4px;
+    margin-right: 30px;
+    .el-button--primary {
+      border: none;
+      background: none;
+      padding: 0;
+      /deep/ .el-icon-message-solid::before {
+        font-size: 22px;
+      }
+    }
+    /deep/ sup {
+      background: #ce2b2b;
+      top: 13px;
+      right: 9px;
+      border: none;
+    }
+  }
+  .question-button {
+    float: right;
+    border: none;
+    background: none;
+    padding-right: 22px;
+    /deep/ .el-icon-question::before {
+      font-size: 22px;
+    }
+  }
+}
+</style>

src/components/HelloWorld.vue

@@ -1,58 +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-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>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Layout.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="content-wrap">
+    <div id="content-title"><Header /></div>
+    <div id="content-nav-menu"><NavMenu /></div>
+    <div id="content-box">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from "./Header.vue";
+import NavMenu from "./NavMenu.vue";
+export default {
+  name: "Layout",
+  components: {
+    Header,
+    NavMenu,
+  },
+};
+</script>
+
+<style scoped lang="less">
+#content-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 48px;
+  padding-left: 250px;
+  background: #f3f3f3;
+  #content-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 48px;
+    line-height: 48px;
+    background: linear-gradient(180deg, #67a9d9 0%, #5ea4d7 42%, #3478a9 100%);
+  }
+  #content-nav-menu {
+    position: absolute;
+    top: 48px;
+    left: 0;
+    width: 250px;
+    height: calc(100% - 48px);
+    background: #eeeeee;
+    box-sizing: border-box;
+    padding-top: 12px;
+    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+  }
+  #content-box {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/NavMenu.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="sidebar">
+    <el-menu
+      :uniqueOpened="true"
+      default-active="home"
+      class="el-menu-vertical-demo"
+      router
+    >
+      <template v-for="item in menus" :key="item.name">
+        <el-menu-item :index="item.name">
+          <i :class="item.icon"></i>
+          <template #title>{{ item.title }}</template>
+        </el-menu-item>
+      </template>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import menus from "../router/routers";
+export default {
+  data() {
+    return {
+      menus: menus,
+    };
+  },
+  computed: {
+    onRoutes() {
+      return this.$route.path.replace("/", "");
+    },
+    collapse() {
+      return this.$store.state.collapse;
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.sidebar {
+  .el-menu-item {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #3d3d42;
+    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    background: linear-gradient(360deg, #eaeaea 0%, #ececec 55%, #f9f9f9 100%);
+    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25), 0px 1px 0px 0px #cccccc,
+      0px 1px 0px 0px #ffffff;
+    opacity: 0.8;
+
+    i,
+    i::before {
+      width: 22px;
+      height: 22px;
+      color: #528db8;
+      display: inline-block;
+    }
+  }
+}
+</style>

src/main.js

@@ -1,4 +1,8 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import ElementPlus from "element-plus";
+import "element-plus/lib/theme-chalk/index.css";
 
-createApp(App).mount('#app')
+createApp(App).use(store).use(router).use(ElementPlus).mount("#app");

src/router/index.js

@@ -0,0 +1,30 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import Layout from "../components/Layout.vue";
+import Routers from "./routers.js";
+const routes = [
+  {
+    path: "/",
+    redirect: "/home",
+  },
+  {
+    path: "/",
+    name: "Layout",
+    component: Layout,
+    children: Routers,
+  },
+  {
+    path: "/404",
+    name: "404",
+    // 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/404.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+export default router;

src/router/routers.js

@@ -0,0 +1,32 @@
+const routes = [
+  {
+    icon: "el-icon-s-platform",
+    path: "/home",
+    name: "home",
+    title: "排程",
+    component: () => import("../views/Home.vue"),
+  },
+  {
+    icon: "el-icon-setting",
+    path: "/ablout",
+    name: "ablout",
+    title: "ETL维护",
+    component: () => import("../views/About.vue"),
+  },
+  {
+    icon: "el-icon-setting",
+    path: "/ablouta",
+    name: "ablouta",
+    title: "EODS",
+    component: () => import("../views/About.vue"),
+  },
+  {
+    icon: "el-icon-setting",
+    path: "/abloutb",
+    name: "abloutb",
+    title: "EODS维护",
+    component: () => import("../views/About.vue"),
+  },
+];
+
+export default routes;

src/store/index.js

@@ -0,0 +1,8 @@
+import { createStore } from "vuex";
+
+export default createStore({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {},
+});

src/views/404.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>404页面</div>
+</template>
+
+<script></script>
+
+<style></style>

src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

src/views/Home.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/img/logo.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Home",
+};
+</script>