还在苦苦写jsp页面?浩浩带你零基础玩转ant design vue Pro第一天

喜欢就关注我吧，订阅更多最新消息

什么是ant design vue Pro

以下文字来自Ant Design Pro官网介绍：官网传送门: ant design vue Pro官网。Ant Design Pro 是一个企业级中后台前端/设计解决方案，我们秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。

注意事项

官网介绍到使用ant design vue pro(以下简称antd Pro)的开发者默认有一定的 Vue 基础和 Antd 使用经验,如果你对这些还不熟悉，他们建议咱们先查阅相关文档 Vue、Ant Design Vue。

但是这些都不是很重要，浩浩刚开始接触这套前端框架时，也没有任何vue基础，之所以写这个系列文章，一方面是想向大家介绍这么一套蚂蚁金服出品的优秀的前端框架，另一方面是消除没有任何基础的开发者的畏难心理，没有基础我们也可以玩转这套框架，毕竟框架的初心就是把开发者从繁重的前端三剑客中解放出来。

同时由于浩浩也没有这套框架所用到的技术基础，完全是耗费时间去研究了蚂蚁金服前端开发人员的写法而总结出来的心得，完全可以满足我们日常系统的前端开发。如果有技术理解上的错误，欢迎大家批评指正。如果对你有帮助，请您一键三连以示鼓励。废话不多说，直接上菜！

开始使用

准备工作

使用这套框架，浩浩建议你下载使用VS Code软件，VS Code作为强大的IDE编辑工具，极好上手，不仅可以直接打开terminals运行dos命令，而且支持打开几乎所有格式的文档，编辑器很花里胡哨，稍微还有一点装X的感觉。

在使用antd Pro这套框架之前，碍于技术栈的限制，电脑上需要安装node.js以及git组件，下载链接浩浩就不提供了，百度可以解决你这些问题。

安装antd Pro

浩浩假设你已经成功安装VS Code软件，并且已经安装好了准备工作中所需要的环境与组件。于是乎建立一个工程文件夹用于存放antd Pro前端项目文件，然后打开VS Code选择File中的Open…提示选择刚才建好的文件夹点击打开，选择软件上方的Terminal的New Terminal，操作步骤如下图1-1所示：

终端打开之后，我们需要从 GitHub 仓库中直接安装最新的脚手架代码。

安装过程以及成功如图1-2所示：

简单介绍一下工程目录

从git仓库成功拉取工程文件成功之后，脚手架工程文件目录如图1-3所示：

├── public

│ └── logo.png # LOGO

| └── index.html # Vue 入口模板

├── src

│ ├── api # Api ajax 等

│ ├── assets # 本地静态资源

│ ├── config # 项目基础配置，包含路由，全局设置

│ ├── components # 业务通用组件

│ ├── core # 项目引导, 全局配置初始化，依赖包引入等

│ ├── router # Vue-Router

│ ├── store # Vuex

│ ├── utils # 工具库

│ ├── locales # 国际化资源

│ ├── views # 业务页面入口和常用模板

│ ├── App.vue # Vue 模板入口

│ └── main.js # Vue 入口 JS

│ └── permission.js # 路由守卫(路由权限控制)

│ └── global.less # 全局样式

├── tests # 测试工具

├── README.md

└── package.json

安装脚手架依赖

执行命令：

npm是安装node.js提供的依赖下载源，由于下载的文件比较多，npm镜像可能不是很稳定，可以使用yarn代替，但是前提还是要先安装yarn指令，个人还是使用npm安装依赖，如果有报错或者异常出现，可以多尝试几次。安装时间较长，安装成功之后的效果如图1-4所示：

如果网络状况不佳，可以使用 cnpm 进行加速

并使用 cnpm 代替 yarn或npm

或者设置 yarn 的 npm 加载源，

如 yarn config set registry https://registry.npm.taobao.org

启动脚手架工程

输入启动命令（以npm 为例）

输入命令之后脚手架开始启动，成功之后的截图如图1-5所示

测试

可以单击本地Local的链接地址，之后就可以打开默认浏览器来加载脚手架。成功之后的界面如图1-6所示

总结

到此脚手架工程就启动起来了，说明依赖什么都已经加好了。我们之后就可以根据自己系统的所需进行修改某些文件，毕竟这是一套比较全的示例工程，有些东西根据我们的实际是不需要的，所以我们要进行取舍，但是我们对这个工程又不是很了解，也没有其他基础，所以还想继续使用，请关注我了解之后的使用方法，第一天就只需学会脚手架的安装与启动。第二天给大家讲页面路由的逻辑实现以及配置。请大家继续关注，这可能是全网唯一的分享这套优秀的前端框架的系列文章，大家多多鼓励，你的每一次点赞收藏转发都是鼓励我不断更新下去的动力，敬请期待！