从零开始ant-design-vue-pro开发笔记（一）

开始

从这里开始是用ant-design-vue组件写ant-design-vue-pro这个后台项目实现步骤的从零开始搭建的过程，视频地址，它采用了ant-desgin-vue的组件库作为素材开发，进一步提炼了中后台管理系统的产品原型，可以帮助快速搭建后台页面。技术栈： ES2015+、Vue.Js、Vuex、Vue-Router、g2 和 antd-vue。

初始化项目

采用Vue cli工具帮我们快速搭建项目脚手架，没有安装 Vue cli 3 的需要先用 npm 或者 yarn 安装（安装步骤略）。

下面开始是通过 Vue cli 3 创建项目，引入必要的插件、依赖等基本步骤：

创建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

安装依赖的组件库

  npm i ant-design-vue moment

Webpack和Babel配置

安装webpack和Babel配置：

webpack：

项目根目录下增加cli的配置文件 vue.config.js ，添加如下配置来支持less(配置链接)：

  module.exports = {

    css: {

      loaderOptions: {

        less: {

          javascriptEnabled: true

        }

      }

    }

  };

安装babel插件：

  npm i --save-dev babel-plugin-import

babel.config.js中加入按需加载less的配置：

  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>

来按需渲染组件了。

设置路由和布局

通过修改router.js来设置路由信息，里面有布局路由组件、基础视图组件、404组件，具体代码可以参考：https://github.com/vueComponent/ant-design-vue-pro/ 可以用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>也可以做动画过渡效果)。