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>

2.安装vuex

$ npm install vuex --save

3.在src目录下新建store文件夹,在store问价夹下创建index.js用于引入使用vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

4.在index.js文件中创建vuex实例store并导出store对象

// 创建vuex实例
const store = new Vuex.Store({
    // stat
    state:{
        ...states  //vuex数据源
    },
　　getters,//可对vuex数据进行过滤等操作
})

// 导出store
export default store

5.在store文件夹下创建state.js用于存放vuex数据源，其文件内容如下：

// vuex的数据源 在组件中可以通过this.$store.state.xx来获取值
const state = {
    name:'清华大学的美味食堂',
}
// 导出state
export default state

6.在store/index.js中引入数据源

import states from './state.js'   //导入vuex数据源

 7.Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，所以这里可以在store问价夹下新建getter.js,Getter 接受 state 作为其第一个参数，Getter 会暴露为 store.getters 对象，我们可以在组建中以属性的形式访问这些值：`this.$store.getters.xx `,具体文件内容如下：

import state from './state.js'   //导入vuex数据源

const getters = {
    testname: state => {
      return state.name+'我测试下getters'
    }
}
// 导出state
export default getters

同6在其中引入getters

import getters from './getter.js'

8.更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。所以在store文件夹中创建mutation.js　其内容如下

import state from './state.js'   //导入vuex数据源


const mutations = {
    logout: state => {
      state.name=state.name+"成功退出登录"
    }
}
// 导出state
export default mutations

9.在组件中我们可以通过this.$store.commit( mutations.js中的方法名字 )去对vuex数据源进行修改操作。虽然达到了修改store中状态值的目的，但是，官方并不介意我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值，接下来我们创建actions.js文件，然后定义actions提交mutation的函数。Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象（《==》形参state），因此可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。但是注意这里的 context 对象并不是 store 实例本身。在组建中通过this.$store.dispatch('mutations.js中的方法名字')去使用。其文件内容具体代码如下：

const actions = {
    logout: context => {
      context.commit('logout')  //可传第二个参数
    }
}
// 导出state
export default actions

 10.不喜欢以上操作习惯，可以借用辅助函数去写哟(＾Ｕ＾)ノ~ＹＯ