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
在线体验地址：立即体验
