精华内容
下载资源
问答
  • Vue管理系统框架静态界面

    千次阅读 2019-07-15 21:47:22
    最近使用Vue.js模仿Avuex的界面写了一个静态的管理系统框架界面,原因是开源的项目从里面挑出想要的东西并整合到自己的项目中真的是很困难,只是想要个简单的静态界面,于是就自己写了,希望大家也可以复用。...

    最近使用Vue.js模仿Avuex的界面写了一个静态的管理系统框架界面,原因是开源的项目从里面挑出想要的东西并整合到自己的项目中真的是很困难,只是想要个简单的静态界面,于是就自己写了,希望大家也可以复用。(有很多地方细节还是没写好,希望以后加油!!!)

    界面如下:

    1)折叠前:

    2)折叠后:

     

     代码如下: 

    <template>
    	<el-container>
    		<div class="controlPanel-sidebar" width="220px">
    			<el-menu class="el-menu-vertical-demo" 
    				@open="handleOpen" 
    				@close="handleClose" 
    				:collapse="isCollapse"
    				background-color="rgb(32,34,42)"
    				text-color="rgba(255, 255, 255, 0.8)"
    				active-text-color="#fff">
    				<div class="Title1" v-if="!isCollapse"><span>控制台</span></div>
    				<div class="Title2" v-if="isCollapse" style="width:60px;">A</div>
    
    				<el-submenu index="1">
    					<template slot="title">
    						<i class="el-icon-data-board"></i>
    						<span slot="title">工作台</span>
    					</template>
    					<el-menu-item index="1-1"><div class="barstyle"></div>通知公告</el-menu-item>
    				</el-submenu>
    
    				<el-submenu index="2">
    					<template slot="title">
    						<i class="el-icon-menu"></i>
    						<span slot="title">事务管理</span>
    					</template>
    					<el-menu-item index="2-1"><div class="barstyle"></div>待办事务</el-menu-item>
    					<el-menu-item index="2-2"><div class="barstyle"></div>办结事务</el-menu-item>
    				</el-submenu>
    
    				<el-submenu index="3">
    					<template slot="title">
    						<i class="el-icon-view"></i>
    						<span slot="title">系统监控</span>
    					</template>
    					<el-menu-item index="3-1"><div class="barstyle"></div>接口文档</el-menu-item>
    					<el-submenu index="3-2">
    						<span slot="title">日志管理</span>
    						<el-menu-item index="3-2-1"><div class="barstyle" style="margin-left:-60px"></div>通用日志</el-menu-item>
    						<el-menu-item index="3-2-2"><div class="barstyle" style="margin-left:-60px"></div>接口日志</el-menu-item>
    						<el-menu-item index="3-2-3"><div class="barstyle" style="margin-left:-60px"></div>错误日志</el-menu-item>
    					</el-submenu>
    				</el-submenu>
    
    				<el-submenu index="4">
    					<template slot="title">
    						<i class="el-icon-connection"></i>
    						<span slot="title">业务资源管理</span>
    					</template>
    					<el-menu-item index="4-1"><div class="barstyle"></div>应用管理</el-menu-item>
    					<el-menu-item index="4-2"><div class="barstyle"></div>表单管理</el-menu-item>
    					<el-submenu index="4-3">
    						<span slot="title">流程管理</span>
    						<el-menu-item index="4-3-1"><div class="barstyle" style="margin-left:-60px"></div>模型管理</el-menu-item>
    						<el-menu-item index="4-3-2"><div class="barstyle" style="margin-left:-60px"></div>流程部署</el-menu-item>
    						<el-menu-item index="4-3-3"><div class="barstyle" style="margin-left:-60px"></div>实例监控</el-menu-item>
    						<el-menu-item index="4-3-4"><div class="barstyle" style="margin-left:-60px"></div>流程监控</el-menu-item>
    					</el-submenu>
    					<el-menu-item index="4-4"><div class="barstyle"></div>列表管理</el-menu-item>
    					<el-menu-item index="4-5"><div class="barstyle"></div>业务角色管理</el-menu-item>
    				</el-submenu>
    
    				<el-submenu index="5">
    					<template slot="title">
    						<i class="el-icon-data-analysis"></i>
    						<span slot="title">平台管理</span>
    					</template>
    					<el-menu-item index="5-1"><div class="barstyle"></div>平台角色管理</el-menu-item>
    					<el-menu-item index="5-2"><div class="barstyle"></div>平台用户管理</el-menu-item>
    					<el-menu-item index="5-3"><div class="barstyle"></div>平台菜单管理</el-menu-item>
    				</el-submenu>
    
    				<el-submenu index="6">
    					<template slot="title">
    						<i class="el-icon-setting"></i>
    						<span slot="title">系统管理</span>
    					</template>
    					<el-menu-item index="6-1"><div class="barstyle"></div>用户管理</el-menu-item>
    					<el-menu-item index="6-2"><div class="barstyle"></div>组织机构</el-menu-item>
    					<el-menu-item index="6-3"><div class="barstyle"></div>场景管理</el-menu-item>
    					<el-menu-item index="6-4"><div class="barstyle"></div>字典管理</el-menu-item>
    					<el-menu-item index="6-5"><div class="barstyle"></div>菜单管理</el-menu-item>
    				</el-submenu>
    			</el-menu>
    		</div>
    		<el-container class="controlPanel-mainbar" >
    			<el-header height="55px"> 
    				<i class="el-icon-s-fold" @click="CollapseTrue()" id="CollapseTrueIcon"></i>
    				<i class="el-icon-s-unfold" @click="CollapseFalse()" id="CollapseFalseIcon"></i>
    				<el-input
    					placeholder="请输入搜索内容"
    					v-model="input"
    					size="small">
    					<el-button slot="append" icon="el-icon-search"></el-button>
    				</el-input>
    				<div class="userinfo">
    					
    					<el-dropdown :hide-on-click="false">
    						<div class="el-dropdown-link">
    							admin<i class="el-icon-arrow-down el-icon--right"></i>
    						</div>
    						<el-dropdown-menu slot="dropdown">
    							<el-dropdown-item>首页</el-dropdown-item>
    							<el-dropdown-item>个人信息</el-dropdown-item>
    							<el-dropdown-item>github</el-dropdown-item>
    							<el-dropdown-item divided>退出系统</el-dropdown-item>
    						</el-dropdown-menu>
    					</el-dropdown>
    					<div class="avater"></div>
    				</div>
    			</el-header>
    			<el-main>
    				<el-scrollbar style="height:100%">
    					<keep-alive>
    						<router-view></router-view>
    					</keep-alive>
    				</el-scrollbar>
    			</el-main>
    		</el-container>
    	</el-container>
    </template>
    
    <script>
    export default {
    	name: 'topbar',
    	data() {
    		return {
    			isCollapse: false,
    			input: ''
    		};
    	},
    	methods: {
    		handleOpen(key, keyPath) {
    			console.log(key, keyPath);
    		},
    		handleClose(key, keyPath) {
    			console.log(key, keyPath);
    		},
    		//收起
    		CollapseTrue() {
    			this.isCollapse = true;
    			var show1 = document.getElementById("CollapseTrueIcon");
    			var show2 = document.getElementById("CollapseFalseIcon");
    			show2.style.display = "block";
    			show1.style.display = "none";
    		},
    		//展开
    		CollapseFalse() {
    			this.isCollapse = false;
    			var show1 = document.getElementById("CollapseTrueIcon");
    			var show2 = document.getElementById("CollapseFalseIcon");
    			show1.style.display = "block";
    			show2.style.display = "none";
    		}
    	}
    }
    </script>
    
    <style lang="scss" scoped>
    .controlPanel-sidebar {
    	height: 100vh;
    	.Title1 {
    		background:rgb(32,34,42);
    		width:219px;
    		height:55px;
    		border-bottom: 2px rgb(6,7,8) solid;
    		span {
    			display: block;
    			text-align: center;
    			font-weight: 300;
    			font-size: 18px;
    			color: white;
    			font-family: 'YouYuan';
    			padding-top: 15px;
    		}
    	}
    	.Title2 {
    		background:rgb(32,34,42);
    		width:219px;
    		height:55px;
    		border-bottom: 2px rgb(6,7,8) solid;
    		display: block;
    		text-align: center;
    		font-size: 18px;
    		font-weight: bold;
    		color: #fff;
    		padding-top:15px;
    	}
    	.el-menu-vertical-demo {
    		// width: 220px;
    		min-height: 100%;
    		height: 100%;
    		.barstyle {
    			width: 4px;
    			background: #409EFF;
    			height: 50px;
    			float: left;
    			margin-left: -40px;
    			display: none;
    		}
    		.el-menu-item:hover {
    			background: rgb(6,7,8) !important;
    			color: #fff !important;
    			i {
    				color: #fff !important;
    			}
    			.barstyle {
                    display: block;
                }
    		}
    		.el-menu-item.is-active {
    			background: rgb(6,7,8) !important;
    			.barstyle {
                    display: block;
                }
    		}
    	}
    	.el-menu-vertical-demo:not(.el-menu--collapse) {
    		width: 220px;
    	}
    }
    .controlPanel-mainbar {
    	padding: 0px;
    	height: 100vh;
    	background: rgb(242,242,242);
    	.el-header {
    		background: white !important;
    		.el-icon-s-fold {
    			font-size: 28px;
    			color: rgb(144,147,153);
    			padding-top: 13px;
    			display: block;
    			width: 20px;
    			float: left;
    		}
    		.el-icon-s-unfold {
    			font-size: 28px;
    			color: rgb(144,147,153);
    			padding-top: 13px;
    			display: none;
    			width: 20px;
    			float: left;
    		}
    		.el-input {
    			width:250px;
    			padding-left: 30px;
    			padding-top: 12px;
    			.el-button {
    				padding-left: 13px;
    				padding-right: 6px;
    			}
    		}
    		.userinfo {
    			float: right;
    			.avater {
    				width: 35px;
    				height: 35px;
    				background: rgb(56,161,242);
    				-moz-border-radius: 50px;
    				-webkit-border-radius: 50px;
    				border-radius: 50px;
    				margin-top: 10px;
    				float: right;
    				margin-right: 15px;
    			}
    			.el-dropdown {
    				float: right;
    				.el-dropdown-link {
    					color: black !important;
    					// float: right;
    					margin-right: 5px;
    					margin-top: 18px;
    				}
    
    			}
    		}
    	}
    }
    </style>
    <style>
    .controlPanel-sidebar .el-submenu i,span{
    	color: rgba(255, 255, 255, 0.8) !important;
    }
    .controlPanel-sidebar .el-submenu i:hover,span:hover{
    	color: #fff !important;
    	background: rgb(6,7,8) !important;
    }
    .controlPanel-sidebar .el-submenu .el-submenu__title:hover{
    	color: #fff !important;
    	background: rgb(6,7,8) !important;
    
    }
    .controlPanel-sidebar .el-submenu .el-submenu__title.is-active {
    	background: rgb(6,7,8) !important;
    }
    </style>
    

     

    展开全文
  • vue.js 登录界面 管理员 (vue-admin) This is the last package you will ever need to build your custom dashboard or administrative panel. It includes: 这是构建自定义仪表板或管理面板所需的最后一个软件包...

    vue.js 登录界面

    管理员 (vue-admin)

    This is the last package you will ever need to build your custom dashboard or administrative panel. It includes:

    这是构建自定义仪表板或管理面板所需的最后一个软件包。 这包括:

    • AdminLTE (only styles)

      AdminLTE(仅样式)

    • Vue.js based ready-to-use out of the box SPA

      基于Vue.js的即用型SPA

    • Simple but flexible customization system

      简单但灵活的定制系统

    • OpenAPI 3 (formerly known as Swagger) specification for a compatible server API implementation

      适用于兼容服务器API实现的OpenAPI 3(以前称为Swagger)规范

    • Big variety of built-in field types

      多种内置字段类型

    • Big variety of built-in data display format types

      多种内置数据显示格式类型

    • Type-safe by design

      设计安全

    • Suitable for a fast prototyping

      适用于快速成型

    为什么? (Why?)

    I was so tired of looking for a robust solution for dashboards and administrative panels. For they are many and still all of them are a piece of something bad. And I made this module with all the love my heart can give and I am confident you will feel that love after typing npm i -S vue-admin-front in the console.

    我非常讨厌为仪表板和管理面板寻找可靠的解决方案。 因为它们很多,但仍然都是不好的东西。 我用心所能给予的所有爱来制作了这个模块,我相信您在控制台中键入npm i -S vue-admin-front后会感受到这种爱。

    那么服务器解决方案呢? (What about server solutions?)

    Only PHP7.1/Laravel based solution exists at the moment. Making more of them will be very appreciated. Read the docs for more info.

    目前仅存在基于PHP7.1 / Laravel的解决方案 。 制作更多它们将不胜感激。 阅读文档以获取更多信息。

    如何使用? (How to use?)

    Install:

    安装:

    npm i -S vue-admin-front cross-env rimraf webpack-command

    Add this to package.json scripts:

    将此添加到package.json脚本中:

    {
    	"admin:dev": "node node_modules/vue-admin-front/index.js",
    	"admin:build": "rimraf public/admin-dist && cross-env NODE_ENV=production webpack --config node_modules/vue-admin-front/webpack.config.js"
    }

    Use npm run admin:dev to start dev server, npm run admin:build to make a static build within public/admin-dist directory.

    使用npm run admin:dev启动开发服务器,使用npm run admin:build build在public/admin-dist目录中进行静态构建。

    翻译自: https://vuejsexamples.com/vue-js-based-administrative-interface/

    vue.js 登录界面

    展开全文
  • 简单vue2开发

    2017-08-08 13:57:14
    Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。...
  • vue开发

    2018-01-04 10:22:21
    本文通过一个简单的实例开始上手Vue.js开发。  一、技术准备  使用传统mvc项目的开发人员,笔者建议在开始项目前,对以下两个技术点进行了解。  1、 Vue.js基础知识 Vue.js特点就是入门简单,api 简洁一致,...

    前端架构之路:使用Vue.js开始第一个项目

      Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式。本文通过一个简单的实例开始上手Vue.js开发。

     一、技术准备

      使用传统mvc项目的开发人员,笔者建议在开始项目前,对以下两个技术点进行了解。
      1、 Vue.js基础知识 Vue.js特点就是入门简单,api 简洁一致,文档清晰。对于了解Html,CSS,JavaScript花几个小时看一遍,就能掌握基础的东西。 可参考http://www.runoob.com/vue2/vue-tutorial.html
      2、 ES6的模块化加载 有ES6中,可以不使用SeaJS或者RequireJS,而直接使用import和export在浏览器中导入和导出各个模块了, 具体使用参考http://www.cnblogs.com/diligenceday/p/5503777.html

     二、开发工具

      工欲善其事必先利其器,开发Vue项目建议使用“属于21世纪”的代码编辑器——Atom,它开源免费而且是跨平台的,基于 WEB 技术(Chromium+Node.js)开发的,简单理解的话编辑器本身其实是一个跑在本地的网页,用户可以用Javascript来编写编辑器插件,缺点就是基于WEB导致性能不是很理想,但这不影响笔者对它的爱,Atom好用,而且有大量的高亮提示,语法插件可使用 ,当然你也可以通过安装插件使用宇宙第一IDE-VisualStudio进行开发。使用Atom建议安装以下插件。
      1、minimap 让你了解当前屏幕所处相对位置,如下图App.Vue文件右侧所示
       
      2、git plus git管理插件
     
      3、anguage-vue 在Atom中为Vue组件文件添加语法高亮和片段。

     三、使用vue-cli快速开始模板项目

      vue-cli:Vue.js脚手架,用于自动生成Vue.js项目相关文件,类似Visual Studio的MVC的模板项目。
      1、安装vue脚手架
      
    cnpm install vue-cli -g
     
      2、使用vue-cli初始化项目
      在硬盘新建工程文件夹,在终端中使用cd命令进入该目录
     
    cd 目录路径
    vue init webpack-simple first-vue
      使用webpack打包项目,输入项目名称、描述、作者、是否使用sass后即在目录下面生成了项目。
      文件树结构如下:
    复制代码
    ├─src // 开发目录
    │ ├─assets // 资源文件目录,需要打包的放到该目录下
    │ │ ├─logo.png │
    │ ├─App.vue   // App.vue组件
    │ ├─main.js   // 预编译入口
    ├─.babelrc   // babel配置文件
    ├─.gitignore
    ├─index.html   // 主页
    ├─package.json   // 项目配置文件
    ├─README.md
    ├─webpack.config.js // webpack配置文件
    复制代码

     

      3、安装项目依赖
      进入项目目录后使用npm或者cnpm(淘宝镜像 )安装。
    cd first-vue
    npm install

     

      4、启动项目
      由于vue.js不支持ie8,建议默认浏览器使用chrome,自动启动浏览器就会看到这个界面了。
    npm run dev
     
      5、发布项目
      执行以下命令会生成发布时的build.js,并且是经过压缩的。
      
    npm run build
     
      这时候会在目录下生成dist文件夹和相关发布后的文件,由于使用的是webpack-simple方式打包,不会生成index.html文件,特别要注意的是index.html 加上 dist 不能采用 file 协议打开,必须使用 http 协议打开,并且需要放在 http 服务的 / 目录下。拷贝index.html到dist文件文件夹并放在本地IIS目录下,这样就能访问了。(关于webpack的详细使用,建议学习专门的教程,打包的配置文件在webpack.conifg.js里面,这里暂时只要知道这样用就行了)
     
     

     四、给项目添加组件

      通过前面的步骤,已经在本地跑起了一个简单的项目,但这个项目还太简单了,现在给它加点新的功能。
      组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树,例如常用的顶部条,底部菜单都就抽象成组件使用。
     
      1、添加文件。在src目录下新建components目录,添加first-component.vue,template 写 html,script写 js,style写样式
    复制代码
    <template>
      <div id="firstcomponent">
        <h1>标题</h1>
        <a> 作者:{{ author }} </a>
      </div>
    </template>
     
    <script type="text/javascript">
      export default {
        data () {
          return {
            author: "ling"
          }
        }
      }
    </script>
     
    <style>
    </style>
    复制代码

     

      2、引入。 打开App.vue,引入firstcomponent组件,并删除vue-cli脚手架生成的一些无意义html。在<script></script>标签内的第一行写
      
    <import firstcomponent from './components/firstcomponent.vue'>

     

      3、注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号
    复制代码
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      components: { firstcomponent }
    }
    复制代码

     

      4、使用。在<template></template>内加上<firstcomponent></firstcomponent>
    复制代码
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <h2>{{msg}}</h2>
        <firstcomponent></firstcomponent>
      </div>
    </template>
    复制代码

     

      完成后的代码:
     
      在浏览器上打开 http://localhost:8080/ 页面(之前打开过就会自动刷新),这样就成功在项目中添加了一个组件。

     五、使用vue-router添加路由功能

      实际项目中,由于不同模块的划分,需要路由功能,使用vue-router为项目添加路由。注意: vue-router@2.x 只适用于 Vue 2.x 版本。
     
      1、终端安装 vue-router。
    cnpm install vue-router --save
      注意参数--save
      --save 可以理解成生产环境,会把依赖包名称添加到 package.json 文件 dependencies 键下,dependencies是运行时依赖。
      --save-dev 则是开发环境, 添加到 package.json 文件 devDependencies 键下,devDependencies是开发时的依赖,如生产时不需要用到压缩库应该安装到devDependencies 。
     
      2、src下添加views目录和页面文件。在目录下面新建两个文件,view1.vue和view2.vue。
    复制代码
    <template>
        <div >
            <h1>我是View1</h1>
            <a> 我是View1 </a>
        </div>
    </template>
     
    <script type="text/javascript">
        export default {
            name: 'view1',
        }
    </script>
     
    <style>
    </style>    
    复制代码
    复制代码
    <template>
        <div >
            <h1>我是View2</h1>
            <a> 我是View2</a>
        </div>
    </template>
     
    <script type="text/javascript">
        export default {
            name: 'view2',
        }
    </script>
     
    <style>
    </style>    
    复制代码

     

      3、引入并注册 vue-router。添加router.js文件,这里添加了两个路由,分别指向view1和view2。
    复制代码
    import Vue from 'vue'
    import Router from 'vue-router'
    import View1 from './views/view1.vue'
    import View2 from './views/view2.vue'
    
    Vue.use(Router)
     
    export default new Router({
        linkActiveClass: 'active',
        // 路由配置
        routes: [
        {
            path: '/view1',
            component: View1
        }, {
            path: '/view2',
            component: View2
        }, {
            path: '/*',
            component: View1
        }
        ]
    })            
    复制代码

     

      至此,目录结构如此
     
      4、使用router修改main.js,引入 router并指定当前vue实例
    复制代码
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router.js'
     
    new Vue({
        el: '#app',
        router,
        render: h => h(App)
    })
    复制代码
     
      5、添加路由链接和出口。修改App.vue,添加链接和出口。
    <router-link to="/view1">Go to view1</router-link>
    <router-link to="/view2">Go to view2</router-link>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

     

      查看网站,点击Go to view1和Go to view2,浏览器地址发生了改变,同时view1和view2的内容也渲染在了router-view
     

     六、使用axios请求数据

      至此,我们的项目实现了路由功能,但这些页面的数据都是静态的,下面我们使用axios库来请求动态数据并展示出来。vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios。
     
      1、终端安装axios
    cnpm install axios --save

     

     
     
      2、引入axios。修改main.js文件,添加 Vue.prototype.$ajax = axios ,引入axios。
    复制代码
    import Vue from 'vue'
    import axios from 'axios'
    import App from './App.vue'
    import router from './router.js'
     
    Vue.prototype.$ajax = axios
     
    new Vue({
        el: '#app',
        router,
        render: h => h(App)
    })
    复制代码

     

      3、在视图中请求数据。修改view1.vue的js,引入axios,请求服务器数据。
    复制代码
    <script type="text/javascript">
    import axios from 'axios'
     
    export default {
        name: 'view1',
        mounted: function() {
            axios.post('/jhb/getslides')
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (response) {
                    console.log(response);
                });
        }
    }
    </script>    
    复制代码

     

      由于axios不支持跨域的jsonp请求,这里笔者使用本地webapi项目的接口数据进行测试,发布后拷贝到iis目录中,如图可以看到成功请求到了数据。

     七、更多的Vue.js

      至此,我们已经搭建了Vue.js开发环境并使用发布了一个功能简单但罗完整项目,一些不太复杂的项目基本可以按步骤来实现。推荐一些优秀的vue.js库来构建更复杂的工程。
      Vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
      vue-lazyload:vue-lazyload 一个简单易用的 Vue 图片延迟加载插件 。
      Element:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。官网:http://element.eleme.io/#/en-US,github:https://github.com/ElemeFE/element
      更多实用的vue.js库: http://www.cnblogs.com/huyong/p/6517949.html
     
      本文代码已上传至github:https://github.com/dreling8/vuejs-demo
     
                  https://www.v2ex.com/t/249859
    展开全文
  • 正确姿势开发vue后台管理系统

    千次阅读 2019-08-31 13:20:36
    项目地址 vue-admin-webapp 欢迎star... ) 对于看完教程之后又迟迟不能上手实际项目,只能写一些简单的小demo,这肯定和实际生产工作是有出入的,于是乎我就打算自己从零开始使用最新的技术栈搭建一个vue后台管理系统...

    项目地址 vue-admin-webapp 欢迎star,fork

    前言

    相信许多人和我一样刚接触 vue 时看文档都很枯燥,看完 vue,还有 vueRouter 、vuex 、vue-cli、es6 (学不动了。。。 ) 对于看完教程之后又迟迟不能上手实际项目,只能写一些简单的小demo,这肯定和实际生产工作是有出入的,于是乎我就打算自己从零开始使用最新的技术栈搭建一个vue后台管理系统,依此加深对理论知识的学习,并增强自己的项目能力,所以希望本系列教程对你开发vue项目有所帮助。

    1.项目基本简介

    vue-admin-webapp 是一个后台管理 spa 页面,它基于 vueelement-ui 采用了最新的前端技术栈,实现了登录权限验证,动态路由生成,并使用 easy-mock 来模拟请求数据,实现了典型的业务模型案例,它可以帮你快速搭建后台管理系统模板,并根据实际的业务需求添加路由来实现企业级管理页面,相信本项目一定能帮助到你。

    - 在线预览-github

    - 在线预览-gitee (推荐国内用户)

    目前版本基于 webpack 4.0+vue-cli 3.x 版本构建,需要 Node.js 8.9或更高版本(推荐8.11.0+),相关知识可以自行进官网进行了解

    功能

    
    - 登录 / 注销
      - 登录仿GeeTest-极验安全策略
      
    - 页面
      - 初次进入引导用户
      - sideBar收缩和展开
      - 全屏控制
      
    - 侧边栏
      - 根据不同用户权限展示相应的动态左侧菜单
      
    - 权限验证
      - 管理员页面
      - 权限设置
      
    - 表格操作
      - 涉及平常业务遇到的相关表格操作(参考)
      
    - Excel
     - Excel导出
     - Excel导入
     - 多级表头导出
     
    - Echarts
     - 滑动显示更多数据
     - 动态切换charts
     - map地图使用
     
    - Icons
     - element-icon
     - 阿里iconfont
     
    

    准备工作

    在开始之前,请确保在本地安装 node 和 webpack 及 git。 本项目涉及的技术栈主要有 ES6vuevuexvue-routervue-cliaxioswebpackelement-uieasyMock ,所以你最好提前熟悉了解这些知识,这将对你认识学习该项目有很大帮助

    目录结构

    下面是整个项目的目录结构

    
    ├── public                     # 静态资源
    │   ├── favicon.ico            # favicon图标
    │   └── index.html             # html模板
    ├── src                        # 源代码
    │   ├── api                    # 所有请求
    │   ├── assets                 # 图片、字体等静态资源
    │   ├── components             # 全局公用组件
    │   ├── layout                 # 页面整体布局盒子
    │   ├── mixins                 # 全局混入模块
    │   ├── plugins                # 全局插件部分
    │   ├── router                 # 路由
    │   ├── store                  # 全局store管理
    │   ├── style                  # 全局样式
    │   ├── utils                  # 全局公用方法
    │   ├── vendor                 # 公用vendor(excel导入导出)
    │   ├── views                  # views所有页面
    │   ├── App.vue                # 入口页面
    │   ├── main.js                # 入口文件 加载组件 初始化等
    ├── .borwserslistrc            # 浏览器兼容相关
    ├── .env.xxx                   # 环境变量配置 
    ├── .eslintrc.js               # eslint 配置项
    ├── .gitignore.js              # git忽略文件设置
    ├── .babelrc.config.js         # babel-loader 配置
    ├── package.json               # package.json
    ├── postcss.config.js          # postcss 配置
    └── vue.config.js              # vue-cli 配置
    
    

    安装

    # 克隆项目
    git clone git@github.com:gcddblue/vue-admin-webapp.git
    
    # 进入项目目录
    cd vue-admin-webapp
    
    # 安装依赖
    npm install
    
    # 启动服务
    npm run serve
    

    启动完成后将打开浏览器访问 http://localhost:8080,接下来你就可以根据自己的实际需求,可以添加或修改路由,编写自己的业务代码。

    2.页面架构

    除去登录页外,整个页面架构由三个部分组成 头部 侧边栏 右侧内容页 在项目@/layout/index.js文件中对对这三个组件进行封装,通过点击左侧菜单切换右侧router-view 的路由更替,对应的项目文件如下

    3.axios封装

    在vue项目中,和后台进行请求交互这块,我们通常都会选择axios库,它是基于promise的http库,可运行在浏览器端和node.js中。在本项目中主要实现了请求和响应拦截,get,post请求封装。

    配置不同环境

    )

    通过在项目中创建不同环境的文件,我这里只创建了开发和生产环境的,当然,你也可以创建基于测试的.env.test 等文件,以.env.production 为例:

    ENV = 'production'
    # base api
    VUE_APP_BASE_API = 'https://www.easy-mock.com/mock/5cee951f11690b5261b75566/admin'
    

    只要以 VUE_APP_ 开头的变量都会被 webpack.DefinePlugin 静态嵌入到客户端的包中。你可以在应用的代码中这样访问它们,例如我在@/api/index.js中初始化axios:

    const $axios = axios.create({
      timeout: 30000,
      // 基础url,会在请求url中自动添加前置链接
      baseURL: process.env.VUE_APP_BASE_API
    })
    

    通过创建api文件夹将所有接口都集中在这个文件夹中,根据不同的业务创建不同js文件,来更好的划分接口的功能,其中index.js中代码如下:

    import axios from 'axios'
    import Qs from 'qs' // 处理post请求数据格式
    import store from '@/store'
    import router from '@/router'
    import Vue from 'vue'
    import { Loading, Message } from 'element-ui' // 引用element-ui的加载和消息提示组件
    
    const $axios = axios.create({
      // 设置超时时间
      timeout: 30000,
      // 基础url,会在请求url中自动添加前置链接
      baseURL: process.env.VUE_APP_BASE_API
    })
    Vue.prototype.$http = axios // 这里并发请求以便在组件使用this.$http.all(),具体看dashborad页面
    
    // 在全局请求和响应拦截器中添加请求状态
    let loading = null
    
    /**
     * 请求拦截器
     * 用于处理请求前添加loading、判断是否已保存token,并在每次请求头部添加token
     */
    $axios.interceptors.request.use(
      config => {
        loading = Loading.service({ text: '拼命加载中' })
        const token = store.getters.token
        if (token) {
          config.headers.Authorization = token // 请求头部添加token
        }
        return config
      },
      error => {
        return Promise.reject(error)
      }
    )
    /**
     * 响应拦截器
     * 用于处理loading状态关闭、请求成功回调、响应错误处理
     */
    $axios.interceptors.response.use(
      response => {
        if (loading) {
          loading.close()
        }
        const code = response.status
        // 请求成功返回response.data
        if ((code >= 200 && code < 300) || code === 304) {
          return Promise.resolve(response.data)
        } else {
          return Promise.reject(response)
        }
      },
      error => {
        if (loading) {
          loading.close()
        }
        console.log(error)
        if (error.response) {
          switch (error.response.status) {
            case 401:
              // 返回401 清除token信息并跳转到登陆页面
              store.commit('DEL_TOKEN')
              router.replace({
                path: '/login',
                query: {
                  redirect: router.currentRoute.fullPath
                }
              })
              break
            case 404:
              Message.error('网络请求不存在')
              break
            default:
              Message.error(error.response.data.message)
          }
        } else {
          // 请求超时或者网络有问题
          if (error.message.includes('timeout')) {
            Message.error('请求超时!请检查网络是否正常')
          } else {
            Message.error('请求失败,请检查网络是否已连接')
          }
        }
        return Promise.reject(error)
      }
    )
    
    // get,post请求方法
    export default {
      post(url, data) {
        return $axios({
          method: 'post',
          url,
          data: Qs.stringify(data),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        })
      },
      get(url, params) {
        return $axios({
          method: 'get',
          url,
          params
        })
      }
    }
    
    

    如上,大家可以看我的注释说明,axios配置的封装是整个项目中很重要的模块,其实在不同的项目中,axios封装都大同小异,所以,只要掌握了一种技巧,下次开发新项目也就很容易完成封装这块。

    4.权限验证及侧边栏

    路由

    路由是组织一个vue项目的关键,在对项目原型分析后,接下来的第一步就是编写路由,本项目中,主要分为两种路由,currencyRoutesasyncRoutes

    currencyRoutes:代表通用路由,意思就是不需要权限判断,不同角色用户都显示的页面,如:登陆页、404等

    asyncRoutes: 代表动态路由,需要通过判断权限动态分配的页面,有关的权限判断的方法接下来会介绍。

    路由相关配置说明:

    /**
     * 路由相关属性说明
     * hidden: 当设置hidden为true时,意思不在sideBars侧边栏中显示
     * mete{
     * title: xxx,  设置sideBars侧边栏名称
     * icon: xxx,  设置ideBars侧边栏图标
     * noCache: true  当设置为true时不缓存该路由页面
     * }
     */
    

    权限验证动态添加侧边栏

    本项目通过路由联动更新侧边栏,所有侧边栏配置都是在前端完成的,通过访问接口,后端会返回一个权限相关的list数组,其中数组值为路由的name属性值,前端通过递归遍历asyncRoutes判断权限list中是否包含有对应的name路由,最终会返回包含该用户角色所有权限路由页面的addRoutes的数组对象。

    具体实现是在路由index.js中设置一个全局前置导航守卫,具体判断流程如下:

    // 导航守卫
    router.beforeEach(async (to, from, next) => {
      document.title = getTitle(to.meta.title)
      if (to.path === '/login') {
        next()
      } else {
        if (store.getters.token) {
          const hasRoles = store.getters.roles.length > 0
          if (hasRoles) {
            next()
          } else {
            try {
              const { roles } = await store.dispatch('user/_getInfo')
              const addRoutes = await store.dispatch(
                'permission/getAsyncRoutes',
                roles
              )
              router.addRoutes(addRoutes)
              // hack method to ensure that addRoutes is complete
              // set the replace: true, so the navigation will not leave a history record
              next({ ...to, replace: true })
            } catch (error) {
              Message.error(error)
            }
          }
        } else {
          next({
            path: '/login',
            query: {
              redirect: to.fullPath
            }
          })
        }
      }
    })
    

    这里我在通过addRoutes添加路由时,遇到一个bug,当切换角色时,并不能删除之前添加动态路由,所以这边重新初始化router.matcher的属性方式实现:

    const creatRouter = () => {
      return new Router({
        routes: currencyRoutes,
        scrollBehavior() {
          return { x: 0, y: 0 }
        }
      })
    }
    const router = creatRouter()
    
    // 解决addRoute不能删除动态路由问题
    export function resetRouter() {
      const reset = creatRouter()
      router.matcher = reset.matcher
    }
    

    当我每次退出登录的时候执行resetRouter方法来初始化router对象,实现删除之前动态添加的路由。

    最后通过element-ui的el-menu组件来递归遍历路由对象加载侧边栏。

    5.Mock数据

    身为前端开发人员,相信大家都知道Mock数据吧,它的作用主要就是伪造假数据使团队可以并行开发,本项目使用了 easy-mock 来实现接口数据的请求,大家可以去官网看下简单教程,easy-mock 它的好处就是不用像传统mock数据那样需要在项目中创建mock文件夹并拦截ajax来实现假数据请求,它是真真实实的api请求,并允许任何跨域请求,下面是本项目所有接口

    其中所有接口通过创建 _res 字段来判断请求是否含有Authorzation头部字段是否含有token来判断用户是否是登陆状态,如下 getCardsData接口的配置:

    {
      code: 0,
      data: {
        vistors: '@integer(10000, 100000)',
        message: '@integer(100, 1000)',
        order: '@integer(0, 1000)',
        profit: '@integer(1000, 100000)'
      },
      _res: function({
        _req,
        Mock
      }) {
        if (!_req.header.authorization) {
          return {
            status: 401,
            data: {
              msg: '未授权'
            }
          }
        } else {
          return {
            status: 200
          }
        }
      }
    }
    

    mock数据在项目开发中能够起到推进项目进度的功效,大家可以预先和后端人员商量好,并先拿到假数据字段,然后mock自己的假数据,这样你就可以不用等后端人员开发接口而使项目卡住。一般在项目中,创建.env.development.env.production 文件,代表了开发和生产环境,在文件里可以定义不同环境接口的请求url

    # base api
    VUE_APP_BASE_API = 'https://www.easy-mock.com/mock/5cee951f11690b5261b75566/admin'
    

    在封装axios这样初始化

    const $axios = axios.create({
      // 设置超时时间
      timeout: 30000,
      // 基础url,会在请求url中自动添加前置链接
      baseURL: process.env.VUE_APP_BASE_API
    })
    

    这样就可以自动根据不同的环境切换请求地址,不用我们一个一个的修改每一个请求接口

    6.登录

    通过将登录函数封装在store中,当点击登陆时,调用this.$store.dispatch('user/_login', this.ruleForm) 这个action方法,当后台接口验证成功时,会返回 token 字段,前端会调用 localStroage 接口将这个 token 保存在本地,以后每次请求前通过拦截器将这个token保存在 Authorization 这个头部字段中,后台只要验证这个token就知道这个用户的信息了。还不只token的同学,可以 疯狂点击token说明 里面对http为什么要添加toekn及token介绍的都很详细。

    这里我还采用了仿 geetest 行为验证,通过滑动图片来验证真人操作,其中原理利用 h5 canves绘制功能,绘制底部图片和滑块图片,然后监听mouseMove事件,当滑动block抠出的图片和初始化图片的y坐标差小于10时触发验证成功函数。

    7、优化及小技巧

    巧用Mixins

    如果你的多个组件都用到一个或多个方法,我们可以不用每次都粘贴复制,这样岂不是很low,我们可以将这些方法封装在一个js文件中,当我的某个组件需要调用这个方法时

    import aMixin from '@/mixins/a-mixin'
    export default {
      name: 'page1',
      mixins: [newsMixin]  //调用mixins属性,将aMixin这个模块的数据及方法等都添加进这个组建吧
    }
    

    mixins的使用使用规则

    Object.freeze方法

    这个方法有什么用呢,它主要是可以将一个对象冻结,防止对象被修改,那这个对vue项目有什么优化作用呢,大家都知道vue采用了数据劫持的方式遍历数据对象,把这些属性转为getter、settter方法来监听并通知数据的变化,所以当你遇到一个巨大的数组或者对象,并且确定数据不会修改,这时就可以使用 Object.freeze() 方法来组织vue对这个巨大数据的转化,,这可以让性能得到很大的提升,举个例子:

    new Vue({
        data: {
            // vue不会对list里的object做getter、setter绑定
            list: Object.freeze([
                { value: 1 },
                { value: 2 }
            ])
        },
        mounted () {
            // 界面不会有响应
            this.list[0].value = 100;
    
            // 下面两种做法,界面都会响应
            this.list = [
                { value: 100 },
                { value: 200 }
            ];
            this.list = Object.freeze([
                { value: 100 },
                { value: 200 }
            ]);
        }
    })
    

    自动化导入模块

    当我们某个组件或js文件需要引入多个模块时,一般做法就是,import每个模块,这样显然是相当繁琐的,这时 require.context 函数将派上用场,那个这个函数到底怎么用呢,这里官法介绍是 主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

    require.context 函数接受三个参数:

    1. directory {String} -读取文件的路径
    2. useSubdirectories {Boolean} -是否遍历文件的子目录
    3. gExp {RegExp} -匹配文件的正则

    require.context('./test', false, /.test.js$/)
    #上面的代码遍历当前目录下的test文件夹的所有.test.js结尾的文件,不遍历子目录
    

    require.context 函数执行后返回一个函数,并且这个函数包含了三个属性:

    1. resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
    2. keys {Function} -返回匹配成功模块的名字组成的数组
    3. id {String} -执行环境的id,返回的是一个字符串

    我们常会遍历keys返回的数组来对路径进行处理,这是相当方便的,最后 require.context 返回的函数接受keys放回数组中的路径成员作为参数,并返回这个路径文件的模块

    下面是我使用 require.context 函数动态生成moudles对象

    import Vue from 'vue'
    import Vuex from 'vuex'
    import getters from './getters'
    const path = require('path')
    
    Vue.use(Vuex)
    
    const files = require.context('./modules', false, /\.js$/)
    let modules = {}
    files.keys().forEach(key => {
      let name = path.basename(key, '.js')
      modules[name] = files(key).default || files(key)
    })
    const store = new Vuex.Store({
      modules,
      getters
    })
    export default store
    

    cdn引入

    对于一些不常改动的模块库,例如: vue vueRouter vuex echarts element-ui 等, 我们让 webpack 不将他们进行打包,而是通过 cdn 引入,这样就可以减少代码大小,减少服务器带宽,并通过cdn将它们缓存起来,提高网站性能 。

    具体实现就是修改 vue.config.js ,为对象模块添加 externals 完整配置如下:

    const cdn = {
    	css: [
    		// element-ui css
       'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
    	],
    	js: [
    		// vue
        'https://unpkg.com/vue/2.5.22/vue.min.js',
        // element-ui
        'https://unpkg.com/element-ui/lib/index.js',
        // vue
        'https://unpkg.com/vuex/3.1.0/vuex.min.js'
    	]
    }
    # 不打包vue、element-ui、vuex
    module.exports = {
    	externals: {
    		vue: 'Vue',
      	'element-ui':'ELEMENT',
      	vuex: 'Vuex'
      },
      chainWebpack: config => {
      	config.plugin('html')
            .tap(args => {
              args[0].cdn = cdn
              return args
            })
      }
    }
    

    接下来修改 index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <% if (process.env.NODE_ENV === 'production') { %>
        	<!-- 引入样式 -->
          <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
            <link rel="stylesheet" href="<%=css%>">
          <% } %>
          <!-- 引入js -->
          <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
            <script src="<%=js%>"></script>
          <% } %>      
        <% } %>
        <title>vue-admin-webapp</title>
      </head>
      <body>
        <noscript>
          <strong>We're sorry but vue-admin-webapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    

    好了,大公告成

    vue cli3多页面配置

    可以关注我的另一篇文章 正确姿势使用vue cli3配置多页项目

    vue cli3初始化项目

    可以关注我的另一篇文章 正确姿势使用vue cli3创建项目

    总结

    这个项目是我在上班之余断断续续开发的,没太写过技术贴,文笔和逻辑组织能力还是相当差的,大家见谅。起初在没开始做之前觉得应该相当的顺利的,没想到真正一步一步实现时,还是和自己最初设想是有出入的,期间遇到了不少的bug,大多都是因为细节不注意,也让我更加体会 好记性不如烂笔头 这句话,实践才是真理啊,多动手,多探索。最后我会考虑使用 nui-app 这个框架来开发多平台(小程序、android、ios、h5)移动版vue后台管理系统,期待吧…

    展开全文
  • Vue 简易商城开发

    2020-06-02 14:57:26
    学习了 vue 之后,利用所学知识搭建了个简易的商城,用到了 vue 开发中常用的技巧以及扩展包,通过这个小项目加深了对 vue 的学习 但因为没有做对应的后台,所以用到了浏览器本地储存作为临时仓库的模拟,以达到计算...
  • 前后端分离开发是目前流行的大趋势,本文从整体上介绍Vue框架的开发流程,结合具体的案例,演示使用Vue框架调用具体的后端接口。
  • JavaWeb是基于 SpringBoot2+Layui2.5.6+element-ui+Shiro+MybatisPlus 研发的权限(RBAC)及内容管理系统,致力于做更简洁的后台管理框架,包含系统管理、代码生成、权限管理、站点、广告、布局、字段、配置等一系列...
  • 前段时间,我用electron-vue开发了一款跨平台(目前支持主流三大桌面操作系统)的免费开源的图床上传应用——PicGo,在开发过程中踩了不少的坑,不仅来自应用的业务逻辑本身,也来自electron本身。在开发这个应用...
  • Flask + Vue 搭建简易系统步骤总结

    万次阅读 2018-04-28 10:18:02
    之前一段时间一直在学习 python,后来在项目中用 weex 时接触到了 vue.js,本来 python 是自己想学的一门脚本技术,weex 是项目需要,必须了解些 vue.js 方面的语法,所以为了加深对这两门技术的了解,一直在想怎么...
  • 如果要快速开发一套基于vue的后台管理系统,你可以手动从0到1动手撸,也可以基于现有的基于vue的后台管理系统模版进行开发。我们可以参考以下几套模版vue的后台管理系统模版[1]: vue-element-admin[2] vue-admin...
  • vue项目开发实战

    2021-07-01 10:09:45
     本课程从构建一个Vue开发项目到部署应用实践,由浅入深,引领学员逐步掌握各项技能,实战项目,且侧重技能不同,学员的知识体系会更加全面 课程内容涵盖:  Vue入门  显示todo列表/添加todo  删除/编辑todo  ...
  • Vue开发环境配置

    2021-08-08 20:41:22
    文章目录Vue开发环境配置1、Node.js1.1 Node.js 下载1.2 Node.js 安装1.3 Node.js 配置1.3.1 其他环境配置(可跳过)1、创建新文件夹2、执行命令,设置全局模块和缓存位置3、配置环境变量4、测试1.3.2 npm配置国内...
  • 点击上方EAWorld关注并设为星标VUE响应式浅析那些年VUE开发遇到的坑Vue是目前使用较为广泛的前端框架之一。相比React,Vue更容易学习上手。毕竟在React中万物皆Jav...
  • VUE开发笔记

    2020-12-18 22:12:00
    文章目录编程开发笔记 —— VUE开发一、vue调试工具二、vue 项目搭建2.1 创建项目2.2 vue项目目录结构三、vue 基础语法四、vue 组件五、vue路由5.1 vue界面跳转5.2 基础路由5.2 权限路由六、vue网络请求七、零碎知识...
  • Vue开发小技巧

    千次阅读 2019-10-14 14:03:29
    Vue 3.x 的Pre-Alpha 版本。后面应该还会有 Alpha、Beta 等...Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了 36 个 vue 开发技巧; 后续 Vue 3.x 出来后持续更新. 1.require.context() ...
  • Vue开发案例

    千次阅读 2019-02-26 19:39:31
    https://github.com/pagekit/pa... pagekit-轻量级的CMS建站系统 https://github.com/Vuedo/vuedo vuedo-博客平台 https://github.com/jackhutu/j... jackblog-vue-个人博客系...
  • Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...
  • 当然 后续如果有时间了 我会重新用java+vue开发一套。 其实一开始是自己打算自己一个人用的,所以代码规范方面没考虑太多怎么方便怎么来.... 展示 界面 UI界面用的是这位大哥的 作为一名java后端 写的UI真的不能看 ...
  • Vue是目前使用较为广泛的前端框架之一。相比React,Vue更容易学习上手。毕竟在React中万物皆JavaScript。这让一些习惯于编写HTML+JavaScript的程序员不太乐于接受。相比之下,Vue的模板语法它不香么。当然,Vue同样...
  • 第7章 Vue 开发环境

    2021-01-20 11:01:39
    第7章 Vue 开发环境 7.1 Vue CLI 脚手架 7.2 插件 & CLI 服务 & 配置文件 7.3 环境变量 & 模式 & 静态资源管理
  • Vue2.5用于重建用户界面的MVVM框架,数据驱动视图 axios用来请求网络请求预设API音乐数据 vue-router为单页面应用提供的路由系统使用了 vue-aplayer音乐播放组件,实现分区共享音乐 element-ui UI框架布局,使用简单...
  • 公司最近有报表系统的需求,展开调查,并没发现有合适的开源的系统,一些开源的系统如ureport等也是开源了一个很简单的版本,如果使用也需要进行开发,由于该系统不是很着急,最近自己也也不是很忙,就想尝试一下...
  • Vue 开发 36 个技巧

    千次阅读 2020-07-06 09:59:48
    快捷目录前 言require.context()watch14种组件通讯props$emitvuexattrs和listenersinheritAttrsprovide和injectparent和children$refs$root.syncv-slotEventBusbroadcast和dispatch路由传参Vue.observablerender ...
  • 深入浅出学 Vue 开发

    万次阅读 多人点赞 2018-08-14 00:42:55
    前端技术日新月异,每一种新的思想出现,都代表了一种技术的跃进、架构的变化,那么对于目前的前端技术而言,MVVM 的思想已经可以代表当今前端领域的前沿思想理念,Angular、React、Vue 等基于 MVVM 思想的具体实现...
  • Vue - 信息录入界面小练习

    千次阅读 2018-04-19 14:54:20
    学生信息录入系统 姓名: 请输入姓名" v-model="newStudent.name"> 性别: 男">男 女">女 年龄: 请输入年龄" v-model="newStudent.age"> ()">添加新用户 <!--第二部分--> ...
  • Vue开发资源汇总

    2019-05-26 18:06:16
    https://github.com/opendigg/awesome-github-vue ... 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element★13489 - 饿了么出品的Vue2的web UI工具套件 Vux★8133 - 基于Vue和We...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,808
精华内容 5,923
关键字:

vue开发的简单系统界面

vue 订阅