【技术博客】基于vue的前端快速开发(工具篇)
vue教程">一、Vue教程
vue.js是一套构建用户界面的渐进式框架。vue采用自底向上增量开发的设计。vue的核心库只关心视图层，非常容易学习，非常容易与其它库和已有项目整合。vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用。vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
这里介绍一些我学习vue时用的教程。
1.入门教程
官网教程：https://cn.vuejs.org/v2/guide/
vue.js的官网教程是很全面的，包括文档和视频。
这里还推荐一个我经常用的教程。
菜鸟教程：https://www.runoob.com/vue2/vue-tutorial.html
2.路由
对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以移步 vue-router 文档。
这块知识是比较重要的。这里推荐一个视频讲解，它是按着官网的教程来的，很详细。
B站教程：https://www.bilibili.com/video/BV1tE411X7Kz
3.vue-cli
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。
一开始学习，我对vue-cli项目的目录结构不是很了解，这篇博客讲的很详细，也推荐给你们。
博客参考：https://www.cnblogs.com/huangfeihong/p/9141273.html
一个vue-cli的项目结构如下：
二、模板
我们这个项目可以套用后台管理平台的框架。但是从零搭建一套多样化后台管理并不容易，目前有许多开源、免费、样式丰富的后台管控面板。这里介绍几个优秀的后台管理控制面板。
1.vue-Element-Admin
Github源码：https://github.com/PanJiaChen/vue-element-admin
官网教程：https://panjiachen.github.io/vue-element-admin-site/zh/guide/
在线预览：https://panjiachen.gitee.io/vue-element-admin/#/login?redirect=%2Fdashboard
介绍：vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
我们团队选的就是这个宝藏模板啦！不过vue-element-admin的定位是后台集成方案，集成了很多你可能用不到的功能，会造成不少的代码冗余，所以不太适合当基础模板进行二次开发。我们选择的是其基础模板vue-admin-template进行的二次开发。官网上的教程丰富详尽，庆幸一开始选择了这个宝藏模板，让前端的开发变得层次清晰，有条理！！
2.iview-admin
GitHub源码：https://github.com/iview/iview-admin
介绍：iView Admin是一个前端管理后台集成解决方案。它基于Vue.js并使用UI Toolkit iView。
3.vue-manage-system
git地址：https://github.com/lin-xin/vue-manage-system
在线预览：https://lin-xin.gitee.io/example/work/#/dashboard
介绍：基于 Vue + Element UI 的后台管理系统解决方案。
4.vue-framework-wz
Github源码：https://github.com/herozhou/vue-framework-wz
在线预览：https://herozhou.github.io/vue-framework-wz/#/login
介绍：后台管理框架，集成了权限管理，登录功能，UI组件，七牛上传等功能。
三、PC端常见的UI框架
工欲善其事，必先利其器。这些UI框架一定是你前端开发的利器！
1、Vuetify
官网地址：https://vuetifyjs.com/zh-Hans/
介绍：Vuetifyjs 根据材料设计规格提供 UI 布局。 V 1.0 Alpha 版本提供了超过 80个 reusbale 组件，其中包含一个易于记忆的语义设计，它基于名称简单明了 type-as-you 的类型属性。在GitHub 上有超过 25.4K 的 star。
Vuetify是一款非常精致的UI框架，它提供了很多常用的组件，依靠Material Design的设计优势，让你无需编写一行css代码就可以得到非常美观的界面功能。响应式做的不错，移动PC多段支持，配置灵活，功能全面。我们项目大部分的组件用的就是vuetify的哦，强烈安利哟~
2、ElementUI
官网地址：https://element.eleme.cn/#/zh-CN
介绍：Element，饿了么前端开源的UI框架，一套为开发者，设计师和产品经理准备的基于Vue 2.0的桌面端组件库。一经面世，就收获大量程序员的芳心。在github 上更是高达45.2k的star早已说明一切。用于开发PC端的页面还是绰绰有余的。其更新频率还是很高的，基本一周到半个月都会发布一个新版本。
3、iview
官网地址：https://www.iviewui.com/
介绍：iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发，支持 ES2015 高质量、功能丰富 友好的 API ，自由灵活地使用空间，由TalkingData开发维护。
iView的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的Vue UI组件框架。iView生态也做得很好，还有开源了一个iView Admin，做后台非常方便。官网上介绍，iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。
4、vueStrap
官网地址：http://yuche.github.io/vue-strap/
介绍：基于 Vue.js 的 Bootstrap 组件。该仓库包含一系列基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件。所以不需要 jQuery 和 Bootstrap 的 JavaScript 文件，唯一需要依赖的是: Vue.js Bootstrap CSS ，VueStrap 不依赖某个非常精确的 Bootstrap 版本。如果喜欢bootstrap的小伙伴又不想换jquery的开发方式是不二的选择。
5、vue-beauty
官网地址： https://fe-driver.github.io/vue-beauty/#/components/button
介绍：基于 ant design 的漂亮的 vue 组件库；vue-beauty 是一套基于 vue.js 和 ant-design样式 的PC端 UI 组件库，旨在帮助开发者提升产品体验和开发效率、降低维护成本。
6、at-ui
官网地址： https://at-ui.github.io/at-ui/#/zh
介绍：AT-UI 是一个模块化的前端 UI 框架，开发基于Vue.js 的快速和强大的 Web 界面。专门为桌面应用程序构建，AT-UI提供了一套 npm + webpack + babel 前端开发工作流程。全英文的文档对用户来说可能是具有有挑战性的，但它提供了一个体面的干净整洁的 UI 组件。
四、前端图标库
1、 Iconfont-阿里巴巴矢量图标库
官网地址：http://iconfont.cn/
介绍：网站多为国内设计师的原创作品，有官方与色彩图标分类，线条圆滑，风格多样，包含许多国内应用和具有中国特色的图标。下载时需要登陆，可以收藏图标，大多数为免费下载。下载时可以选择大小，线条颜色，支持SVG,AI,PNG格式。
2、 Icons - Material Design
官网地址：https://material.io/icons/
介绍：包含了Google所有官方图标。免费下载，提供黑白两色和不同大小的下载。下载后为安装包格式，解压后分为安卓，iOS和web三个文件夹，里面有不同大小的PNG格式图标。同时每个图标还提供ICON FONT，主要用于不同系统的HTML，CSS，网站内有详细的教程。
3、 Ionicons
官网地址：http://ionicons.com/
介绍：高级设计的图标，用于Web，iOS，Android和桌面应用程序。 支持SVG和Web字体。 完全开源，MIT由Ionic Framework团队授权和构建。
4、Font Awesome
官网地址：https://fontawesome.com/
介绍：一套绝佳的图标字体库和 CSS 框架。 Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。网站分为中英文版本，对于不同图标有名称分类，需要下载插件使用。用于HTML等，选择图标后会有ICON CODE，网站可以将ICON CODE发送到你的邮箱。
以上是 【技术博客】基于vue的前端快速开发(工具篇) 的全部内容， 来源链接： utcz.com/z/376222.html
