diff --git a/devcloud/web/docs/README.md b/devcloud/web/docs/README.md index 98b0c34..b5e7e3e 100644 --- a/devcloud/web/docs/README.md +++ b/devcloud/web/docs/README.md @@ -1,5 +1,27 @@ # 页面开发流程 +vue3 + ui组件库 + +## 安装UI组件 + +- [element plus (vue3版本)](https://element-plus.sxtxhy.com/zh-CN/) +- [TDesign](https://tdesign.tencent.com/vue-next/overview) +- [ant design for vue](https://2x.antdv.com/components/page-header-cn) +- [arco design](https://arco.design/vue/docs/start) + +从UI的精美和官方的维护度来考虑, 这里选择使用 arco design + +```sh +npm install --save-dev @arco-design/web-vue +``` + +```js +// UI 组件库 +import ArcoVue from '@arco-design/web-vue' +import '@arco-design/web-vue/dist/arco.css' +app.use(ArcoVue) +``` + ## 登陆页面 ![alt text](login.png) diff --git a/devcloud/web/package-lock.json b/devcloud/web/package-lock.json index 2eee8d0..5acad3f 100644 --- a/devcloud/web/package-lock.json +++ b/devcloud/web/package-lock.json @@ -12,6 +12,7 @@ "vue-router": "^4.5.1" }, "devDependencies": { + "@arco-design/web-vue": "^2.57.0", "@eslint/js": "^9.31.0", "@vitejs/plugin-vue": "^6.0.1", "@vue/eslint-config-prettier": "^10.2.0", @@ -40,6 +41,37 @@ "node": ">=6.0.0" } }, + "node_modules/@arco-design/color": { + "version": "0.4.0", + "resolved": "https://registry.npmmirror.com/@arco-design/color/-/color-0.4.0.tgz", + "integrity": "sha512-s7p9MSwJgHeL8DwcATaXvWT3m2SigKpxx4JA1BGPHL4gfvaQsmQfrLBDpjOJFJuJ2jG2dMt3R3P8Pm9E65q18g==", + "dev": true, + "license": "MIT", + "dependencies": { + "color": "^3.1.3" + } + }, + "node_modules/@arco-design/web-vue": { + "version": "2.57.0", + "resolved": "https://registry.npmmirror.com/@arco-design/web-vue/-/web-vue-2.57.0.tgz", + "integrity": "sha512-R5YReC3C2sG3Jv0+YuR3B7kzkq2KdhhQNCGXD8T11xAoa0zMt6SWTP1xJQOdZcM9du+q3z6tk5mRvh4qkieRJw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@arco-design/color": "^0.4.0", + "b-tween": "^0.3.3", + "b-validate": "^1.5.3", + "compute-scroll-into-view": "^1.0.20", + "dayjs": "^1.11.13", + "number-precision": "^1.6.0", + "resize-observer-polyfill": "^1.5.1", + "scroll-into-view-if-needed": "^2.2.31", + "vue": "^3.1.0" + }, + "peerDependencies": { + "vue": "^3.1.0" + } + }, "node_modules/@babel/code-frame": { "version": "7.27.1", "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.27.1.tgz", @@ -1893,6 +1925,20 @@ "dev": true, "license": "Python-2.0" }, + "node_modules/b-tween": { + "version": "0.3.3", + "resolved": "https://registry.npmmirror.com/b-tween/-/b-tween-0.3.3.tgz", + "integrity": "sha512-oEHegcRpA7fAuc9KC4nktucuZn2aS8htymCPcP3qkEGPqiBH+GfqtqoG2l7LxHngg6O0HFM7hOeOYExl1Oz4ZA==", + "dev": true, + "license": "MIT" + }, + "node_modules/b-validate": { + "version": "1.5.3", + "resolved": "https://registry.npmmirror.com/b-validate/-/b-validate-1.5.3.tgz", + "integrity": "sha512-iCvCkGFskbaYtfQ0a3GmcQCHl/Sv1GufXFGuUQ+FE+WJa7A/espLOuFIn09B944V8/ImPj71T4+rTASxO2PAuA==", + "dev": true, + "license": "MIT" + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz", @@ -2025,6 +2071,17 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/color": { + "version": "3.2.1", + "resolved": "https://registry.npmmirror.com/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz", @@ -2045,6 +2102,41 @@ "dev": true, "license": "MIT" }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmmirror.com/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, + "node_modules/color/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/color/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true, + "license": "MIT" + }, + "node_modules/compute-scroll-into-view": { + "version": "1.0.20", + "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz", + "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==", + "dev": true, + "license": "MIT" + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz", @@ -2109,6 +2201,13 @@ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "license": "MIT" }, + "node_modules/dayjs": { + "version": "1.11.13", + "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz", + "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==", + "dev": true, + "license": "MIT" + }, "node_modules/debug": { "version": "4.4.1", "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.1.tgz", @@ -2776,6 +2875,13 @@ "node": ">=0.8.19" } }, + "node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", + "dev": true, + "license": "MIT" + }, "node_modules/is-docker": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-3.0.0.tgz", @@ -3161,6 +3267,13 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/number-precision": { + "version": "1.6.0", + "resolved": "https://registry.npmmirror.com/number-precision/-/number-precision-1.6.0.tgz", + "integrity": "sha512-05OLPgbgmnixJw+VvEh18yNPUo3iyp4BEWJcrLu4X9W05KmMifN7Mu5exYvQXqxxeNWhvIF+j3Rij+HmddM/hQ==", + "dev": true, + "license": "MIT" + }, "node_modules/ohash": { "version": "2.0.11", "resolved": "https://registry.npmmirror.com/ohash/-/ohash-2.0.11.tgz", @@ -3423,6 +3536,13 @@ "node": ">=6" } }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==", + "dev": true, + "license": "MIT" + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz", @@ -3493,6 +3613,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/scroll-into-view-if-needed": { + "version": "2.2.31", + "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz", + "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==", + "dev": true, + "license": "MIT", + "dependencies": { + "compute-scroll-into-view": "^1.0.20" + } + }, "node_modules/semver": { "version": "7.7.2", "resolved": "https://registry.npmmirror.com/semver/-/semver-7.7.2.tgz", @@ -3542,6 +3672,16 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmmirror.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, "node_modules/sirv": { "version": "3.0.1", "resolved": "https://registry.npmmirror.com/sirv/-/sirv-3.0.1.tgz", diff --git a/devcloud/web/package.json b/devcloud/web/package.json index 257af28..ccd99cd 100644 --- a/devcloud/web/package.json +++ b/devcloud/web/package.json @@ -18,6 +18,7 @@ "vue-router": "^4.5.1" }, "devDependencies": { + "@arco-design/web-vue": "^2.57.0", "@eslint/js": "^9.31.0", "@vitejs/plugin-vue": "^6.0.1", "@vue/eslint-config-prettier": "^10.2.0", diff --git a/devcloud/web/src/App.vue b/devcloud/web/src/App.vue index 6ec9f60..f69b1d4 100644 --- a/devcloud/web/src/App.vue +++ b/devcloud/web/src/App.vue @@ -1,11 +1,10 @@ - + diff --git a/devcloud/web/src/assets/main.css b/devcloud/web/src/assets/main.css new file mode 100644 index 0000000..de4faa8 --- /dev/null +++ b/devcloud/web/src/assets/main.css @@ -0,0 +1,9 @@ +body { + height: 100vh; + width: 100vw; +} + +#app { + height: 100%; + width: 100%; +} diff --git a/devcloud/web/src/main.js b/devcloud/web/src/main.js index c8e37b0..1680e32 100644 --- a/devcloud/web/src/main.js +++ b/devcloud/web/src/main.js @@ -4,6 +4,15 @@ import router from './router' const app = createApp(App) -app.use(router) +// UI 组件库 +import ArcoVue from '@arco-design/web-vue' +import ArcoVueIcon from '@arco-design/web-vue/es/icon' +import '@arco-design/web-vue/dist/arco.css' +app.use(ArcoVue) +app.use(ArcoVueIcon) +// 样式加载 +import './assets/main.css' + +app.use(router) app.mount('#app') diff --git a/devcloud/web/src/pages/HomePage.vue b/devcloud/web/src/pages/HomePage.vue index 6c701e0..e9a5302 100644 --- a/devcloud/web/src/pages/HomePage.vue +++ b/devcloud/web/src/pages/HomePage.vue @@ -1,6 +1,12 @@ diff --git a/devcloud/web/src/pages/LoginPage.vue b/devcloud/web/src/pages/LoginPage.vue index 3a867c8..0030004 100644 --- a/devcloud/web/src/pages/LoginPage.vue +++ b/devcloud/web/src/pages/LoginPage.vue @@ -1,11 +1,62 @@ - + diff --git a/devcloud/web/src/pages/mpaas/ApplicatonPage.vue b/devcloud/web/src/pages/mpaas/ApplicatonPage.vue index 6c701e0..e86c941 100644 --- a/devcloud/web/src/pages/mpaas/ApplicatonPage.vue +++ b/devcloud/web/src/pages/mpaas/ApplicatonPage.vue @@ -1,6 +1,6 @@ diff --git a/skills/vue/vue3-demo/src/main.js b/skills/vue/vue3-demo/src/main.js index a5418a6..5a5dbdb 100644 --- a/skills/vue/vue3-demo/src/main.js +++ b/skills/vue/vue3-demo/src/main.js @@ -8,6 +8,4 @@ const app = createApp(App) app.use(router) - - app.mount('#app')