搭建前台框架

2022-06-05 09:30:48 +08:00 · 2022-06-05 09:30:48 +08:00 · aa72b6efcb
parent 0cc9159b9b
commit aa72b6efcb
11 changed files with 344 additions and 95 deletions
--- a/web/monit_web/.eslintrc.js
+++ b/web/monit_web/.eslintrc.js
@ -0,0 +1,33 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true
+ },
+ 'extends': [
+ 'plugin:vue/essential',
+ 'eslint:recommended'
+ ],
+ parserOptions: {
+ parser: '@babel/eslint-parser'
+ },
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-undef': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ //在rules中添加自定义规则
+ "vue/multi-word-component-names":"off",
+ "no-unused-vars": 'off',
+ },
+ overrides: [
+ {
+ files: [
+ '**/__tests__/*.{j,t}s?(x)',
+ '**/tests/unit/**/*.spec.{j,t}s?(x)'
+ ],
+ env: {
+ jest: true
+ }
+ }
+ ]
+}
+
--- a/web/monit_web/package-lock.json
+++ b/web/monit_web/package-lock.json
@ -9,7 +9,8 @@
 "version": "0.1.0",
 "dependencies": {
 "core-js": "^3.8.3",
- "vue": "^3.2.13"
+ "vue": "^3.2.13",
+ "vue-router": "^4.0.13"
 },
 "devDependencies": {
 "@babel/core": "^7.12.16",
@ -2802,6 +2803,11 @@
 "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
 "dev": true
 },
+ "node_modules/@vue/devtools-api": {
+ "version": "6.1.4",
+ "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
+ "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+ },
 "node_modules/@vue/reactivity": {
 "version": "3.2.36",
 "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.36.tgz",
@ -10050,6 +10056,17 @@
 "node": ">=8"
 }
 },
+ "node_modules/vue-router": {
+ "version": "4.0.13",
+ "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.13.tgz",
+ "integrity": "sha512-LmXrC+BkDRLak+d5xTMgUYraT3Nj0H/vCbP+7usGvIl9Viqd1UP6AsP0i69pSbn9O0dXK/xCdp4yPw21HqV9Jw==",
+ "dependencies": {
+ "@vue/devtools-api": "^6.0.0"
+ },
+ "peerDependencies": {
+ "vue": "^3.2.0"
+ }
+ },
 "node_modules/vue-style-loader": {
 "version": "4.1.3",
 "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@ -12599,7 +12616,8 @@
 "version": "5.0.4",
 "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.4.tgz",
 "integrity": "sha512-dBwiD6mT9+V2HTHcwaWE8qFNgTk5I/NUvxYVeUN3Mmmpo4y/1RxXnr7BlKGnaQsTypb2RFk3KowqIJtg7s+E3Q==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "@vue/cli-service": {
 "version": "5.0.4",
@ -12847,6 +12865,11 @@
 }
 }
 },
+ "@vue/devtools-api": {
+ "version": "6.1.4",
+ "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
+ "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+ },
 "@vue/reactivity": {
 "version": "3.2.36",
 "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.36.tgz",
@ -13105,13 +13128,15 @@
 "version": "1.8.0",
 "resolved": "https://registry.npmmirror.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
 "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "acorn-jsx": {
 "version": "5.3.2",
 "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
 "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "acorn-walk": {
 "version": "8.2.0",
@ -13170,7 +13195,8 @@
 "version": "3.5.2",
 "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
 "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "ansi-colors": {
 "version": "4.1.3",
@ -13988,7 +14014,8 @@
 "version": "6.2.2",
 "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz",
 "integrity": "sha512-Ufadglr88ZLsrvS11gjeu/40Lw74D9Am/Jpr3LlYm5Q4ZP5KdlUhG+6u2EjyXeZcxmZ2h1ebCKngDjolpeLHpg==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "css-loader": {
 "version": "6.7.1",
@ -14159,7 +14186,8 @@
 "version": "3.1.0",
 "resolved": "https://registry.npmmirror.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
 "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "csso": {
 "version": "4.2.0",
@ -15561,7 +15589,8 @@
 "version": "5.1.0",
 "resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz",
 "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "ieee754": {
 "version": "1.2.1",
@ -16934,25 +16963,29 @@
 "version": "5.1.1",
 "resolved": "https://registry.npmmirror.com/postcss-discard-comments/-/postcss-discard-comments-5.1.1.tgz",
 "integrity": "sha512-5JscyFmvkUxz/5/+TB3QTTT9Gi9jHkcn8dcmmuN68JQcv3aQg4y88yEHHhwFB52l/NkaJ43O0dbksGMAo49nfQ==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "postcss-discard-duplicates": {
 "version": "5.1.0",
 "resolved": "https://registry.npmmirror.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
 "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "postcss-discard-empty": {
 "version": "5.1.1",
 "resolved": "https://registry.npmmirror.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
 "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "postcss-discard-overridden": {
 "version": "5.1.0",
 "resolved": "https://registry.npmmirror.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
 "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "postcss-loader": {
 "version": "6.2.1",
@ -17042,7 +17075,8 @@
 "version": "3.0.0",
 "resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
 "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "postcss-modules-local-by-default": {
 "version": "4.0.0",
@ -17077,7 +17111,8 @@
 "version": "5.1.0",
 "resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
 "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "postcss-normalize-display-values": {
 "version": "5.1.0",
@ -18596,6 +18631,14 @@
 }
 }
 },
+ "vue-router": {
+ "version": "4.0.13",
+ "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.13.tgz",
+ "integrity": "sha512-LmXrC+BkDRLak+d5xTMgUYraT3Nj0H/vCbP+7usGvIl9Viqd1UP6AsP0i69pSbn9O0dXK/xCdp4yPw21HqV9Jw==",
+ "requires": {
+ "@vue/devtools-api": "^6.0.0"
+ }
+ },
 "vue-style-loader": {
 "version": "4.1.3",
 "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@ -18916,7 +18959,8 @@
 "version": "8.7.0",
 "resolved": "https://registry.npmmirror.com/ws/-/ws-8.7.0.tgz",
 "integrity": "sha512-c2gsP0PRwcLFzUiA8Mkr37/MI7ilIlHQxaEAtd0uNMbVMoy8puJyafRlm0bV9MbGSabUPeLrRRaqIBcFcA2Pqg==",
- "dev": true
+ "dev": true,
+ "requires": {}
 }
 }
 },
@ -19043,7 +19087,8 @@
 "version": "7.5.8",
 "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.8.tgz",
 "integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==",
- "dev": true
+ "dev": true,
+ "requires": {}
 },
 "y18n": {
 "version": "5.0.8",
--- a/web/monit_web/package.json
+++ b/web/monit_web/package.json
@ -9,7 +9,8 @@
 },
 "dependencies": {
 "core-js": "^3.8.3",
- "vue": "^3.2.13"
+ "vue": "^3.2.13",
+ "vue-router": "^4.0.13"
 },
 "devDependencies": {
 "@babel/core": "^7.12.16",
--- a/web/monit_web/src/App.vue
+++ b/web/monit_web/src/App.vue
@ -1,26 +1,11 @@
 <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
- }
-}
 </script>

 <style>
-#app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
- margin-top: 60px;
-}
+
 </style>
--- a/web/monit_web/src/assets/css/main.css
+++ b/web/monit_web/src/assets/css/main.css
@ -0,0 +1,177 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+html,
+body,
+#app,
+.wrapper {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
+}
+
+a {
+ text-decoration: none
+}
+
+
+.content-box {
+ position: absolute;
+ left: 250px;
+ right: 0;
+ top: 70px;
+ bottom: 0;
+ padding-bottom: 30px;
+ -webkit-transition: left .3s ease-in-out;
+ transition: left .3s ease-in-out;
+ background: #f0f0f0;
+}
+
+.content {
+ width: auto;
+ height: 100%;
+ padding: 10px;
+ overflow-y: scroll;
+ box-sizing: border-box;
+}
+
+.content-collapse {
+ left: 65px;
+}
+
+.container {
+ padding: 30px;
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+}
+
+.crumbs {
+ margin: 10px 0;
+}
+
+.el-table th {
+ background-color: #f5f7fa !important;
+}
+
+.pagination {
+ margin: 20px 0;
+ text-align: right;
+}
+
+.plugins-tips {
+ padding: 20px 10px;
+ margin-bottom: 20px;
+}
+
+.el-button+.el-tooltip {
+ margin-left: 10px;
+}
+
+.el-table tr:hover {
+ background: #f6faff;
+}
+
+.mgb20 {
+ margin-bottom: 20px;
+}
+
+.move-enter-active,
+.move-leave-active {
+ transition: opacity .1s ease;
+}
+
+.move-enter-from,
+.move-leave-to {
+ opacity: 0;
+}
+
+/*BaseForm*/
+
+.form-box {
+ width: 600px;
+}
+
+.form-box .line {
+ text-align: center;
+}
+
+.el-time-panel__content::after,
+.el-time-panel__content::before {
+ margin-top: -7px;
+}
+
+.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+ padding-bottom: 0;
+}
+
+/*Upload*/
+
+.pure-button {
+ width: 150px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ color: #fff;
+ border-radius: 3px;
+}
+
+.g-core-image-corp-container .info-aside {
+ height: 45px;
+}
+
+.el-upload--text {
+ background-color: #fff;
+ border: 1px dashed #d9d9d9;
+ border-radius: 6px;
+ box-sizing: border-box;
+ width: 360px;
+ height: 180px;
+ text-align: center;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+
+.el-upload--text .el-icon-upload {
+ font-size: 67px;
+ color: #97a8be;
+ margin: 40px 0 16px;
+ line-height: 50px;
+}
+
+.el-upload--text {
+ color: #97a8be;
+ font-size: 14px;
+ text-align: center;
+}
+
+.el-upload--text em {
+ font-style: normal;
+}
+
+/*VueEditor*/
+
+.ql-container {
+ min-height: 400px;
+}
+
+.ql-snow .ql-tooltip {
+ transform: translateX(117.5px) translateY(10px) !important;
+}
+
+.editor-btn {
+ margin-top: 20px;
+}
+
+/*markdown*/
+
+.v-note-wrapper .v-note-panel {
+ min-height: 500px;
+}
--- a/web/monit_web/src/components/HelloWorld.vue
+++ b/web/monit_web/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>
--- a/web/monit_web/src/main.js
+++ b/web/monit_web/src/main.js
@ -2,7 +2,8 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-
+import router from './router'
 const app = createApp(App)
-app.use(ElementPlus)
+app
+app.use(ElementPlus).use(router)
 app.mount('#app')
--- a/web/monit_web/src/router/index.js
+++ b/web/monit_web/src/router/index.js
@ -0,0 +1,35 @@
+
+import {createRouter,createWebHashHistory} from "vue-router";
+
+const routes = [
+
+ {
+ path: "/",
+ name: "Home",
+ component: ()=> import('@/view/home/Home')
+
+ },
+ {
+ path: "/login",
+ name: "Login",
+ component: ()=> import('@/view/login/Login'),
+ meta:{
+ title: "登录页"
+ }
+ }
+
+
+
+
+
+]
+
+
+
+const router = createRouter({
+ history:createWebHashHistory(),
+ routes
+})
+
+
+export default router;
--- a/web/monit_web/src/view/home/Home.vue
+++ b/web/monit_web/src/view/home/Home.vue
@ -0,0 +1,15 @@
+<template>
+<div>
+ 我是home组件
+</div>
+</template>
+
+<script>
+export default {
+ name: "Home"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/web/monit_web/src/view/login/Login.vue
+++ b/web/monit_web/src/view/login/Login.vue
@ -0,0 +1,15 @@
+<template>
+<div>
+ 我是登录页
+</div>
+</template>
+
+<script>
+export default {
+ name: "login"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/web/monit_web/vue.config.js
+++ b/web/monit_web/vue.config.js
@ -1,4 +1,4 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
- transpileDependencies: true
+ transpileDependencies: true,
 })