大家好,关于还在为写jsp页面而苦恼吗?浩浩带你零基础第一天玩转ant design vue Pro很多朋友都还不太明白,不过没关系,因为今天小编就来为大家分享关于的知识点,相信应该可以解决大家的一些困惑和问题,如果碰巧可以解决您的问题,还望关注下本站哦,希望对各位有所帮助!
头版
注意事项
官网介绍,使用ant design vue pro(以下简称antd Pro)的开发者默认具备一定的Vue基础和Antd使用经验。如果你对这些不熟悉,建议我们先查阅Vue和Ant Design Vue的相关文档。
但这些都不是很重要。浩浩刚接触这个前端框架时,并没有任何Vue基础。我之所以写这个系列文章,就是想给大家介绍一下蚂蚁金服出品的这么一款优秀的前端框架。另一方面,是为了消除开发者没有任何基础的恐惧心理。没有任何基础我们也可以玩转这个框架。毕竟该框架的初衷就是将开发者从繁重的前端三剑客中解放出来。
同时,因为浩浩没有这个框架使用的技术基础,所以他花时间研究了蚂蚁金服前端开发人员的编写方法,总结了经验,完全可以满足我们日常的前端开发系统。如果技术理解有错误,欢迎大家批评指正。如果对您有帮助,请点击三下以示鼓励。话不多说,让我们上菜吧!
开始使用
准备
要使用这个框架,浩浩建议您下载并使用VS Code软件。 VS Code 是一款功能强大且非常易于使用的IDE 编辑工具。不仅可以直接打开终端运行dos命令,还支持打开几乎所有格式的文档。编剧非常有创意。有点矫揉造作的感觉。
在使用antd Pro框架之前,由于技术栈的限制,需要在电脑上安装node.js和git组件。浩浩不提供下载链接。百度可以为您解决这些问题。
安装antd专业版
浩浩假设您已经成功安装了VS Code 软件并安装了准备所需的环境和组件。于是我创建了一个项目文件夹来存放antd Pro前端项目文件,然后打开VS Code并选择Open in File.它提示选择我刚刚创建的文件夹并点击打开,选择上方Terminal的New Terminal软件操作步骤如下图1-1所示:
打开终端
终端打开后,我们需要直接从GitHub 存储库安装最新的脚手架代码。
git克隆--深度=1 https://github.com/vueComponent/ant-design-vue-pro.git
安装过程及成功如图1-2所示:
git拉
简单介绍一下项目目录
成功从git仓库拉取项目文件后,脚手架项目文件目录如图1-3所示:
项目目录
公共
logo.png # 标志
| index.html # Vue入口模板
来源
api # Api ajax 等
assets # 本地静态资源
config # 项目基础配置,包括路由和全局设置
Components # 业务常用组件
core # 项目指导、全局配置初始化、依赖包引入等。
路由器# Vue-Router
存储#Vuex

utils # 工具库
locales # 国际资源
views #业务页面入口及常用模板
App.vue # Vue 模板入口
main.js # Vue入口JS
permission.js # 路由守卫(路由权限控制)
global.less # 全局样式
测试# 测试工具
自述文件.md
package.json
安装脚手架依赖项
执行命令:
npm 安装或纱线安装
npm是为安装node.js提供的依赖下载源。由于下载的文件数量较多,npm 镜像可能不太稳定。您可以使用yarn代替,但前提是先安装yarn命令。就我个人而言,我仍然使用npm 来安装依赖项。如果出现错误,或者出现异常,可以多尝试几次。安装时间较长,安装成功后效果如图1-4:
安装成功
如果网络状况较差,可以使用cnpm进行加速
并使用cnpm 代替yarn 或npm
或者设置yarn的npm加载源,
如yarn config setregistry https://registry.npm.taobao.org
启动脚手架工程
输入启动命令(以npm为例)
//启动脚手架
npm runserve 或yarnrunserve
输入命令后,脚手架启动。成功后的截图如图1-5所示。
启动成功
测试
可以点击本地Local的链接地址,然后就可以打开默认浏览器加载脚手架。成功后的界面如图1-6所示。
测试成功界面
总结






























用户评论
哇!antd pro也太棒了!以前用JSP写页面感觉太慢了,效率太低了???? 看视频好好学习一下,感受下这个轻量级的视觉体验!真的忍不住想要试试手感
有15位网友表示赞同!
ant design vue pro真心是神器啊!以前没接触过vue,想来这里跟着浩浩学练一练,总觉得开发的速度能更快一点,更容易上手。
有13位网友表示赞同!
看到标题就想问一下,JSP和 Ant Design Vue Pro 哪个更适合新手?我是一个小白入门前端学习,需要一些建议
有12位网友表示赞同!
终于有人提到ant design vue pro了!一直在用React,最近想学习vue,感觉Ant Design Vue Pro 挺吸引人的,有大神可以分享下使用体验吗?
有16位网友表示赞同!
JSP页面确实看着有些累赘啊,我一直想找个更便捷的方式来构建前端项目。这个 Ant Design Vue Pro 的框架看起来很有意思,特别是零基础教程,正好适合我!
有10位网友表示赞同!
浩浩老师牛批!终于有人整理了 ant design vue pro 的教程视频,以前想学习vue but 总是被那么多代码和文件劝退???? 这波操作太棒了,希望能学到点东西!
有16位网友表示赞同!
我一直都是用React开发的,但是最近发现Ant Design Vue Pro的组件做得越来越成熟了。而且零基础入门?听起来诱惑极大!
有19位网友表示赞同!
说实话,JSP写页面真的很慢????,我一直在寻找更好的解决方案。这段时间看到很多关于ant design vue pro 的讨论,感觉这个框架很有潜力!
有18位网友表示赞同!
我对 ant design 的组件设计很感冒 ???? 从开发效率到视觉体验都很棒,看标题想冲!今天就来跟着浩浩学一遍吧!
有19位网友表示赞同!
JSP确实很古老了,现在用Ant Design Vue Pro 这个现代的框架学习开发前端项目,感觉会更加有乐趣!
有8位网友表示赞同!
一直都是用React, 看来 ant design vue pro也值得一试啊!跟着浩浩学一遍从零开始,说不定能让我更快地上手vue呢?
有12位网友表示赞同!
这篇文章写的真棒!终于有人分享了 ant design vue pro 从零到精通的学习路线。我可是个前端小白,一定要好好学习学习。
有13位网友表示赞同!
jsp页面太费时了???? ,真的需要学习新技术来提升工作效率。Ant Design Vue Pro 听起来就很强大,今天就去试试手 Feel 一下!
有11位网友表示赞同!
我也一直在纠结要不要换框架使用 ant design vue pro ,感觉这个平台的组件设计和整体风格都很好,只是不知道入门难度怎么样?如果有零基础教程就太好了!
有17位网友表示赞同!