从零开始ant-design-vue-pro开发笔记（⼀）
开始
从这⾥开始是⽤ant-design-vue组件写ant-design-vue-pro这个后台项⽬实现步骤的从零开始搭建的过程，，它采⽤了ant-desgin-vue的组件库作为素材开发，进⼀步提炼了中后台管理系统的产品原型，可以帮助快速搭建后台页⾯。技术栈：、、、、和。
初始化项⽬
采⽤⼯具帮我们快速搭建项⽬脚⼿架，没有安装Vue cli 3的需要先⽤npm或者yarn安装（安装步骤略）。
下⾯开始是通过Vue cli 3创建项⽬，引⼊必要的插件、依赖等基本步骤：
1. 创建ant-desgin-vue-pro项⽬
d:
cd vue
vue create ant-design-vue-pro
选择
以下位⽣成项⽬配置的选项列：按空格为选中，回车为确定到下⼀步：
//选择特性
Manually select features：
Babel、Router、Vuex、CSS Pre-processors、Linter/Formatter、Unit Testing
//是否⽤history的路由
use hisotry mode ： y
//选择css预加载器
pick a Css pre-processor ：Less
//选择代码检查和美化器
pick a linter/formatter : Eslint + Prettier
/
/选择额外的代码检查特性
pick additional lint features:
Lint on save、Lint and fix on commit
//选择单元测试
pick a unit testing：
Jest
//是否选择单独的配置⽂件放配置⽽不是都放⼊package.json
where do you prefer placing config for Babel，PostCSS：
In decicated config files
//是否保存预设值给将来使⽤
Save this as a preset for future projects：
y
//保存配置为什么名字
save preset as：
ant-design-pro-vue
2. 安装依赖的组件库
npm i ant-design-vue moment
Webpack和Babel配置
安装webpack和Babel配置：
webpack：
项⽬根⽬录下增加cli的配置⽂件fig.js，添加如下配置来⽀持less(配置)：
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
};
安abel插件：
npm i --save-dev babel-plugin-import
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
] // `style: true` 会加载 less ⽂件
]
后⾯就可以按需加载需要的组件了：
main.js中加⼊：
import { Button, Icon } from "ant-design-vue";
Vue.use(Button);
Vue.use(Icon);
组件template中可以加⼊：
<a-button>hello world</a-button>
antdesign教程
来按需渲染组件了。
设置路由和布局
通过修改router.js来设置路由信息，⾥⾯有布局路由组件、基础视图组件、404组件，具体代码可以参考：可以⽤git checkout代码到本地，切换到0.0.3这个tag标签下查看完整的代码。
效果图：
改变url的时候的进度条插件nprogress
安装：
npm i nprogress
引⼊：
import "nprogress/nprogress.css";
import NotFound from "./views/404";
路由后⾯使⽤：
router.beforeEach((to, form, next) => {
NProgress.start();
next();
});
router.afterEach(() => {
NProgress.done();
});
这样就可以实现url变化时候，页⾯上有⼀个加载的进度条显⽰动画效果(ant-vue作者采⽤NProgress来做动画效果，Vue官⽅的<transition>也可以做动画过渡效果)。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。