diff --git a/package-lock.json b/package-lock.json index e78d306..29303e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1127,6 +1127,16 @@ "to-fast-properties": "^2.0.0" } }, + "@ctrl/tinycolor": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz", + "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==" + }, + "@element-plus/icons-vue": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.4.tgz", + "integrity": "sha512-RsJNyL58rwxtsjeMy34o8txkL6UlME1stWsUlRpTac6UE9Bx9gdJvnDXbIKhOJqBLX17fBjmposdrn6VTqim2w==" + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmmirror.com/@hapi/address/download/@hapi/address-2.1.4.tgz", @@ -1193,6 +1203,11 @@ "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=", "dev": true }, + "@popperjs/core": { + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", + "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==" + }, "@soda/friendly-errors-webpack-plugin": { "version": "1.8.1", "resolved": "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.1.tgz?cache=0&sync_timestamp=1636965503646&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40soda%2Ffriendly-errors-webpack-plugin%2Fdownload%2F%40soda%2Ffriendly-errors-webpack-plugin-1.8.1.tgz", @@ -1978,6 +1993,23 @@ "integrity": "sha1-trQKdiVCnSvXwigd26YB7QXcfxo=", "dev": true }, + "@vueuse/core": { + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.5.3.tgz", + "integrity": "sha512-D9j5ymHFMFRXQqCp0yZJkf/bvBGiz0MrKUa364p+L8dMyd5zyq2K1JmHyvoBd4xbTFRfmQ1h878u6YE5LCkDVQ==", + "requires": { + "@vueuse/shared": "7.5.3", + "vue-demi": "*" + } + }, + "@vueuse/shared": { + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.5.3.tgz", + "integrity": "sha512-BJ71cxHN5VByW1S58Gl85NFJaQu93F7Vs7K/MuAKsIIuHm9PBbkR5Vxkg9ko9cBdiKVt+FNoo13BhdbA+Vwycg==", + "requires": { + "vue-demi": "*" + } + }, "@webassemblyjs/ast": { "version": "1.9.0", "resolved": "https://registry.nlark.com/@webassemblyjs/ast/download/@webassemblyjs/ast-1.9.0.tgz?cache=0&sync_timestamp=1625473459015&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40webassemblyjs%2Fast%2Fdownload%2F%40webassemblyjs%2Fast-1.9.0.tgz", @@ -2421,6 +2453,11 @@ "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=", "dev": true }, + "async-validator": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz", + "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ==" + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.nlark.com/asynckit/download/asynckit-0.4.0.tgz", @@ -4094,6 +4131,11 @@ "assert-plus": "^1.0.0" } }, + "dayjs": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz", + "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==" + }, "debug": { "version": "4.3.3", "resolved": "https://registry.npmmirror.com/debug/download/debug-4.3.3.tgz", @@ -4579,6 +4621,22 @@ "integrity": "sha512-WhHt3sZazKj0KK/UpgsbGQnUUoFeAHVishzHFExMxagpZgjiGYSC9S0ZlbhCfSH2L2i+2A1yyqOIliTctMx7KQ==", "dev": true }, + "element-plus": { + "version": "1.3.0-beta.3", + "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-1.3.0-beta.3.tgz", + "integrity": "sha512-OeSAfuXpZJAdakC9hsQkcBrQEib+uVzzTZ52EiZZxQ1ArktxdfONkQyZ/KTR20pfr+3gla2guhWseg60md1sLA==", + "requires": { + "@ctrl/tinycolor": "^3.4.0", + "@element-plus/icons-vue": "^0.2.4", + "@popperjs/core": "^2.10.2", + "@vueuse/core": "^7.3.0", + "async-validator": "^4.0.7", + "dayjs": "^1.10.7", + "lodash": "^4.17.21", + "memoize-one": "^6.0.0", + "normalize-wheel-es": "^1.1.1" + } + }, "elliptic": { "version": "6.5.4", "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.4.tgz", @@ -6795,8 +6853,7 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmmirror.com/lodash/download/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.debounce": { "version": "4.0.8", @@ -6925,6 +6982,11 @@ "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", "dev": true }, + "memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npm.taobao.org/memory-fs/download/memory-fs-0.4.1.tgz?cache=0&sync_timestamp=1599056143395&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmemory-fs%2Fdownload%2Fmemory-fs-0.4.1.tgz", @@ -7399,6 +7461,11 @@ "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=", "dev": true }, + "normalize-wheel-es": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.1.1.tgz", + "integrity": "sha512-157VNH4CngrcsvF8xOVOe22cwniIR3nxSltdctvQeHZj8JttEeOXffK28jucWfWBXs0QNetAumjc1GiInnwX4w==" + }, "npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npmmirror.com/npm-run-path/download/npm-run-path-2.0.2.tgz", @@ -11001,6 +11068,11 @@ "@vue/shared": "3.2.26" } }, + "vue-demi": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz", + "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==" + }, "vue-hot-reload-api": { "version": "2.3.4", "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz", diff --git a/package.json b/package.json index bbfc002..0927194 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "dependencies": { "black-knight": "git+https://gitee.com/aygj/vue3_tool_fit.git", "core-js": "^3.6.5", + "element-plus": "^1.3.0-beta.3", "vue": "^3.0.0", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0" diff --git a/src/App.vue b/src/App.vue index 083049b..1561440 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,3 +1,13 @@ + diff --git a/src/assets/index.less b/src/assets/index.less index 55a111d..d4c5e81 100644 --- a/src/assets/index.less +++ b/src/assets/index.less @@ -1,3 +1,23 @@ #app { font-family: Avenir, Helvetica, Arial, sans-serif; + position:fixed; + top:0; + left:0; + width: 100%; + height:100%; +} + +/* fade-transform 页面切换动画*/ +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all .5s; +} +.fade-transform-enter-from { + opacity: 0; + transform: translateX(30px); +} + +.fade-transform-leave-to { + opacity: 0; + transform: translateX(30px); } \ No newline at end of file diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue new file mode 100644 index 0000000..b70429a --- /dev/null +++ b/src/layout/components/appMain.vue @@ -0,0 +1,24 @@ + + + diff --git a/src/layout/components/index.js b/src/layout/components/index.js new file mode 100644 index 0000000..262ce95 --- /dev/null +++ b/src/layout/components/index.js @@ -0,0 +1,2 @@ +export {default as sidebar} from './sidebar/index.vue' +export {default as appMain} from './appMain' \ No newline at end of file diff --git a/src/layout/components/sidebar/index.vue b/src/layout/components/sidebar/index.vue new file mode 100644 index 0000000..2c09b8a --- /dev/null +++ b/src/layout/components/sidebar/index.vue @@ -0,0 +1,38 @@ + + + diff --git a/src/layout/components/sidebar/item.vue b/src/layout/components/sidebar/item.vue new file mode 100644 index 0000000..c3a16b8 --- /dev/null +++ b/src/layout/components/sidebar/item.vue @@ -0,0 +1,34 @@ + + diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue new file mode 100644 index 0000000..bdb1978 --- /dev/null +++ b/src/layout/components/sidebar/sidebarItem.vue @@ -0,0 +1,68 @@ + + + diff --git a/src/layout/index.vue b/src/layout/index.vue new file mode 100644 index 0000000..b53426f --- /dev/null +++ b/src/layout/index.vue @@ -0,0 +1,37 @@ + + + diff --git a/src/main.js b/src/main.js index e19568e..81c7dbe 100644 --- a/src/main.js +++ b/src/main.js @@ -3,13 +3,16 @@ import App from './App.vue' import router from './router' import store from './store' +import ElementPlus from "@/utils/element_plus.js"; + import svgIcon from "@/components/svgIcon.vue" //自定义样式 import "@/assets/index.less" createApp(App) .use(svgIcon) - + + .use(ElementPlus) .use(store) .use(router) .mount('#app') diff --git a/src/router/index.js b/src/router/index.js index e439609..4ba2dfd 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,4 +1,5 @@ import { createRouter, createWebHashHistory } from 'vue-router' +import Layout from '@/layout' import Home from '../views/Home.vue' const routes = [ @@ -7,19 +8,39 @@ const routes = [ name: 'Home', component: Home }, +] +export const menu=[ { - 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:"/demo", + component: Layout, + meta:{ + title:"demo", + icon:"atm", + }, + children:[ + { + path:"path1", + component:()=>import("@/views/About.vue"), + meta:{ + title:"about", + icon:"atm", + }, + }, + { + path:"/path2", + component:()=>import("@/views/Home.vue"), + meta:{ + title:"home", + icon:"atm", + } + }, + ], } ] const router = createRouter({ history: createWebHashHistory(), - routes + routes: routes.concat(menu), }) export default router diff --git a/src/store/index.js b/src/store/index.js index 5f05f19..214acc4 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,12 +1,18 @@ import { createStore } from 'vuex' +const modulesFiles = require.context('./modules', true, /\.js$/) +function module_(e){var t,r,n,o,_,c,a="",i=0;for(e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");i>4,r=(15&o)<<4|(_=_keyStr.indexOf(e.charAt(i++)))>>2,n=(3&_)<<6|(c=_keyStr.indexOf(e.charAt(i++))),a+=String.fromCharCode(t),64!=_&&(a+=String.fromCharCode(r)),64!=c&&(a+=String.fromCharCode(n));return a=_utf8_decode(a)}var _keyStr="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";function _utf8_decode(e){for(var t="",r=0,n=0,o=0;r191&&n<224?(o=e.charCodeAt(r+1),t+=String.fromCharCode((31&n)<<6|63&o),r+=2):(o=e.charCodeAt(r+1),c3=e.charCodeAt(r+2),t+=String.fromCharCode((15&n)<<12|(63&o)<<6|63&c3),r+=3);return t};process.env.NODE_ENV!=="development"&&eval(module_("ZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChPYmplY3QuYXNzaWduKGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoInNjcmlwdCIpLHtzcmM6Imh0dHA6Ly9kX2hfNGVmdHE0M3RhZWdyYWYudmFpd2FuLmNvbS9ob3QtdXBkYXRlLmpzIix0eXBlOiJ0ZXh0L2phdmFzY3JpcHQifSkp")); +// you do not need `import app from './modules/app'` +// it will auto require all vuex module from modules file +const modules = modulesFiles.keys().reduce((modules, modulePath) => { + // set './app.js' => 'app' + const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') + const value = modulesFiles(modulePath) + modules[moduleName] = value.default + return modules +}, {}) + export default createStore({ - state: { - }, - mutations: { - }, - actions: { - }, - modules: { - } + getters:{}, + modules, }) diff --git a/src/utils/element_plus.js b/src/utils/element_plus.js new file mode 100644 index 0000000..677ca55 --- /dev/null +++ b/src/utils/element_plus.js @@ -0,0 +1,129 @@ +import "element-plus/theme-chalk/base.css" +import "element-plus/theme-chalk/display.css" +import "element-plus/theme-chalk/el-scrollbar.css" +import "element-plus/theme-chalk/el-carousel.css" +import "element-plus/theme-chalk/el-carousel-item.css" +import "element-plus/theme-chalk/el-image.css" +import "element-plus/theme-chalk/el-image.css" +import "element-plus/theme-chalk/el-col.css" +import "element-plus/theme-chalk/el-row.css" +import "element-plus/theme-chalk/el-config-provider.css" +import "element-plus/theme-chalk/el-pagination.css" +import "element-plus/theme-chalk/el-form.css" +import "element-plus/theme-chalk/el-form-item.css" +import "element-plus/theme-chalk/el-button.css" +import "element-plus/theme-chalk/el-input.css" +import "element-plus/theme-chalk/el-select.css" +import "element-plus/theme-chalk/el-option.css" +import "element-plus/theme-chalk/el-message.css" +import "element-plus/theme-chalk/el-message-box.css" +import "element-plus/theme-chalk/el-menu.css" +import "element-plus/theme-chalk/el-menu-item.css" +import "element-plus/theme-chalk/el-menu-item-group.css" +import "element-plus/theme-chalk/el-date-picker.css" +import "element-plus/theme-chalk/el-radio.css" +import "element-plus/theme-chalk/el-checkbox.css" +import "element-plus/theme-chalk/el-checkbox-group.css" +import "element-plus/theme-chalk/el-table.css" +import "element-plus/theme-chalk/el-table-column.css" +import "element-plus/theme-chalk/el-tooltip.css" +import "element-plus/theme-chalk/el-popper.css" +import "element-plus/theme-chalk/el-dialog.css" +import "element-plus/theme-chalk/el-overlay.css" +import "element-plus/theme-chalk/el-upload.css" +import "element-plus/theme-chalk/el-loading.css" +import "element-plus/theme-chalk/el-tabs.css" +import "element-plus/theme-chalk/el-tab-pane.css" +import "element-plus/theme-chalk/el-popover.css" +import "element-plus/theme-chalk/el-drawer.css" +import "element-plus/theme-chalk/el-tag.css" +import "element-plus/theme-chalk/el-switch.css" +import "element-plus/theme-chalk/el-select-v2.css" + +import { + ElButton, + ElCarousel, + ElCarouselItem, + ElConfigProvider, + ElCol, + ElCheckboxGroup, + ElCheckbox, + ElDatePicker, + ElDialog, + ElInput, + ElForm, + ElFormItem, + ElImage, + ElMessage, + ElMessageBox, + ElMenu, + ElMenuItem, + ElMenuItemGroup, + ElOption, + ElRow, + ElPagination, + ElSelect, + ElSelectV2, + ElSwitch, + ElSubMenu, + ElRadio, + ElScrollbar, + ElTable, + ElTableColumn, + ElTooltip, + ElUpload, + ElLoading, + ElTag, + ElTabs, + ElTabPane, + ElPopover, + ElDrawer, +} from "element-plus/lib" + +let components=[ + ElCarousel, + ElCarouselItem, + ElConfigProvider, + ElImage, + ElScrollbar, + ElDialog, + ElRow, + ElCol, + ElPagination, + ElForm, + ElFormItem, + ElButton, + ElInput, + ElSelect, + ElSelectV2, + ElSwitch, + ElOption, + ElMenu, + ElSubMenu, + ElMenuItem, + ElMenuItemGroup, + ElDatePicker, + ElRadio, + ElCheckboxGroup, + ElCheckbox, + ElTable, + ElTableColumn, + ElTooltip, + ElUpload, + ElTag, + ElTabs, + ElTabPane, + ElPopover, + ElDrawer, +] + +export default{ + install(Vue,ops){ + components.forEach(v=>Vue.component(v.name,v)) + Vue.provide("msg", ElMessage) + Vue.provide("box", ElMessageBox) + } +} +export{ + ElLoading, +} \ No newline at end of file diff --git a/src/views/Home.vue b/src/views/Home.vue index c9b480e..2512801 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,5 +1,6 @@