vue學習（2）手把手教你手動構建ant design項目

 首先確保你的vue-cli已經到了3.0以上，否則不能使用vue create命令。

全局安裝 cnpm i -g @vue/[email protected]

首先,打開cmd，切換到你想放置項目的文件夾，如我想放到D:/學習，就如下設置

然後使用vue create 創建一個項目,名字任取，我取做vue_test,然後它會讓你選擇默認，還是手動添加，我們選擇第二個，即

Manually select features

 出現如下幾個配置項，我們選擇Babel(實現按需加載),Router(路由),Vuex(狀態管理)、Css Pre-processors(CSS預處理）、Linter/Formatter(代碼規範）、Unit Testing(單元測試）

 按空格鍵選擇好後，按回車,會出現如下選擇

我們選擇Y, 然後會出現讓我們選擇CSS預處理器

我們這裏選擇less，可以方便我們定製主題,回車看到如下選擇

選擇最後一項,回車，然後問我們什麼時候進行代碼規範，可以選擇第一項：保存的時候

 然後是選擇用哪種單元測試，我們就選擇Jest

 然後問我們這些配置文件是放到package.json，還是獨立一個文件，我們選擇獨立一個文件

出現如下選擇，我們選擇N 

然後就是等它去創建了，時間可能 有點長

我大約一分半後創建成功 

 現在，我們擁IDEA打開這個項目,可以看到這個項目包括了這些文件

現在，我們輸入npm run serve來看一下效果,最後就是這個效果

現在我們看到package.json，發現我們還沒有ant-design-vue,因此我們需要下載，輸入npm i ant-design-vue，安裝完畢後如下所示

package.json也有ant-design-vue了

好,現在我們就在main.js中引入ant-design-vue 

import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";//引入Antd的css

Vue.use(Antd);

最後main.js如下所示

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";

Vue.use(Antd);
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

然後我們修改一下App.vue使用一下a-button來隨便看看樣式

<template>
  <div id="app">
      <a-button type="primary">按鈕</a-button>
  </div>
</template>

<style lang="less">
#app {
}
</style>

運行npm run serve看看效果，可以看到按鈕的樣式出來了，說明我們Ant design框架已經運用成功

不過我們想用的是less，而不是css，雖然Antd下有less，但我們直接引入less是不行的，需要進行額外配置 

首先，我們需要自己創建一個vue.config.js在根目錄下，然後輸入如下代碼，使用less-loader

// vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
};

這時，我們把引入的css改爲less，再重新啓動，就能發現得到一樣的效果，說明我們less加載成功

現在，我們還想實現按需加載組件，不想直接引入所有組件，佔據大量空間，我們這時可以使用babel,去下載babel-plugin-import

運行npm i babel-plugin-import -D,我們放到"devDependencies"裏

 現在我們可以進行按需加載了,我們修改之前的引入代碼，只引入Button

import { Button } from "ant-design-vue";

Vue.use(Button);

然後在babel.config.js添加配置,整個文件配置如下

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
};

再運行，會得到一樣的效果，但引入大大減少，當我們需要增加組件時，只需往後添加即可

最後，我們希望自己來定製主題，不想用它默認的樣式，less就可以幫助我們做到，因爲它可以定義全局樣式，我們在剛纔寫的vue.config.js裏修改

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        //修改默認樣式
        modifyVars: {
          "primary-color": "#1890ff", // 全局主色
          "link-color": "#1890ff", // 鏈接色
          "success-color": "#52c41a", // 成功色
          "warning-color": "#faad14", // 警告色
          "error-color": "#f5222d", // 錯誤色
          "font-size-base": "14px", // 主字號
          "heading-color": "rgba(0, 0, 0, 0.85)", // 標題色
          "text-color": "rgba(0, 0, 0, 0.65)", // 主文本色
          "text-color-secondary": "rgba(0, 0, 0, 0.45)", // 次文本色
          "disabled-color": "rgba(0, 0, 0, 0.25)", // 失效色
          "border-radius-base": "4px", // 組件/浮層圓角
          "border-color-base": "#d9d9d9", // 邊框色
          "box-shadow-base": "0 2px 8px rgba(0, 0, 0, 0.15)" // 浮層陰影
        },
        javascriptEnabled: true
      }
    }
  }
};

這幾個樣式是Ant design默認的樣式，我們可以根據自己的需要自己去修改。

現在我們就能愉快地使用Ant Design組件來做自己的事了。