从零开始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 创建项目，引入必要的插件、依赖等基本步骤：

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的配置文件 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>也可以做动画过渡效果)。