建立了前端项目 创建了首页 创建了文章查看页面 创建了文章编写页面

package-lock.json

@@ -34,6 +34,23 @@
       "resolved": "https://registry.npm.taobao.org/@babel/parser/download/@babel/parser-7.13.10.tgz?cache=0&sync_timestamp=1615243221898&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fparser%2Fdownload%2F%40babel%2Fparser-7.13.10.tgz",
       "integrity": "sha1-j4+b97Ovo+q9Bh96W830/sPEhAk="
     },
+    "@babel/runtime": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
+      "integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/runtime-corejs3": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.13.10.tgz",
+      "integrity": "sha512-x/XYVQ1h684pp1mJwOV4CyvqZXqbc8CMsMGUnAbuc82ZCdv1U63w5RSUzgDSXQHG5Rps/kiksH6g2D5BuaKyXg==",
+      "requires": {
+        "core-js-pure": "^3.0.0",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/types": {
       "version": "7.13.0",
       "resolved": "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.13.0.tgz?cache=0&sync_timestamp=1614034253440&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftypes%2Fdownload%2F%40babel%2Ftypes-7.13.0.tgz",
@@ -110,6 +127,11 @@
       "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npm.taobao.org/@popperjs/core/download/@popperjs/core-2.9.1.tgz?cache=0&sync_timestamp=1615219280778&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40popperjs%2Fcore%2Fdownload%2F%40popperjs%2Fcore-2.9.1.tgz",
+      "integrity": "sha1-f1VOc2jJq2eaEfSgQsoXFJ1wzxI="
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.0",
       "resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.0.tgz?cache=0&sync_timestamp=1607927401282&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40soda%2Ffriendly-errors-webpack-plugin%2Fdownload%2F%40soda%2Ffriendly-errors-webpack-plugin-1.8.0.tgz",
@@ -180,6 +202,11 @@
       "integrity": "sha1-pTUV2yXYA4N0OBtzryC7Ty5QjYc=",
       "dev": true
     },
+    "@tinymce/tinymce-vue": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@tinymce/tinymce-vue/-/tinymce-vue-4.0.0.tgz",
+      "integrity": "sha512-K6TaiE0uqyOSqOf4R1ZzqxaNsMAAq+d7xTCJGvIpoI29YzGPd23rnBwuW/90/UZWJyNlINGQD2VGzmFnbiqXRQ=="
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/@types/anymatch/download/@types/anymatch-1.3.1.tgz",
@@ -1193,7 +1220,6 @@
       "resolved": "https://registry.npm.taobao.org/anymatch/download/anymatch-3.1.1.tgz",
       "integrity": "sha1-xV7PAhheJGklk5kxDBc84xIzsUI=",
       "dev": true,
-      "optional": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -1390,6 +1416,11 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-3.5.1.tgz?cache=0&sync_timestamp=1605749896979&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-3.5.1.tgz",
+      "integrity": "sha1-zWK5aIskZfSEIOJ620d2CrG1VZ8="
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -1429,6 +1460,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@@ -1533,8 +1572,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npm.taobao.org/binary-extensions/download/binary-extensions-2.2.0.tgz?cache=0&sync_timestamp=1610299322955&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbinary-extensions%2Fdownload%2Fbinary-extensions-2.2.0.tgz",
       "integrity": "sha1-dfUC7q+f/eQvyYgpZFvk6na9ni0=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "bindings": {
       "version": "1.5.0",
@@ -1937,7 +1975,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/call-bind/download/call-bind-1.0.2.tgz?cache=0&sync_timestamp=1610402896029&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcall-bind%2Fdownload%2Fcall-bind-1.0.2.tgz",
       "integrity": "sha1-sdTonmiBGcPJqQOtMKuy9qkZvjw=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -2047,7 +2084,6 @@
       "resolved": "https://registry.npm.taobao.org/chokidar/download/chokidar-3.5.1.tgz?cache=0&sync_timestamp=1610719375974&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchokidar%2Fdownload%2Fchokidar-3.5.1.tgz",
       "integrity": "sha1-7pznu+vSt59J8wR5nVRo4x4U5oo=",
       "dev": true,
-      "optional": true,
       "requires": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
@@ -2064,7 +2100,6 @@
           "resolved": "https://registry.npm.taobao.org/braces/download/braces-3.0.2.tgz",
           "integrity": "sha1-NFThpGLujVmeI23zNs2epPiv4Qc=",
           "dev": true,
-          "optional": true,
           "requires": {
             "fill-range": "^7.0.1"
           }
@@ -2074,7 +2109,6 @@
           "resolved": "https://registry.npm.taobao.org/fill-range/download/fill-range-7.0.1.tgz",
           "integrity": "sha1-GRmmp8df44ssfHflGYU12prN2kA=",
           "dev": true,
-          "optional": true,
           "requires": {
             "to-regex-range": "^5.0.1"
           }
@@ -2084,7 +2118,6 @@
           "resolved": "https://registry.npm.taobao.org/glob-parent/download/glob-parent-5.1.2.tgz",
           "integrity": "sha1-hpgyxYA0/mikCTwX3BXoNA2EAcQ=",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-glob": "^4.0.1"
           }
@@ -2093,15 +2126,13 @@
           "version": "7.0.0",
           "resolved": "https://registry.npm.taobao.org/is-number/download/is-number-7.0.0.tgz",
           "integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "to-regex-range": {
           "version": "5.0.1",
           "resolved": "https://registry.npm.taobao.org/to-regex-range/download/to-regex-range-5.0.1.tgz",
           "integrity": "sha1-FkjESq58jZiKMmAY7XL1tN0DkuQ=",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-number": "^7.0.0"
           }
@@ -2663,6 +2694,11 @@
         }
       }
     },
+    "core-js-pure": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.9.1.tgz",
+      "integrity": "sha512-laz3Zx0avrw9a4QEIdmIblnVuJz8W51leY9iLThatCsFawWxC3sE4guASC78JbCin+DkwMpCdp1AVAuzL/GN7A=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz",
@@ -3006,6 +3042,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npm.taobao.org/dayjs/download/dayjs-1.10.4.tgz?cache=0&sync_timestamp=1611309982734&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdayjs%2Fdownload%2Fdayjs-1.10.4.tgz",
+      "integrity": "sha1-jlRKm4aD9heD9XCYCoqA6vVKseI="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1607566551397&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz",
@@ -3031,7 +3072,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/deep-equal/download/deep-equal-1.1.1.tgz?cache=0&sync_timestamp=1606860101281&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdeep-equal%2Fdownload%2Fdeep-equal-1.1.1.tgz",
       "integrity": "sha1-tcmMlCzv+vfLBR4k4UNKJaLmB2o=",
-      "dev": true,
       "requires": {
         "is-arguments": "^1.0.4",
         "is-date-object": "^1.0.1",
@@ -3181,7 +3221,6 @@
       "version": "1.1.3",
       "resolved": "https://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz",
       "integrity": "sha1-z4jabL7ib+bbcJT2HYcMvYTO6fE=",
-      "dev": true,
       "requires": {
         "object-keys": "^1.0.12"
       }
@@ -3498,6 +3537,20 @@
       "integrity": "sha1-wzYYS3q3BCf/4u556urtvBrYw3Q=",
       "dev": true
     },
+    "element-plus": {
+      "version": "1.0.2-beta.34",
+      "resolved": "https://registry.npm.taobao.org/element-plus/download/element-plus-1.0.2-beta.34.tgz?cache=0&sync_timestamp=1615554777313&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felement-plus%2Fdownload%2Felement-plus-1.0.2-beta.34.tgz",
+      "integrity": "sha1-GbH7itskCKhS3RHi1AniAZXwnU8=",
+      "requires": {
+        "@popperjs/core": "^2.4.4",
+        "async-validator": "^3.4.0",
+        "dayjs": "1.x",
+        "lodash": "^4.17.20",
+        "mitt": "^2.1.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.4.tgz?cache=0&sync_timestamp=1612290836352&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felliptic%2Fdownload%2Felliptic-6.5.4.tgz",
@@ -4310,8 +4363,7 @@
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz",
-      "integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo=",
-      "dev": true
+      "integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo="
     },
     "extend-shallow": {
       "version": "3.0.2",
@@ -4422,6 +4474,11 @@
       "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "fast-glob": {
       "version": "2.2.7",
       "resolved": "https://registry.npm.taobao.org/fast-glob/download/fast-glob-2.2.7.tgz?cache=0&sync_timestamp=1610876507758&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-glob%2Fdownload%2Ffast-glob-2.2.7.tgz",
@@ -4623,8 +4680,7 @@
     "follow-redirects": {
       "version": "1.13.3",
       "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.3.tgz",
-      "integrity": "sha1-5VmK1QF0wbxOhyMB6CrCzZf5Amc=",
-      "dev": true
+      "integrity": "sha1-5VmK1QF0wbxOhyMB6CrCzZf5Amc="
     },
     "for-in": {
       "version": "1.0.2",
@@ -4728,8 +4784,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz",
-      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=",
-      "dev": true
+      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0="
     },
     "functional-red-black-tree": {
       "version": "1.0.1",
@@ -4756,7 +4811,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/get-intrinsic/download/get-intrinsic-1.1.1.tgz?cache=0&sync_timestamp=1612364352840&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fget-intrinsic%2Fdownload%2Fget-intrinsic-1.1.1.tgz",
       "integrity": "sha1-FfWfN2+FXERpY5SPDSTNNje0q8Y=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -4903,7 +4957,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npm.taobao.org/has/download/has-1.0.3.tgz",
       "integrity": "sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -4923,8 +4976,7 @@
     "has-symbols": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/has-symbols/download/has-symbols-1.0.2.tgz?cache=0&sync_timestamp=1614443577352&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-symbols%2Fdownload%2Fhas-symbols-1.0.2.tgz",
-      "integrity": "sha1-Fl0wcMADCXUqEjakeTMeOsVvFCM=",
-      "dev": true
+      "integrity": "sha1-Fl0wcMADCXUqEjakeTMeOsVvFCM="
     },
     "has-value": {
       "version": "1.0.0",
@@ -5635,7 +5687,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npm.taobao.org/is-arguments/download/is-arguments-1.1.0.tgz?cache=0&sync_timestamp=1607117404740&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-arguments%2Fdownload%2Fis-arguments-1.1.0.tgz",
       "integrity": "sha1-YjUwMd++4HzrNGVqa95Z7+yujdk=",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.0"
       }
@@ -5657,7 +5708,6 @@
       "resolved": "https://registry.npm.taobao.org/is-binary-path/download/is-binary-path-2.1.0.tgz",
       "integrity": "sha1-6h9/O4DwZCNug0cPhsCcJU+0Wwk=",
       "dev": true,
-      "optional": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -5738,8 +5788,7 @@
     "is-date-object": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/is-date-object/download/is-date-object-1.0.2.tgz",
-      "integrity": "sha1-vac28s2P0G0yhE53Q7+nSUw7/X4=",
-      "dev": true
+      "integrity": "sha1-vac28s2P0G0yhE53Q7+nSUw7/X4="
     },
     "is-descriptor": {
       "version": "0.1.6",
@@ -5880,7 +5929,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/is-regex/download/is-regex-1.1.2.tgz?cache=0&sync_timestamp=1612217359034&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-regex%2Fdownload%2Fis-regex-1.1.2.tgz",
       "integrity": "sha1-gcjr3k2xQvLPHFP8htakV4gmYlE=",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-symbols": "^1.0.1"
@@ -6118,6 +6166,12 @@
       "integrity": "sha1-B8BQNKbDSfoG4k+jWqdttFgM5N0=",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/klona/download/klona-2.0.4.tgz?cache=0&sync_timestamp=1600226636423&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fklona%2Fdownload%2Fklona-2.0.4.tgz",
+      "integrity": "sha1-e7Hjr/sMuGJFR+9+j2cI6i4538A=",
+      "dev": true
+    },
     "launch-editor": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/launch-editor/download/launch-editor-2.2.1.tgz",
@@ -6595,6 +6649,11 @@
         "through2": "^2.0.0"
       }
     },
+    "mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/mitt/download/mitt-2.1.0.tgz",
+      "integrity": "sha1-90BXfCMXbGIFsSGylzUU6t4bIjA="
+    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npm.taobao.org/mixin-deep/download/mixin-deep-1.3.2.tgz",
@@ -6843,6 +6902,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -6876,8 +6940,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz?cache=0&sync_timestamp=1602657128410&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fobject-assign%2Fdownload%2Fobject-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -6926,7 +6989,6 @@
       "version": "1.1.5",
       "resolved": "https://registry.npm.taobao.org/object-is/download/object-is-1.1.5.tgz?cache=0&sync_timestamp=1613858420069&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fobject-is%2Fdownload%2Fobject-is-1.1.5.tgz",
       "integrity": "sha1-ud7qpfx/GEag+uzc7sE45XePU6w=",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3"
@@ -6935,8 +6997,7 @@
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/object-keys/download/object-keys-1.1.1.tgz",
-      "integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4=",
-      "dev": true
+      "integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4="
     },
     "object-visit": {
       "version": "1.0.1",
@@ -7188,6 +7249,11 @@
         "no-case": "^2.2.0"
       }
     },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/parent-module/download/parent-module-1.0.1.tgz",
@@ -8244,6 +8310,41 @@
       "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
       "dev": true
     },
+    "quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+        },
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+          "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
+        }
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/randombytes/download/randombytes-2.1.0.tgz",
@@ -8408,11 +8509,15 @@
       "resolved": "https://registry.npm.taobao.org/readdirp/download/readdirp-3.5.0.tgz",
       "integrity": "sha1-m6dMAZsV02UnjS6Ru4xI17TULJ4=",
       "dev": true,
-      "optional": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+    },
     "regex-not": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/regex-not/download/regex-not-1.0.2.tgz",
@@ -8427,7 +8532,6 @@
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/regexp.prototype.flags/download/regexp.prototype.flags-1.3.1.tgz?cache=0&sync_timestamp=1610725698415&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregexp.prototype.flags%2Fdownload%2Fregexp.prototype.flags-1.3.1.tgz",
       "integrity": "sha1-fvNSro0VnnWMDq3Kb4/LTu8HviY=",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3"
@@ -8539,6 +8643,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz?cache=0&sync_timestamp=1613055183799&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve%2Fdownload%2Fresolve-1.20.0.tgz",
@@ -8668,6 +8777,85 @@
       "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
       "dev": true
     },
+    "sass": {
+      "version": "1.32.8",
+      "resolved": "https://registry.npm.taobao.org/sass/download/sass-1.32.8.tgz",
+      "integrity": "sha1-8WqavY3FMK3Yg05QaHiigIwDe9w=",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npm.taobao.org/sass-loader/download/sass-loader-10.1.1.tgz",
+      "integrity": "sha1-Td1aPXY455SQZd1unHwEA39+Zj0=",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.2"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npm.taobao.org/json5/download/json5-2.2.0.tgz",
+          "integrity": "sha1-Lf7+cgxrpSXZ69kJlQ8FFTFsiaM=",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz",
+          "integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-3.0.0.tgz",
+          "integrity": "sha1-Z1AvaqK2ai1AMrQnmilEl4oJE+8=",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "semver": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.4.tgz?cache=0&sync_timestamp=1606851912015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.4.tgz",
+          "integrity": "sha1-J6qn0uTKdkUvmNOt0JOnLJQ+3Jc=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
+          "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
@@ -10212,6 +10400,12 @@
         "@vue/shared": "3.0.7"
       }
     },
+    "vue-cli-plugin-element-plus": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npm.taobao.org/vue-cli-plugin-element-plus/download/vue-cli-plugin-element-plus-0.0.13.tgz",
+      "integrity": "sha1-2oKXdjc6rUJp/CO1e7OqBDvGd0Q=",
+      "dev": true
+    },
     "vue-eslint-parser": {
       "version": "7.6.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz?cache=0&sync_timestamp=1614679624052&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.6.0.tgz",
@@ -10371,10 +10565,19 @@
         }
       }
     },
+    "vue-quill-editor": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz",
+      "integrity": "sha512-g20oSZNWg8Hbu41Kinjd55e235qVWPLfg4NvsLW6d+DhgBTFbEuMpcWlUdrD6qT3+Noim6DRu18VLM9lVShXOQ==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "quill": "^1.3.4"
+      }
+    },
     "vue-router": {
       "version": "4.0.5",
-      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.5.tgz?cache=0&sync_timestamp=1615477715384&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.5.tgz",
-      "integrity": "sha1-3QpBNLyVDDeu9kuXPp7hAIQo2Po="
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.5.tgz",
+      "integrity": "sha512-AQq+pllb6FCc7rS6vh4PPcce3XA1jgK3hKNkQ4hXHwoVN7jOeAOMKCnX7XAX3etV9rmN7iNW8iIwgPk95ckBjw=="
     },
     "vue-style-loader": {
       "version": "4.1.3",
@@ -10405,6 +10608,15 @@
       "resolved": "https://registry.npm.taobao.org/vuex/download/vuex-4.0.0.tgz?cache=0&sync_timestamp=1612277384353&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvuex%2Fdownload%2Fvuex-4.0.0.tgz",
       "integrity": "sha1-rId6p2qcRTaMl5Rx5GG1INOObPU="
     },
+    "wangeditor": {
+      "version": "4.6.9",
+      "resolved": "https://registry.npmjs.org/wangeditor/-/wangeditor-4.6.9.tgz",
+      "integrity": "sha512-csQ8rRrbTaQtsaabOPfAIZkF8m1swxVE44CTSBijIhobxypxvienlANcbO/oWFW5DRLM2ygNG4lptVeIqzFjIA==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npm.taobao.org/watchpack/download/watchpack-1.7.5.tgz?cache=0&sync_timestamp=1612715822561&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.5.tgz",

package.json

@@ -8,9 +8,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@tinymce/tinymce-vue": "^4.0.0",
+    "axios": "^0.21.1",
+    "element-plus": "^1.0.2-beta.28",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "vue-quill-editor": "^3.0.6",
+    "vue-router": "^4.0.5",
+    "vuex": "^4.0.0-0",
+    "wangeditor": "^4.6.9"
   },
   "devDependencies": {
     "@vue/cli-plugin-eslint": "~4.5.0",
@@ -24,7 +29,10 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^7.0.0-0"
+    "eslint-plugin-vue": "^7.0.0-0",
+    "sass": "^1.27.0",
+    "sass-loader": "^10.0.4",
+    "vue-cli-plugin-element-plus": "0.0.13"
   },
   "eslintConfig": {
     "root": true,

public/index.html

@@ -13,5 +13,6 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script src="./tinymce/tinymce.min.js"></script>
   </body>
 </html>

src/App.vue

@@ -1,30 +1,44 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </div>
-  <router-view/>
+  <el-container>
+    <el-aside style="width: 20%;">
+      <el-container>
+        <el-header></el-header>
+        <el-main>
+          <el-menu :default-active="activeIndex" mode="vertical" class="el-menu" router>
+            <el-affix>
+              <el-menu-item index="/">主页</el-menu-item>
+              <el-menu-item index="/edit">写文章</el-menu-item>
+            </el-affix>
+          </el-menu>
+        </el-main>
+      </el-container>
+    </el-aside>
+    <el-container>
+      <el-header></el-header>
+      <el-main>
+        <router-view/>
+      </el-main>
+    </el-container>
+  </el-container>
 </template>
 
-<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;
+<script>
+export default {
+  data () {
+    return {
+      activeIndex: '/'
+    }
+  },
+  methods: {
+  }
 }
+</script>
 
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
+<style>
+body {
+  height: 100%;
+  max-width: 1200px;
+  min-width: 1000px;
+  margin: auto;
 }
 </style>

src/components/ArticleCard.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-card shadow="hover" style="margin-top: 20px">
+    <el-container>
+      <el-header><h1 style="font-size: 25px">{{article.article_title}}</h1></el-header>
+      <el-main>
+          <div id="avatar">
+            <el-avatar :size="40" :src="circleUrl"></el-avatar>
+            <div id="author_name">{{article.author.name}}</div>
+          </div>
+          <div id="description">{{article.description}}</div>
+          <div id="likeAndCommentCount" style="text-align: left">
+            {{article.like_count}} 点赞 {{article.comment_count}} 评论
+          </div>
+      </el-main>
+    </el-container>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'ArticleCard',
+  props: ['article'],
+  data () {
+    return {
+      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style>
+#avatar{
+  text-align: left;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  position: relative;
+}
+/*#default_avatar {*/
+/*  border: 2px solid black;*/
+/*  border-radius: 50% 50% 50% 50%;*/
+/*  text-align: center;*/
+/*  display: inline;*/
+/*  font-size: 15px;*/
+/*  padding: 5px;*/
+/*  background-color: lightgray;*/
+/*}*/
+#author_name {
+  display: inline;
+  font-size: 15px;
+  position: absolute;
+  top: 21%;
+  margin-left: 10px;
+}
+#description{
+  text-align: left;
+  height: 95px;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+</style>

src/element-variables.scss

@@ -0,0 +1,11 @@
+/*
+Write your variables here. All available variables can be
+found in element-plus/packages/theme-chalk/src/common/var.scss.
+For example, to overwrite the theme color:
+*/
+$--color-primary: hotpink;
+
+/* icon font path, required */
+$--font-path: '~element-plus/lib/theme-chalk/fonts';
+
+@import "~element-plus/packages/theme-chalk/src/index";

src/main.js

@@ -2,5 +2,9 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import installElementPlus from './plugins/element'
 
-createApp(App).use(store).use(router).mount('#app')
+const app = createApp(App)
+installElementPlus(app)
+
+app.use(store).use(router).mount('#app')

src/plugins/element.js

@@ -0,0 +1,7 @@
+import ElementPlus from 'element-plus'
+import '../element-variables.scss'
+import locale from 'element-plus/lib/locale/lang/zh-cn'
+
+export default (app) => {
+  app.use(ElementPlus, { locale })
+}

src/router/index.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import Home from '../views/Home.vue'
+import Home from '@/views/Home.vue'
 
 const routes = [
   {
@@ -7,14 +7,28 @@ const routes = [
     name: 'Home',
     component: Home
   },
+  // {
+  //   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: function () {
+  //     return import(/* webpackChunkName: "about" */ '../views/About.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.
+    path: '/articles/:id',
+    name: 'Article',
     component: function () {
-      return import(/* webpackChunkName: "about" */ '../views/About.vue')
+      return import('@/views/Article.vue')
+    }
+  },
+  {
+    path: '/edit',
+    name: 'Editor',
+    component: function () {
+      return import('@/views/Editor.vue')
     }
   }
 ]

src/views/Article.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-row>
+    <el-col :span="14" :offset="5">
+      <el-container>
+        <el-header style="font-size: 35px;">{{article.article_title}}</el-header>
+        <el-main style="text-align:left;">
+          <el-container>
+            <el-header>
+              <div id="avatar">
+                <el-avatar :size="40" :src="circleUrl"></el-avatar>
+                <div id="author_name">{{authorName}}</div>
+              </div>
+            </el-header>
+            <el-main v-html="content"></el-main>
+          </el-container>
+        </el-main>
+        <el-footer></el-footer>
+      </el-container>
+    </el-col>
+  </el-row>
+</template>
+<script>
+import axios from 'axios'
+export default {
+  components: [],
+  data () {
+    return {
+      article: {},
+      articleID: 0,
+      content: '',
+      authorName: '',
+      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
+    }
+  },
+  mounted () {
+    this.articleID = this.$route.params.id
+    this.getArticle(this.articleID)
+  },
+  methods: {
+    getArticle (id) {
+      axios.get(`http://localhost:3000/articles/${id}`).then(response => {
+        const result = response.data[0]
+        this.article = result
+        this.content = result.content
+        this.getAuthor(result.author_id)
+      })
+    },
+    getAuthor (id) {
+      axios.get(`http://localhost:3000/users/info/${id}`).then(response => {
+        console.log(response)
+        this.authorName = response.data[0].user_name
+      })
+    }
+  }
+}
+</script>
+<style>
+#avatar{
+  text-align: left;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  position: relative;
+}
+#author_name {
+  display: inline;
+  font-size: 15px;
+  position: absolute;
+  top: 21%;
+  margin-left: 10px;
+}
+</style>

src/views/Editor.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-input v-model="title" placeholder="请输入标题"></el-input>
+    </el-header>
+    <el-main>
+      <tinymce
+          initialValue="<p>Initial editor content</p>"
+          :init="{
+            height: 500,
+            menubar: true,
+            plugins: [
+              'advlist autolink lists link image charmap',
+              'searchreplace visualblocks code fullscreen',
+              'print preview anchor insertdatetime media',
+              'paste code help wordcount table'
+            ],
+            language: 'zh_CN',
+            toolbar:
+              'undo redo | formatselect | bold italic | \
+              alignleft aligncenter alignright | \
+              bullist numlist outdent indent | help'
+          }"
+          v-model="content"
+      >
+      </tinymce>
+    </el-main>
+    <el-footer>
+      <el-row>
+        <el-button type="primary" @click="updateContent">完成</el-button>
+        <el-button @click="onCancel">取消</el-button>
+      </el-row>
+    </el-footer>
+  </el-container>
+</template>
+<script>
+import tinymce from '@tinymce/tinymce-vue'
+import axios from 'axios'
+
+export default {
+  name: 'Editor',
+  props: {
+    value: null
+  },
+  components: {
+    tinymce
+  },
+  watch: {
+  },
+  computed: {
+  },
+  data () {
+    return {
+      title: '',
+      content: ''
+    }
+  },
+  methods: {
+    updateContent () {
+      if (this.title !== '') {
+        axios.post('http://localhost:3000/articles', {
+          title: this.title,
+          content: this.content
+        }).then(r => {
+          console.log(r)
+        })
+      }
+    }
+  }
+}
+</script>

src/views/Home.vue

@@ -1,18 +1,48 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <h1 style="font-size: 30px">博客</h1>
+  <ArticleCard v-for="item in articles"
+               v-bind:article="item"
+               v-bind:key="item.article_id"
+               @click="onCardClick(item.article_id)">
+  </ArticleCard>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
+import axios from 'axios'
+import ArticleCard from '@/components/ArticleCard'
 export default {
-  name: 'Home',
+  name: 'App',
   components: {
-    HelloWorld
+    ArticleCard
+  },
+  data: () => {
+    return {
+      articles: []
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('http://localhost:3000/articles').then(response => {
+        this.articles = response.data
+        console.log(this.articles)
+      })
+    },
+    onCardClick (articleID) {
+      this.$router.push(`/articles/${articleID}`)
+    }
+  },
+  mounted: function () {
+    this.getData()
   }
 }
 </script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+</style>