從零開始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

1. 安裝依賴的組件庫

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>也能夠作動畫過渡效果)。