赞
踩
https://blog.csdn.net/qq_27569027/article/details/101262812
首先在项目终端中,输入 `npm i element-ui -S`
然后在`main.js`文件中加入以下代码块
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
在Header处放置系统Logo,Aside处放置导航菜单栏,Main处放置做好的子页面。
在Aside处,选用element-UI的NavMenu 导航菜单,效果如下:
布局,也就是template部分的代码如下:
在main标签中,加入了<router-view></router-view>
,就是说在main这一块区域,显示地是路由到的子页面,当点击菜单栏选项的时候,main区域会出现相应的子页面。
方法:
在element-UI原本的导航菜单栏的el-menu设置如下:
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
我们需要修改成:
<el-menu
:default-active="this.$route.path"
router
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
在method中的方法也需要做相应的修改:
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
goTo(path) {
this.$router.replace(path);
}
}
引入本地图片的方法:
1.把图片放到src/assets文件夹下
2.标签中写法如下
<el-image :src="birdTitle"></el-image>
3.data中return如下:
data () {
return {
msg: '鸟类类型标注系统',
birdTitle: require("@/assets/title.jpg"),
}
},
如此,就可以把图片引入到相应的位置
路由部分即router的index.js,把page页面当做父页面,其他页面作为子页面,路由配置如下:
import Vue from 'vue'
import Router from 'vue-router'
import birdsort from '@/components/birdsort'
import birdsound from '@/components/birdsound'
import page from '@/components/page'
import ostrich from '@/components/birds/ostrich'
import Login from '@/components/views/TheLogin'
Vue.use(Router)
export default
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。