dede手机网站模板修改,域名备案网站要不要关,企业公司网页设计方案,dw如何建设网站1. 项目搭建
1.1. 首页架子搭建 使用Element ui中的Container布局容器#xff0c;选择倒数第二个样式#xff0c;将代码复制到Home.vue。
1.1.1.下载less #xff08;1#xff09;下载less样式 npm i less #xff08;2#xff09;下载less编辑解析器 npm i less…1. 项目搭建
1.1. 首页架子搭建 使用Element ui中的Container布局容器选择倒数第二个样式将代码复制到Home.vue。
1.1.1.下载less 1下载less样式 npm i less 2下载less编辑解析器 npm i less-loader5.0.0 在项目package.文件中可以看到下载包
1.1.2. 界面开发 界面 1按需引入组件
//main.js
import Vue from vue
import App from ./App.vue
import element-ui/lib/theme-chalk/index.css;
//ElementUI全局引入
// import ElementUI from element-ui;
// Vue.use(ElementUI)
//ElementUI按需引入
import {Button,Container,Aside,Header,Main} from element-ui;
Vue.use(Button)
Vue.use(Container)
Vue.use(Aside)
Vue.use(Header)
Vue.use(Main)
import router from ../router/router.js;
Vue.config.productionTip false
new Vue({router,render: h h(App),
}).$mount(#app)2界面搭建
//view/home.vue
templateel-container styleheight: 100%;el-aside widthautoAside/el-asideel-containerel-headerHeader/el-headerel-mainMain/el-main/el-container/el-container
/template
scriptexport default {name: Home,data() {return {}}}
/script
style langless.el-header {background-color: black;}.el-main {padding-top: 0px;}
/style1.2. 左侧导航栏实现 本质上这个模块应该是在Home.vue的Aside标签内这个模块每个页面都会用到所以我们把它新建成一个公共模块所以我们在components文件下新建CommonAside.vue文件components会存放所有组件。 左侧导航栏逻辑如图所示有一级菜单、二级菜单。这里我们使用Element ui的NavMenu导航菜单组件的折叠组件。 1新建components/CommonAside.vue文件,引入现成组件复制代码至CommonAside.vue文件还有style、script代码。
//components/CommonAside.vue
template
el-menu default-active1-4-1 classel-menu-vertical-demo openhandleOpen closehandleClose :collapseisCollapseel-submenu index1template slottitlei classel-icon-location/ispan slottitle导航一/span/templateel-menu-item-groupspan slottitle分组一/spanel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4span slottitle选项4/spanel-menu-item index1-4-1选项1/el-menu-item/el-submenu/el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle导航四/span/el-menu-item
/el-menu
/template
scriptexport default {data() {return {isCollapse: true};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}
/script
style.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
/style2在CommonAside.vue文件中新建template标签将元素标签放入style、script代码在template标签外面。根据外面的逻辑图删除一些不必要的元素。
//components/CommonAside.vue
templateel-menu default-active1-4-1 classel-menu-vertical-demo openhandleOpen closehandleClose:collapseisCollapseel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-submenu index1template slottitlei classel-icon-location/ispan slottitle导航一/span/templateel-menu-item-groupspan slottitle分组一/spanel-menu-item index1-1选项1/el-menu-item/el-menu-item-group/el-submenuel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-item/el-menu
/templatescriptexport default {data() {return {isCollapse: false};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}
/script
style.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
/style3menu数据在datareturn中定义menu将数据放入menu并且将isCollapse属性设置为false表示图标展开。
[{path: /,name: home,label: 首页,icon: s-home,url: Home/Home,},{path: /mail,name: mail,label: 商品管理,icon: video-play,url: MailManage/MailManage,},{path: /user,name: user,label: 用户管理,icon: user,url: UserManage/UserManage,},{label: 其他,icon: location,children: [{path: /page1,name: page1,label: 页面1,icon: setting,url: Other/PageOne,},{path: /page2,name: page2,label: 页面2,icon: setting,url: Other/PageTwo,}],},]//components/CommonAside.vue
templateel-menu default-active1-4-1 classel-menu-vertical-demo openhandleOpen closehandleClose:collapseisCollapseel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-submenu index1template slottitlei classel-icon-location/ispan slottitle导航一/span/templateel-menu-item-groupspan slottitle分组一/spanel-menu-item index1-1选项1/el-menu-item/el-menu-item-group/el-submenuel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-item/el-menu
/templatescriptexport default {data() {return {isCollapse: false,menu: [{path: /,name: home,label: 首页,icon: s-home,url: Home/Home,},{path: /mail,name: mail,label: 商品管理,icon: video-play,url: MailManage/MailManage,},{path: /user,name: user,label: 用户管理,icon: user,url: UserManage/UserManage,},{label: 其他,icon: location,children: [{path: /page1,name: page1,label: 页面1,icon: setting,url: Other/PageOne,},{path: /page2,name: page2,label: 页面2,icon: setting,url: Other/PageTwo,}],},]};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}
/scriptstyle.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
/style在CommonAside.vue中这里主要是处理数据使用computed计算属性两个属性noChildren和hasChildren需要对数据源进行过滤。过滤使用filter方法filter里面有一个函数判断是否有子项目这样可以拿到noChildren和hasChildren两个数组。主要是为了区分一二级菜单的渲染。
//计算属性
computed:{noChildren(){return this.menu.filter(item !item.children)},hasChildren(){return this.menu.filter(item item.children)}}1.2.1. 一级菜单渲染 一级菜单进行页面渲染更改前面的代码。遍历有v-for使用遍历需要加上key使用路径作为唯一标识。图标原本是这里我们用字符串拼接因为数据中有icon对象双花括号渲染数据数据有多少条就渲染多少条一级菜单一个有四个分别是首页、商品管理、用户管其他。
!-- 一级菜单,:v-bind --el-menu-item v-foritem in noChildren :indexitem.path :keyitem.pathi :classel-icon-item.icon/ispan slottitle{{item.label}}/span/el-menu-item//components/CommonAside.vue
templateel-menu default-active1-4-1 classel-menu-vertical-demo openhandleOpen closehandleClose:collapseisCollapse!-- 一级菜单,:v-bind --el-menu-item v-foritem in noChildren :indexitem.path :keyitem.pathi :classel-icon-item.icon/ispan slottitle{{item.label}}/span/el-menu-itemel-submenu index1template slottitlei classel-icon-location/ispan slottitle导航一/span/templateel-menu-item-groupspan slottitle分组一/spanel-menu-item index1-1选项1/el-menu-item/el-menu-item-group/el-submenuel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-item/el-menu
/templatescriptexport default {data() {return {isCollapse: false,menu: [{path: /,name: home,label: 首页,icon: s-home,url: Home/Home,},{path: /mail,name: mail,label: 商品管理,icon: video-play,url: MailManage/MailManage,},{path: /user,name: user,label: 用户管理,icon: user,url: UserManage/UserManage,},{label: 其他,icon: location,children: [{path: /page1,name: page1,label: 页面1,icon: setting,url: Other/PageOne,},{path: /page2,name: page2,label: 页面2,icon: setting,url: Other/PageTwo,}],},]};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}},//计算属性computed: {//没有子菜单noChildren() {return this.menu.filter(item !item.children)},//有子菜单hasChildren() {return this.menu.filter(item item.children)}}}
/script
style.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
/style1.2.2. 二级菜单渲染 更改CommonAside.vue文件item可以拿到数据。 添加
通用后台管理系统标签 !-- 二级菜单 --el-submenu v-foritem in hasChildren :indexitem.path :keyitem.pathtemplate slottitlei :classel-iconitem.icon/ispan slottitle{{item.label}}/span/template!-- 这里subItem和subIndex并没有实际意义只是用来指代item.children的多个数组两者甚至可以互换只新定义一个也可以的,:index后面有没有.path都可以运行成功 --el-menu-item-group v-for(subItem,subIndex) in item.children :keysubItem.pathel-menu-item :indexsubIndex.path{{subItem.label}}/el-menu-item/el-menu-item-group/el-submenu//components/CommonAside.vue
templateel-menu default-active1-4-1 classel-menu-vertical-demo openhandleOpen closehandleClose:collapseisCollapseh3通用后台管理系统/h3!-- 一级菜单,:v-bind --el-menu-item v-foritem in noChildren :indexitem.path :keyitem.pathi :classel-icon-item.icon/ispan slottitle{{item.label}}/span/el-menu-item!-- 二级菜单 --el-submenu v-foritem in hasChildren :indexitem.path :keyitem.pathtemplate slottitlei :classel-iconitem.icon/ispan slottitle{{item.label}}/span/template!-- 这里subItem和subIndex并没有实际意义只是用来指代item.children的多个数组两者甚至可以互换只新定义一个也可以的,:index后面有没有.path都可以运行成功 --el-menu-item-group v-for(subItem,subIndex) in item.children :keysubItem.pathel-menu-item :indexsubIndex.path{{subItem.label}}/el-menu-item/el-menu-item-group/el-submenuel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-item/el-menu
/templatescriptexport default {data() {return {isCollapse: false,menu: [{path: /,name: home,label: 首页,icon: s-home,url: Home/Home,},{path: /mail,name: mail,label: 商品管理,icon: video-play,url: MailManage/MailManage,},{path: /user,name: user,label: 用户管理,icon: user,url: UserManage/UserManage,},{label: 其他,icon: location,children: [{path: /page1,name: page1,label: 页面1,icon: setting,url: Other/PageOne,},{path: /page2,name: page2,label: 页面2,icon: setting,url: Other/PageTwo,}],},]};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}},//计算属性computed: {//没有子菜单noChildren() {return this.menu.filter(item !item.children)},//有子菜单hasChildren() {return this.menu.filter(item item.children)}}}
/script
style.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
/style源码下载
