vue-iview(后台管理系统)
一、初始化项目并且关联远程仓库
1.创建项目 ( vue init webpack countryside )
Administrator@PC-20180706NCIX MINGW64 ~/Desktop $ vue init webpack countrysideYunCang ? Project name (countrysideYunCang) ? Project name (countrysideYunCang) countryside ? Project name countryside ? Project description (A Vue.js project) 乡间云仓是一个进货供货管理的后台管理系统( 学校-供应商 ) ? Author (Smile-lrn <17839193052@163.com>) ? Author Smile-lrn <17839193052@163.com> ? Vue build (Use arrow keys) ? Vue build standalone ? Install vue-router? (Y/n) y ? Install vue-router? Yes ? Use ESLint to lint your code? (Y/n) n ? Use ESLint to lint your code? No ? Set up unit tests (Y/n) n ? Set up unit tests No ? Setup e2e tests with Nightwatch? (Y/n) n ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recom ? Should we run `npm install` for you after the project has been created? (recom mended) npm vue-cli · Generated "countrysideYunCang". # Installing project dependencies ... ..................................................... # Project initialization finished! # ======================== To get started: cd countrysideYunCang npm run dev
2.在git上创建远程仓库countryside
3.本地仓库初始化 ,在本地项目根目录下执行
$ git init
4.关联远程仓库
$ git remote add origin git@github.com:Smile-lrn/countryside.git
5.先pull一下远程仓库的内容进行合并
$ git pull origin master From github.com:Smile-lrn/countryside * branch master -> FETCH_HEAD fatal: refusing to merge unrelated histories
6.执行第5步时,会出现拒绝合并不相关的历史(refusing to merge unrelated histories)错误,此时我们可以加上(–allow-unrelated-histories参数 )
$ git pull origin master --allow-unrelated-histories
7.如果没有冲突,就把本地代码push到远程仓库
git push -u origin master
二、选择UI框架及安装
由于乡间云仓是一个后台管理系统PC端,在这里我选择了主要服务于 PC 界面的中后台产品的Iview框架。
1.NPM 安装
$ npm install iview --save
2.在main.js中引入iview
import iView from 'iview'; import 'iview/dist/styles/iview.css'; Vue.use(iView);
三、拿到UI图分析,搭建整体布局和构造公共组件
这里我们是头部和侧边栏作为公共组件,并且固定顶部导航,方便页面切换,使用固定侧边栏为内容较长提供更好的体验。
1.整体布局代码(顶部和侧边栏)
<template> <div class="layout"> <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}"> <div class="logobox"> <img src="../assets/imgs/logo.png"> <span>乡间云仓</span> </div> <Menu :theme="theme2" accordion class="navbox" width="auto" :open-names="[Submenuname]" :active-name="activeName" @on-open-change="onOpenChanged"> <!-- <Menu class="navbox" :active-name="activename" theme="dark" width="auto" :open-names="['1']"> --> <Submenu name="1"> <template slot="title"> <Icon class="l_iconfont l_iconlvzhou_gailan-copy"></Icon> <span>概览</span> </template> <!-- 第一种方式 <MenuItem name="3-1" @click.native="choosencomp('Pramaryuser')">普通用户</MenuItem> <MenuItem name="3-2" @click.native="choosencomp('Otheruser')">董事/总代</MenuItem> --> <!-- 第二种方式 通过设置子路由 --> <MenuItem name="/Overview" @click="onSelected('/Overview','概览')">概览</MenuItem> </Submenu> <Submenu name="2"> <template slot="title"> <Icon class="l_iconfont l_iconlvzhou_gailan"></Icon> <span>采购管理</span> </template> <MenuItem name="/Goodslist" @click="onSelected('/Goodslist','货品清单')">货品清单</MenuItem> <MenuItem name="/Historylist" @click="onSelected('/Historylist','历史清单')">历史清单</MenuItem> <MenuItem name="/Supplier" @click="onSelected('/Supplier','供货单位')">供货单位</MenuItem> </Submenu> <Submenu name="3"> <template slot="title"> <Icon class="l_iconfont l_iconlvzhou_gailan"></Icon> <span>货品管理</span> </template> <MenuItem name="/Goodsmanagement" @click="onSelected('/Goodsmanagement','货品清单')">货品清单</MenuItem> </Submenu> <Submenu name="4"> <template slot="title"> <Icon class="l_iconfont l_iconlvzhou_gailan"></Icon> <span>库存管理</span> </template> <MenuItem name="/Inventorymanagement" @click="onSelected('/Inventorymanagement','库存管理')">库存管理</MenuItem> </Submenu> <Submenu name="5"> <template slot="title"> <Icon class="l_iconfont l_iconlvzhou_gailan"></Icon> <span>食堂资料</span> </template> <MenuItem name="/Canteeninfo" @click="onSelected('/Canteeninfo','食堂资料')">食堂资料</MenuItem> </Submenu> <Submenu name="6"> <template slot="title"> <Icon class="l_iconfont l_iconlvzhou_gailan"></Icon> <span>用户信息</span> </template> <MenuItem name="/Userinformation" @click="onSelected('/Userinformation','用户信息')">用户信息</MenuItem> </Submenu> </Menu> </Sider> <Layout :style="{marginLeft: '200px'}"> <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"> <span class="breadcrumbItems">{{breadcrumbItems}}</span> <div class="userInfo"> <img src="../assets/imgs/logo.png" alt="" class="photo"> <span>浙大第一美味食堂</span> <Icon class="l_iconfont l_icondingbudaohang-zhangh"></Icon> </div> </Header> <Content class="contentbox"> <Card> <div class="incontbox" id="incontbox"> <router-view /> </div> </Card> </Content> </Layout> </div> </template> <script> export default { data() { return { theme2: 'dark', //主题 Submenuname: '1', activeName: '/Overview', // navActive: '/Overview', //第一种方式渲染 右侧内容区域所需要渲染出的组件, breadcrumbItems: '概览', //面包屑 accordion: true //开启手风琴效果 } }, methods: { // 侧边导航路由跳转 onSelected: function(name,breadcrumbItems) { console.log(breadcrumbItems) // 点击同一个不做任何操作 this.activeName = name if (this.$route.path == name) { return } this.$router.push({ path: name }) this.breadcrumbItems = breadcrumbItems }, // 默认展开一级菜单时,选中第一项子菜单 onOpenChanged: function(params) { var _this = this this.Submenuname = [params[0]] switch (params[0]) { case '1': _this.onSelected('/Overview','概览') return case '2': _this.onSelected('/Goodslist','货品清单') return case '3': _this.onSelected('/Goodsmanagement','货品管理') return case '4': _this.onSelected('/Inventorymanagement','库存管理') return case '5': _this.onSelected('/Canteeninfo','食堂资料') return case '6': _this.onSelected('/Userinformation','用户信息') return } } }, watch: { $route(to, from) { this.activeName = this.$route.path } }, } </script> <style scoped lang="less"> .layout { border: 1px solid #d7dde4; background: #f5f7f9; position: relative; border-radius: 4px; overflow: hidden; /deep/ .ivu-menu { width: auto !important; } /deep/ .ivu-icon-ios-arrow-down:before { display: none; } /deep/ .ivu-menu-submenu-title { padding-left: 20px; text-align: left; } /deep/ .ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item { text-align: left; padding-left: 59px !important; } /deep/ .ivu-layout-header { padding-left: 16px; font-size: 16px; } .ivu-menu-submenu-title { display: flex; align-items: center; i, span { color: #8B97A2; } i { font-size: 26px; } } .ivu-menu-opened { background: #0D1A2C; i, span { color: #F9650C; } } /deep/ .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active { color: #fff; background: transparent !important; } .ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item { color: #8B97A2; } .layout-header-bar { background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); } .breadcrumbItems { float: left; } .userInfo { float: right; display: flex; align-items: center; font-size: 14px; img { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #ebebeb; } span { margin: 0 10px; } } } // logo .logobox { width: 100%; padding-top: 20px; padding-left: 20px; font-size: 20px; color: #fff; display: flex; align-items: center; margin-bottom: 20px; // justify-content: center; box-sizing: border-box; img { width: 50px; height: 50px; border-radius: 50%; margin-right: 8px; } span { display: flex; } } // 右侧内容板块 /deep/ .contentbox { width: 100%; height: calc(100vh - 64px); box-sizing: border-box; overflow-y: hidden; padding: 16px; .incontbox { width: 100%; max-height: calc(100vh -96px); overflow-y: scroll; &::-webkit-scrollbar { display: none; } } } </style>