From ce26c74f31ba02f8d4ad31b0d80bef2c11a3334d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8F=8B=E6=9E=97?= <2440500528@qq.com> Date: Sun, 7 May 2023 18:44:34 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\260\201\350\243\205\350\217\234\345\215\225\346\240\217.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/04\347\216\213\345\217\213\346\236\227/20230505-Element-Plus\345\260\201\350\243\205\350\217\234\345\215\225\346\240\217.md" "b/04\347\216\213\345\217\213\346\236\227/20230505-Element-Plus\345\260\201\350\243\205\350\217\234\345\215\225\346\240\217.md" index 18cb6c7..48af861 100644 --- "a/04\347\216\213\345\217\213\346\236\227/20230505-Element-Plus\345\260\201\350\243\205\350\217\234\345\215\225\346\240\217.md" +++ "b/04\347\216\213\345\217\213\346\236\227/20230505-Element-Plus\345\260\201\350\243\205\350\217\234\345\215\225\346\240\217.md" @@ -277,8 +277,8 @@ const menus = reactive([ ### main.js ```js -import './assets/main.css' +import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' -- Gitee From 01b8ee8261906f83caea6d7fffdb3fa11e3c5734 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8F=8B=E6=9E=97?= <2440500528@qq.com> Date: Sun, 14 May 2023 21:27:56 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...06\345\222\214\345\270\203\345\261\200.md" | 338 +++++++++++++++ .../20230509-icon\345\233\276\346\240\207.md" | 373 ++++++++++++++++ ...0230511-layout\345\270\203\345\261\200.md" | 410 ++++++++++++++++++ .../20230512-\350\217\234\345\215\225Menu.md" | 410 ++++++++++++++++++ 4 files changed, 1531 insertions(+) create mode 100644 "04\347\216\213\345\217\213\346\236\227/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" create mode 100644 "04\347\216\213\345\217\213\346\236\227/20230509-icon\345\233\276\346\240\207.md" create mode 100644 "04\347\216\213\345\217\213\346\236\227/20230511-layout\345\270\203\345\261\200.md" create mode 100644 "04\347\216\213\345\217\213\346\236\227/20230512-\350\217\234\345\215\225Menu.md" diff --git "a/04\347\216\213\345\217\213\346\236\227/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" "b/04\347\216\213\345\217\213\346\236\227/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" new file mode 100644 index 0000000..2710dfa --- /dev/null +++ "b/04\347\216\213\345\217\213\346\236\227/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" @@ -0,0 +1,338 @@ +## 一、边框和布局 +### components里的文件夹MenuBar里的lndex.vue +```html + + + + +``` + +### components里的文件夹MenuBar里的Menultem.vue +```html + + +``` + +### components里的Applcon.vue +```html + + + +``` + +### HelloWorld.vue +```html + + + + + + +``` + +### components里的Home.vue +```html + + + +``` + +### components里的SlideMenu.vue +```html + + + + +``` + +### App.vue +```html + + +``` + +### main.js +```js +import { createApp } from 'vue' +// import './style.css' +import App from './App.vue' +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import * as ElementPlusIconsVue from '@element-plus/icons-vue' + + + + +const app = createApp(App) + +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) +} +app.use(ElementPlus) + +app.mount('#app') +``` \ No newline at end of file diff --git "a/04\347\216\213\345\217\213\346\236\227/20230509-icon\345\233\276\346\240\207.md" "b/04\347\216\213\345\217\213\346\236\227/20230509-icon\345\233\276\346\240\207.md" new file mode 100644 index 0000000..8f2c784 --- /dev/null +++ "b/04\347\216\213\345\217\213\346\236\227/20230509-icon\345\233\276\346\240\207.md" @@ -0,0 +1,373 @@ +## 一、icon图标 +### components里的文件夹MenuBar里的lndex.vue +```html + + + + +``` + +### components里的文件夹MenuBar里的Menultem.vue +```html + + +``` + +### components里的Applcon.vue +```html + + + +``` + +### HelloWorld.vue +```html + + + + + + +``` + +### components里的Home.vue +```html + + + +``` + +### components里的SlideMenu.vue +```html + + + + +``` + +### App.vue +```html + + +``` + +### main.js +```js +import { createApp } from 'vue' +// import './style.css' +import App from './App.vue' +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import * as ElementPlusIconsVue from '@element-plus/icons-vue' + + + + +const app = createApp(App) + +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) +} +app.use(ElementPlus) + +app.mount('#app') +``` \ No newline at end of file diff --git "a/04\347\216\213\345\217\213\346\236\227/20230511-layout\345\270\203\345\261\200.md" "b/04\347\216\213\345\217\213\346\236\227/20230511-layout\345\270\203\345\261\200.md" new file mode 100644 index 0000000..a5baa20 --- /dev/null +++ "b/04\347\216\213\345\217\213\346\236\227/20230511-layout\345\270\203\345\261\200.md" @@ -0,0 +1,410 @@ +## 一、layout布局 +### components里的文件夹MenuBar里的lndex.vue +```html + + + +``` + +### components里的文件夹MenuBar里的Menultem.vue +```html + + +``` + +### components里的Layout.vue +```html + + + +``` + +### router里的index.js +```js +import { createRouter, createWebHistory } from 'vue-router' +import routes from './routes' + + +const router = createRouter({ + history: createWebHistory(), + routes +}) + +export default router +``` +### router里的routes.js +```js +import Layout from '../components/Layout.vue' + +const routes = [ + { + path: '/', + component: Layout, + meta: { + title: '主页', + icon: '', + hidden: true + }, + children: [ + { + path: '', + meta: { icon: '', title: '仪表盘' }, + component: () => import('../views/Home.vue') + } + ] + }, + { + path: '/setting', + component: Layout, + meta: { icon: 'setting', title: '系统设置' }, + children: [ + { + path: 'user', + meta: { icon: 'user', title: '用户管理' }, + component: () => import('../views/User.vue') + }, + { + path: 'role', + meta: { icon: 'user', title: '角色管理' }, + component: () => import('../views/Role.vue') + }, + { + path: 'permission', + meta: { icon: 'user', title: '权限管理' }, + component: () => import('../views/Permission.vue') + }, + { + path: 'dict', + meta: { icon: 'user', title: '字典管理' }, + component: () => import('../views/Dict.vue') + }, + ] + } +] + +export default routes +``` +### views里的Dep.vue +```html + +``` +### views里的Dict.vue +```html + +``` +### views里的Home.vue +```html + +``` +### views里的Info.vue +```html + +``` +### views里的Permission.vue +```html + +``` +### views里的Role.vue +```html + +``` +### views里的User.vue +```html + +``` + +### App.vue +```html + + +``` + +### main.js +```js +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import * as ElementPlusIconsVue from '@element-plus/icons-vue' + + +import router from './router' + + + + +const app = createApp(App) + +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) +} +app.use(ElementPlus) + +app.use(router) + +app.mount('#app') +``` diff --git "a/04\347\216\213\345\217\213\346\236\227/20230512-\350\217\234\345\215\225Menu.md" "b/04\347\216\213\345\217\213\346\236\227/20230512-\350\217\234\345\215\225Menu.md" new file mode 100644 index 0000000..6e9d77a --- /dev/null +++ "b/04\347\216\213\345\217\213\346\236\227/20230512-\350\217\234\345\215\225Menu.md" @@ -0,0 +1,410 @@ +## 一、菜单Mune +### components里的文件夹MenuBar里的lndex.vue +```html + + + +``` + +### components里的文件夹MenuBar里的Menultem.vue +```html + + +``` + +### components里的Layout.vue +```html + + + +``` + +### router里的index.js +```js +import { createRouter, createWebHistory } from 'vue-router' +import routes from './routes' + + +const router = createRouter({ + history: createWebHistory(), + routes +}) + +export default router +``` +### router里的routes.js +```js +import Layout from '../components/Layout.vue' + +const routes = [ + { + path: '/', + component: Layout, + meta: { + title: '主页', + icon: '', + hidden: true + }, + children: [ + { + path: '', + meta: { icon: '', title: '仪表盘' }, + component: () => import('../views/Home.vue') + } + ] + }, + { + path: '/setting', + component: Layout, + meta: { icon: 'setting', title: '系统设置' }, + children: [ + { + path: 'user', + meta: { icon: 'user', title: '用户管理' }, + component: () => import('../views/User.vue') + }, + { + path: 'role', + meta: { icon: 'user', title: '角色管理' }, + component: () => import('../views/Role.vue') + }, + { + path: 'permission', + meta: { icon: 'user', title: '权限管理' }, + component: () => import('../views/Permission.vue') + }, + { + path: 'dict', + meta: { icon: 'user', title: '字典管理' }, + component: () => import('../views/Dict.vue') + }, + ] + } +] + +export default routes +``` +### views里的Dep.vue +```html + +``` +### views里的Dict.vue +```html + +``` +### views里的Home.vue +```html + +``` +### views里的Info.vue +```html + +``` +### views里的Permission.vue +```html + +``` +### views里的Role.vue +```html + +``` +### views里的User.vue +```html + +``` + +### App.vue +```html + + +``` + +### main.js +```js +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import * as ElementPlusIconsVue from '@element-plus/icons-vue' + + +import router from './router' + + + + +const app = createApp(App) + +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) +} +app.use(ElementPlus) + +app.use(router) + +app.mount('#app') +``` -- Gitee