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 View Code

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> View Code

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.不喜欢以上操作习惯，可以借用辅助函数去写哟(＾Ｕ＾)ノ~ＹＯ

转载于:https://www.cnblogs.com/liruoruo/p/11027587.html

相关资源：iview和vue2.0后台管理系统