vue框架菜鸟教程,前端vue框架

　　Github地址：vue-framework-wz

　　在线体验地址：立即体验

　　055-7900第1课：介绍框架

　　055-7900第2课：实际操作

　　055-7900第3课：登录功能

　　特征特征

　　？Wz脚手架？(脚手架帮你更方便的安装/卸载组件)工业UI组件(简单易用，不用自己造轮子)自适应布局(大中小屏完美)？多标签导航(根据好友的业务需求)登录/注销权限验证Tinymce编辑器Markdown编辑器动态侧栏(支持多级路由)面包屑导航JSON显示组件echartjs chart 404错误页表数据直接导出到cvs多环境发布mock数据酷炫悬停效果

　　现在的科技公司，有很多前端要求写一个类似的后台管理框架。

　　比如：腾讯云

　　或者七牛云。

　　你找到什么共同点了吗？它是侧边栏，标题，主页。

　　用vue vue-router来开发这样的项目真的是得心应手。

　　大厂很多人不怕累，但是对于我们这些努力的小程序员或者新手来说，每次需要或者换个公司都要重做一个项目，把架构的一切都重写一遍？

　　日常工作中会有太多重复的内容，加重我们程序员的工作，浪费我们的时间，导致我们无法早点下班回家吃饭。

　　普通程序员拿到一个项目总会重写。写路由需要两个小时，写vuex需要两个小时，写Header组件需要一个小时，写侧边栏需要一个小时。结果是，花了一天时间拿到项目，却没有真正满足项目的需求。再加上修复bug，写css，准备都要三四天。产品来了催，还没真正实现功能。这是对时间的极大浪费。

　　那么如何才能成为一个高效的程序员呢？

　　成功的秘诀在于需要有自己的后台管理框架。当你拿到一个项目的时候，所有的UI组件、路由、状态管理、登录认证函数等等都已经写好了。您只需要重用代码并添加少量逻辑。当你一个小时完成准备工作，出去喝杯咖啡，回来看到同事们还在煞费苦心的写vue路线，你一定会会心一笑：“框架在手，天下有我”。

　　表格是我们工作中最常见的组成部分。以写表格为例。

　　做出很高的判断。传统上，写一个表需要大量重复的html，需要自己编写css，定义自己的数据呈现方法。效率低，质量不高，但是我们的框架已经定义了表单组件，只需要专注于数据采集，工作瞬间就轻松很多。

　　我们来看看wz框架表格组件在实际应用中的威力。

　　我们的框架定义了易于使用的表格组件。是不是很好看，用起来很简单？

　　不仅仅是表格，还有工作中会遇到的各种组件，从而轻松完成工作中出现的复杂需求。

　　该UI已经存在。我们的框架还有哪些其他特性？

　　多标签导航！

　　很多朋友说怎么敢称之为没有多选项卡导航的后台管理系统。也有一些朋友在工作中遇到过这样的需求。

　　深感急需，连夜赶制出了多标签导航。

　　它还支持动态侧边栏来自动确定到页面的路径。

　　自适应！

　　现在很多vue框架都没有自适应功能，很多使用场景在手机上都有，这也是wz后台管理框架诞生的原因之一。

　　我觉得每次做自适应都很头疼。现在有了wz框架，老板再也不用担心我的界面适配了。

　　我们来看看效果：

　　是不是很棒！Wz框架基于开源UI iview，超级好用。它采用行和列的思想，行作为行，列作为列。可以通过配置Col的sm md lg等属性进行自适应。

　　下面的代码示例

　　排

　　Col :md=8 :sm=12 :lg=9

　　/Col

　　/行

　　没有比登录认证功能更好的了！

　　做产品的登录功能，你把希望寄托在后端，后端不背锅扔给你？求人不如求己。wz框架已经为你打包了登录认证，只需发送服务器验证用户名和密码即可。

　　看看我们酷炫的登录界面。

　　很酷，很疯狂，吹上天了，不是吗？

　　其原理是，当你登录时，你输入你的密码，并将其存储在一个cookie中。可以自己选择加密方式。每次进行路由跳转时，可以使用router.before each ((to，from，next))来确定是否有令牌。如果是，则将其发送到服务器进行验证。如果通过，可以继续路由。如果没有，您将被重定向到登录界面。

　　身份验证也是如此。在路由器配置中添加meta: {role: [Administrator]}，判断要去的接口是否需要router.beforeEach()中的权限。而且侧边栏是根据可访问的路线动态生成的，不同级别的用户能看到的侧边栏是不一样的，一定程度上实现了简单的权限管理功能。

　　大家可以看一下这段代码，这是登录认证的核心。

　　//console . log(store . getters . roles)

　　If(store . getters . roles . length===0){//如果当前用户没有拉取user_info信息

　　Store.dispatch (getinfo )。然后(res={//pull user_info

　　const roles=RES . data . role；

　　Store.dispatch(生成路线，{角色})。然后(()={//生成可访问的路由表

　　router . add routes(store . getters . add routes)//动态添加可访问的路由表。

　　//console . log(store . getters . add routers)；

　　下一个({.to })；//hack方法确保addRoutes完成。

　　}否则{

　　//如果不需要动态更改权限，可以直接删除下面的权限判断next ()

　　if(has permission(store . getters . roles，to.meta.role)) {

　　//console.log(to.meta.role)

　　//console . log( has permission )；

　　next()；//

　　}否则{

　　//console.log(没有权限)；

　　next({ path: /，查询：{ nogo back:true } })；

　　//可以删除。

　　下一步(/log in )；//否则，将所有重定向到登录页面。

　　nprogress . done()；//在hash模式下手动更改hash，每次都不会触发临时hack方案。PS:PS:历史模式没有问题。可以删除这一行！

　　});

　　之后，我们来看看框架的目录结构。

　　Build和config是webpack的配置文件，框架的主要文件存储在src中，api是封装的api请求，components是我们的UI组件。Mock是我们前端调试的工具，可以拦截http请求并返回数据，从而独立于后端开发，加快我们的开发进度。当我们需要请求服务器时，我们应该删除这个文件夹。

　　如果我们需要添加一个新的页面，在views中添加一个新的接口文件，然后在router中配置路由以正常访问它。

　　当我们需要向服务器提交页面时，也很简单，运行。

　　npm运行构建：生产

　　项目目录下会有一个额外的dist文件夹，里面有index.html文件和静态文件夹，放在服务器上就好了。您不需要在服务器甚至节点上安装任何环境。

　　再也不用担心发布项目了。

　　框架介绍到此为止。wz框架的特点是自适应、登录认证、UI组件封装、简单易用、稳定高效。

　　希望大家多多使用，多多宣传。

　　后续教程会尽快出来。下节课将讨论如何使用它。

　　有问题最好去我的github提问。检查文章评论要花很长时间。

　　下面教程讲封装UI组件，路由器，webpack，节点命令行构建工具等。

　　希望大家看完这一系列教程后，可以自己做一个前端框架，让自己在工作中得心应手。

　　如果喜欢，点击开始鼓励作者。

　　Github地址：vue-framework-wz

　　在线体验地址：立即体验

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。