怎么看一个网站什么程序做的,网站维护案例分析,北京飞雨网站建设公司,上海营销型网站建设一、安装 vue3 脚手架
npm create vuelatestcd vue-ui-template #切换到刚刚创建好的vue项目根目录中
npm install #下载项目所需要的依赖包
npm run dev #启动运行项目服务项目启动后#xff0c;默认页面显示如下#xff1a; 二、安装element-ui plus 官网链接#xff1a;…一、安装 vue3 脚手架
npm create vuelatestcd vue-ui-template #切换到刚刚创建好的vue项目根目录中
npm install #下载项目所需要的依赖包
npm run dev #启动运行项目服务项目启动后默认页面显示如下 二、安装element-ui plus 官网链接http://element-plus.org/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8 element-ui plus 快速上手链接http://element-plus.org/zh-CN/guide/quickstart.html npm install element-plus --save 在main.js中进行全局配置也可按需配置 因为我的项目比较小所以我就在页面中整体引入了。正常的话是按需加载 // main.js
import { createApp } from vue
import ElementPlus from element-plus
import element-plus/dist/index.css
import App from ./App.vueconst app createApp(App)app.use(ElementPlus)
app.mount(#app)三、使用element-ui plus 构建布局
下面是我们要达成的一个布局效果我之前写过的课设分为侧边栏和顶部栏以及中间主体内容。 一安装使用element-ui plus 的icon组件 http://element-plus.org/zh-CN/component/icon.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8 安装命令
npm install element-plus/icons-vue在main.js中进行全局挂载
import * as ElementPlusIconsVue from element-plus/icons-vueconst app createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}二布局组件 container 对于element-ui plus的布局组件我就不一一介绍了这里将使用到的组件链接放出来 container 布局容器 http://element-plus.org/zh-CN/component/container.html templatediv classcommon-layoutel-containerel-aside width200pxAside/el-asideel-containerel-headerHeader/el-headerel-mainMain/el-main/el-container/el-container/div
/template我们将这个布局抽离为两个组件分别为一个header组件和一个aside组件接下来开始抽离。
三模板组件抽离 Aside Header Container
Header 组件(src\components\Header.vue)
script setup
import { ref } from vueimport { ElMessage } from element-plus;
import a11Img from /assets/a11.jpeg // 导入assets下的图片自己喜欢啥图加啥图就行
const isCollapse ref(true)
// 获取父组件传递过来的数据
const showIcon defineProps({isCollapse: Boolean
})// 获取父组件自定义的事件
const emit defineEmits([changeAside])// 自定义按钮点击事件侧边栏的收缩按钮
const collapseAside () {emit(changeAside)
}// 登出按钮
const LogOut (){}/scripttemplatedivel-header styledisplay: flex;font-size: 16px;div styledisplay: inline-flex;flex: 1; align-items: center;justify-content: left;el-icon v-show!showIcon.isCollapse clickcollapseAside stylecolor: #303133;Fold //el-iconel-icon v-showshowIcon.isCollapse clickcollapseAside stylecolor: #303133;Expand //el-icon/divdiv classtoolbar div classblock stylemargin-right: 10px;el-avatar :size40 :srca11Img //divspan管理员/spanel-dropdown triggerclickel-icon stylemargin-left: 18px; margin-top: 1px;color: #303133;setting //el-icontemplate #dropdownel-dropdown-menuel-dropdown-itemView/el-dropdown-itemel-dropdown-itemAdd/el-dropdown-itemel-dropdown-item clickLogOut退出登录/el-dropdown-item/el-dropdown-menu/template/el-dropdown/div/el-header/div
/templatestyle scoped
.el-header {width: 100%;background-color: #fff;color: var(--el-text-color-primary);box-shadow: var(--el-box-shadow);
}.toolbar {display: inline-flex;align-items: center;justify-content: center;height: 100%;right: 20px;text-align: right;
}.el-dropdown-menu__item {width: 120px;
}.icon-color {color: white;
}
/styleAside组件(src\components\Aside.vue)
script setup
import { ref } from vueconst settings defineProps({collapse: Boolean,width: String
})const iconColor ref(color:#F8FAFB)
/scripttemplateel-aside :widthsettings.widthel-scrollbarel-menu :default-openeds[1, 3] :collapsesettings.collapse active-text-color#F8FAFBbackground-color#1A1C1E text-color#74767A routertrueel-sub-menu index1template #titleel-iconHouse //el-iconspan首页/span/templateel-menu-item index/admin/echatsIndex首页/el-menu-item/el-sub-menuel-sub-menu index2template #titleel-iconMenu //el-iconspan文章管理/span/templateel-menu-item index/admin/articles文章管理列表/el-menu-item/el-sub-menuel-sub-menu index3template #titleel-iconMessage //el-iconspan评论管理/span/templateel-menu-item index/admin/comments评论管理列表/el-menu-item/el-sub-menuel-sub-menu index4template #titleel-iconFiles //el-iconspan模块管理/span/templateel-menu-item index/admin/blocks模块管理列表/el-menu-item/el-sub-menuel-sub-menu index5template #titleel-iconUser //el-iconspan用户管理/span/templateel-menu-item index/admin/users用户管理列表/el-menu-item/el-sub-menuel-sub-menu index6template #titleel-iconWatermelon //el-iconspan资源管理/span/templateel-menu-item index/admin/filesAdmin资源管理列表/el-menu-item/el-sub-menuel-sub-menu index7template #titleel-iconEdit //el-iconspan编辑器/span/templateel-menu-item index/admin/mdmarkdown/el-menu-itemel-menu-item index/admin/richText富文本/el-menu-item/el-sub-menuel-sub-menu index8template #titleel-iconsetting //el-iconspan系统设置/span/templateel-menu-item index/admin/light背景色/el-menu-item/el-sub-menu/el-menu/el-scrollbar/el-aside
/templatestyle scoped
.el-aside {height: 100vh;overflow: hidden;box-shadow: var(--el-box-shadow-lighter);
}.el-scrollbar {height: 100vh;overflow: hidden;background-color: #1A1C1E;
}.el-menu {border-right: none;
}
/styletips:侧边栏菜单这里我开启了路由然后对应的indexxxx都是我要跳转的页面可以自行修改哈 HomeView.vue 视图(src\views\HomeView.vue)
script setup
import { ref } from vue// 组件注册
import Header from /components/Header.vueimport Aside from /components/Aside.vueconst asideSettings ref({isCollapse:true,width:200
})// 给子组件绑定事件通过子组件emit从而改变父组件的值
const changeAside (){asideSettings.value.isCollapse !asideSettings.value.isCollapseif(asideSettings.value.isCollapse){asideSettings.value.width 64}else{asideSettings.value.width 200}
}/script
templateel-container stylemin-height: 100vh;min-width: 100vw;overflow: hidden;Aside :collapseasideSettings.isCollapse :widthasideSettings.width/Asideel-container styleheight: 100vh;width:100%;display: flex;flex-direction: column;Header :isCollapseasideSettings.isCollapse changeAsidechangeAside/Headerel-maindivel-cardh1文本内容/h1/el-card/div/el-main/el-container/el-container
/templatestyle scopedbody{background-color: #eee;max-width: 100vw;overflow: hidden;
}.el-main {width: 100%;padding: 0;height: 100vh;overflow-x: hidden;
}/styleApp.vue修改(src\App.vue)
script setup
import { RouterView } from vue-router
/scripttemplatedivRouterView/RouterView/div
/templatestyle scoped/stylevue3的默认css调优 (src\assets\main.css)
import ./base.css;#app {/* max-width: 1280px; */margin: 0 auto;/* padding: 2rem; */min-width: 100vw;min-height: 100vh;font-weight: normal;
}a,
.green {text-decoration: none;color: hsla(160, 100%, 37%, 1);transition: 0.4s;
}media (hover: hover) {a:hover {background-color: hsla(160, 100%, 37%, 0.2);}
}media (min-width: 1024px) {body {display: flex;place-items: center;}#app {display: grid;grid-template-columns: 1fr 1fr;/* padding: 0 2rem; */}
}tips:最终的项目结构为下图黄色标注为修改过的文件红色文件标注的为新增的文件 页面效果 蹲一个赞 b(▽)d ★,°:.☆(▽)/$:.°★ 。 以上代码的全部文件 :百度网盘链接: https://pan.baidu.com/s/1WtepwERvqIoq_tYm0BwwSg 提取码: 5kmx
