feat 初始化项目

3 years ago · b253832bd0
24 changed files with 30859 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -1,3 +1,24 @@
 # zelda-frontend

-frontend for zelda
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,58 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "naive-ui": "^2.24.1",
+    "vue": "^3.0.0",
+    "vue-class-component": "^8.0.0-0",
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~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",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.0.0",
+    "prettier": "^2.2.1",
+    "typescript": "~4.1.5"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended",
+      "@vue/typescript/recommended",
+      "@vue/prettier",
+      "@vue/prettier/@typescript-eslint"
+    ],
+    "parserOptions": {
+      "ecmaVersion": 2020
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <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>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,52 @@
+<template>
+  <n-layout>
+    <n-layout-header>
+      <Menu :menu="menu" :mode="mode"></Menu>
+    </n-layout-header>
+    <n-layout-content> <router-view /></n-layout-content>
+  </n-layout>
+</template>
+<script lang="ts">
+import { NLayoutHeader, NLayoutContent, NLayout } from "naive-ui";
+import { TopMenu } from "@/libs/menu.ts";
+import Menu from "@/components/Menu.vue"; // @ is an alias to /src
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {
+    Menu,
+    NLayoutHeader,
+    NLayoutContent,
+    NLayout,
+  },
+  data() {
+    return {
+      menu: TopMenu,
+      mode: "horizontal",
+    };
+  },
+})
+export default class App extends Vue {}
+</script>
+<style>
+#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;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,36 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  props: {
+    msg: String,
+  },
+})
+export default class HelloWorld extends Vue {
+  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>
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@ -0,0 +1,41 @@
+<template>
+  <div>
+    <n-menu
+      :options="menu"
+      v-model:value="activeKey"
+      :mode="mode"
+      class="menu"
+    ></n-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import { NMenu } from "naive-ui";
+import { ref } from "vue";
+@Options({
+  props: {
+    menu: Array,
+    mode: String,
+  },
+  components: {
+    NMenu,
+  },
+  data() {
+    return {
+      activeKey: ref(null),
+    };
+  },
+})
+export default class Menu extends Vue {
+  menu!: [];
+  mode!: "horizontal";
+}
+</script>
+
+<style scoped>
+.menu {
+  text-align: left !important;
+  /* font: 1.5em sans-serif; */
+}
+</style>
--- a/src/libs/menu.ts
+++ b/src/libs/menu.ts
@ -0,0 +1,93 @@
+import { h } from "vue";
+import { RouterLink } from "vue-router";
+
+export const TopMenu = [
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: "Home",
+            params: {
+              lang: "zh-CN",
+            },
+          },
+        },
+        { default: () => "Zelda" }
+      ),
+    key: "home",
+    // icon: renderIcon(HomeIcon)
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: "Kubernetes",
+            params: {
+              lang: "zh-CN",
+            },
+          },
+        },
+        { default: () => "Kubernetes" }
+      ),
+    key: "kubernetes",
+    // icon: renderIcon(WorkIcon)
+  },
+];
+
+export const ZeldaSideMenu = [
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: "Home",
+            params: {
+              lang: "zh-CN",
+            },
+          },
+        },
+        { default: () => "概览" }
+      ),
+    key: "home",
+    // icon: renderIcon(HomeIcon)
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: "ZProject",
+            params: {
+              lang: "zh-CN",
+            },
+          },
+        },
+        { default: () => "项目" }
+      ),
+    key: "zproject",
+    // icon: renderIcon(WorkIcon)
+  },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: "ZService",
+            params: {
+              lang: "zh-CN",
+            },
+          },
+        },
+        { default: () => "服务" }
+      ),
+    key: "zservice",
+    // icon: renderIcon(WorkIcon)
+  },
+];
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,15 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import {
+    // create naive ui
+    create,
+    // component
+    NButton
+} from 'naive-ui'
+
+const naive = create({
+    components: [NButton]
+})
+createApp(App).use(store).use(router).use(naive).mount("#app");
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,60 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import Home from "../views/Home.vue";
+//zelda resource
+import ZGroup from "../views/zelda/ZGroup.vue";
+import ZService from "../views/zelda/ZService.vue";
+import ZProject from "../views/zelda/ZProject.vue";
+
+//kubernetes resource
+import Kubernetes from "../views/Kubernetes.vue";
+//
+import Login from "@/views/Login.vue";
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+  },
+  {
+    path: "/resource",
+    name: "Resource",
+    component: Home,
+    children: [
+      { path: "/resource/zservice", name: "ZService", component: ZService },
+      { path: "/resource/zgroup", name: "ZGroup", component: ZGroup },
+      { path: "/resource/zproject", name: "ZProject", component: ZProject },
+    ],
+  },
+  {
+    path: "/kubernetes",
+    name: "Kubernetes",
+    component: Kubernetes,
+    children: [
+      { path: "/zservice", name: "Deployment", component: ZService },
+      { path: "/zgroup", name: "Pod", component: ZGroup },
+      { path: "/zproject", name: "Service", component: ZProject },
+    ],
+  },
+  {
+    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"),
+  },
+  {
+    path: "/login",
+    name: "Login",
+    component: Login,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -0,0 +1,10 @@
+import { createStore } from "vuex";
+
+export default createStore({
+  state: {
+    
+  },
+  mutations: {},
+  actions: {},
+  modules: {},
+});
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -0,0 +1,32 @@
+<template>
+  <div class="home">
+    <n-layout>
+      <n-layout has-sider>
+        <n-layout-sider><Menu :menu="menu"></Menu></n-layout-sider>
+        <n-layout-content><router-view /></n-layout-content>
+      </n-layout>
+    </n-layout>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import { NLayout, NLayoutSider, NLayoutContent } from "naive-ui";
+import Menu from "@/components/Menu.vue";
+import { ZeldaSideMenu } from "@/libs/menu.ts";
+
+@Options({
+  components: {
+    NLayout,
+    NLayoutSider,
+    NLayoutContent,
+    Menu,
+  },
+  data() {
+    return {
+      menu: ZeldaSideMenu,
+    };
+  },
+})
+export default class Home extends Vue {}
+</script>
--- a/src/views/Kubernetes.vue
+++ b/src/views/Kubernetes.vue
@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h3>kubernetes</h3>
+  </div>
+</template>
+
+<script lang="ts">
+// import { defineComponent } from "vue";
+import { Options, Vue } from "vue-class-component";
+
+@Options({})
+export default class Kubernetes extends Vue {}
+</script>
+<style></style>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@ -0,0 +1,20 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import { NLayout, NLayoutSider, NLayoutContent } from "naive-ui";
+
+@Options({
+  components: {
+    NLayout,
+    NLayoutSider,
+    NLayoutContent,
+  },
+  data() {
+    return {};
+  },
+})
+export default class Login extends Vue {}
+</script>
--- a/src/views/zelda/ZGroup.vue
+++ b/src/views/zelda/ZGroup.vue
@ -0,0 +1,14 @@
+<template>
+  <div id="zgroup">
+    <h3>zgroup</h3>
+  </div>
+</template>
+
+<script lang="ts">
+// import { defineComponent } from "vue";
+import { Options, Vue } from "vue-class-component";
+
+@Options({})
+export default class ZGroup extends Vue {}
+</script>
+<style></style>
--- a/src/views/zelda/ZProject.vue
+++ b/src/views/zelda/ZProject.vue
@ -0,0 +1,13 @@
+<template>
+  <div id="zproject">
+    <h3>zproject</h3>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({})
+export default class ZGroup extends Vue {}
+</script>
+<style></style>
--- a/src/views/zelda/ZService.vue
+++ b/src/views/zelda/ZService.vue
@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h3>zervice</h3>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({})
+export default class ZGroup extends Vue {}
+</script>
+<style></style>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,23 @@
+module.exports = {
+    lintOnSave: false,
+    devServer: {
+      proxy: {
+        '^/api': {
+          target: 'http://192.168.0.31:30300',
+          changeOrigin: true,
+          pathRewrite: {}
+        },
+        '^/auth': {
+          target: 'http://192.168.0.31:30300',
+          changeOrigin: true,
+          pathRewrite: {}
+        },
+        '/git': {
+          target: 'http://192.168.0.31:30300',
+          changeOrigin: true,
+          pathRewrite: {}
+        },
+      },
+    },
+  };
+