Ant Design Vue的初始化,按需加載,定制主題,布局

官方資源

#官網
https://www.antdv.com/docs/vue/introduce-cn/

安裝和初始化項目

安裝vue的腳手架工具

npm install -g @vue/cli

創建antd-demo Vue項目

這種方式就是vue-cli 3

vue create antd-demo

上圖是讓你選擇默認的vue2，vue3，還是自定義構建，因為我不喜歡eslint，所有我選擇自定義構建、

配置如下

最后配置

若安裝緩慢報錯，可嘗試用 cnpm 或別的鏡像源自行安裝：rm -rf node_modules && cnpm install。

安裝完成，會有一個antd-demo文件夾，如

這時候表示vue的項目骨架已經搭建完成了

安裝ant-design-vue組件

進入剛才生成的antd-demo文件夾，執行

npm i --save ant-design-vue

安裝完成后打開package.json，可以查看組件版本

hello world

這是一個簡單的Demo

全局引入組件

我這邊使用全局引入，你也可以使用局部引入

文檔：https://www.antdv.com/docs/vue/getting-started-cn/

找到src下的main.js 引入如圖所示

main.js

import Vue from 'vue'
import App from './App.vue'

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

Vue.config.productionTip = false

//全局引入
Vue.use(Antd);


new Vue({
  render: h => h(App),
}).$mount('#app')

使用button組件

修改app.vue

<!--增加hello world按鈕-->
<a-button type="primary">Hello world</a-button>

在antd-demo目錄運行

npm run serve

如上圖表示運行成功，接着訪問上圖的鏈接http://localhost:8081/

如下圖表示正常

高級配置-使用 babel-plugin-import 按需加載

前面我們已經把組件成功運行起來了，但是在實際開發過程中還有很多問題，例如上面的例子實際上加載了全部的 antd 組件的樣式（對前端性能是個隱患）。

此時我們需要對 vue-cli 的默認配置進行自定義。

https://www.antdv.com/docs/vue/use-with-vue-cli-cn/#高級配置

安裝

npm install babel-plugin-import --dev

關於修改Beble配置的問題

官網上只有vue-cli 2/3的配置提示，但是我查詢了一下我本機的配置

vue-cli 4 了，然后我仔細觀察

嗯，應該按照vue-cli 3的配置來沒問題

babel.config.js配置

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

main.js修改成按需加載組件

import Vue from 'vue'
import App from './App.vue'

//引入antd
/*import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';*/

//只引入button組件
import { Button } from 'ant-design-vue'

Vue.config.productionTip = false

//全局引入
//Vue.use(Antd);
//組件引入, 並配置按需加載
Vue.component(Button.name, Button);

new Vue({
  render: h => h(App),
}).$mount('#app')

Failed to resolve loader: less-loader的問題

上面配置完了，重新運行

npm run serve

發現提示

Failed to resolve loader: less-loader
You may need to install it.

這個問題有兩種

• 安裝less的方式

• 不使用less的方式

安裝less的方式

安裝

npm install less less-loader --save-dev

安裝完了，重新啟動還是報錯

.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
Error in D:\myCode\antd-demo\node_modules\ant-design-vue\es\style\color\bezierEasing.less (line 110, column 0)

參考：https://www.antdv.com/docs/vue/customize-theme-cn#在-vue-cli-3-中定制主題

項目根目錄下新建文件vue.config.js,並寫入下面內容

// vue.config.js for less-loader@6.0.0
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

重新啟動就ok了

修改babel配置

不推薦,因為定制主題也要用到less

將style:true 改為 'css'

重新啟動

npm run serve

就沒問題

babel.config.js配置

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

定制主題

https://www.antdv.com/docs/vue/customize-theme-cn/

Ant Design Vue 的樣式變量 #

antd 的樣式使用了 Less 作為開發語言，並定義了一系列全局/組件的樣式變量，你可以根據需求進行相應調整。

以下是一些最常用的通用變量，所有樣式變量可以在 這里 找到。

@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); // 浮層陰影

如果以上變量不能滿足你的定制需求，可以給我們提 issue。

定制方式 #

我們使用 modifyVars 的方式來進行覆蓋變量。下面將針對不同的場景提供一些常用的定制方式。

使用示例

修改vue.config.js,沒有就新建

// vue.config.js for less-loader@6.0.0
module.exports = {
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    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,
                },
            },
        },
    },
};

布局

布局方式antd 有三種

• Grid 柵格
• Layout 布局
• Space 間距

去掉頭部

去App.vue注釋掉

<div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/layout">layout</router-link>
</div>

增加layout路由

在antd-demo\src\router\index.js中增加

{
    path: '/layout',
    name: 'layout',
    component: () => import( '../views/Layout.vue')
}

Layout 布局

文檔：https://www.antdv.com/components/layout-cn/

基礎自定義觸發器布局

./views/Layout.vue

<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">
          nav 1
        </a-menu-item>
        <a-menu-item key="2">
          nav 2
        </a-menu-item>
        <a-menu-item key="3">
          nav 3
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :default-selected-keys="['1']"
          :default-open-keys="['sub1']"
          :style="{ height: '100%', borderRight: 0 }"
        >
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="user" />subnav 1</span>
            <a-menu-item key="1">
              option1
            </a-menu-item>
            <a-menu-item key="2">
              option2
            </a-menu-item>
            <a-menu-item key="3">
              option3
            </a-menu-item>
            <a-menu-item key="4">
              option4
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="laptop" />subnav 2</span>
            <a-menu-item key="5">
              option5
            </a-menu-item>
            <a-menu-item key="6">
              option6
            </a-menu-item>
            <a-menu-item key="7">
              option7
            </a-menu-item>
            <a-menu-item key="8">
              option8
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title"><a-icon type="notification" />subnav 3</span>
            <a-menu-item key="9">
              option9
            </a-menu-item>
            <a-menu-item key="10">
              option10
            </a-menu-item>
            <a-menu-item key="11">
              option11
            </a-menu-item>
            <a-menu-item key="12">
              option12
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>List</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
        >
          Content
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
    };
  },
};
</script>

<style>
#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>

運行

npm run serve

效果

可以看到高度沒有鋪滿

高度鋪滿

.ant-layout{
  height: 100%;
}

側邊布局

<template>
    <a-layout id="components-layout-demo-side" style="min-height: 100vh">
        <a-layout-sider v-model="collapsed" collapsible>
            <div class="logo" />
            <a-menu theme="dark" :default-selected-keys="['1']" mode="inline">
                <a-menu-item key="1">
                    <a-icon type="pie-chart" />
                    <span>Option 1</span>
                </a-menu-item>
                <a-menu-item key="2">
                    <a-icon type="desktop" />
                    <span>Option 2</span>
                </a-menu-item>
                <a-sub-menu key="sub1">
                    <span slot="title"><a-icon type="user" /><span>User</span></span>
                    <a-menu-item key="3">
                        Tom
                    </a-menu-item>
                    <a-menu-item key="4">
                        Bill
                    </a-menu-item>
                    <a-menu-item key="5">
                        Alex
                    </a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub2">
                    <span slot="title"><a-icon type="team" /><span>Team</span></span>
                    <a-menu-item key="6">
                        Team 1
                    </a-menu-item>
                    <a-menu-item key="8">
                        Team 2
                    </a-menu-item>
                </a-sub-menu>
                <a-menu-item key="9">
                    <a-icon type="file" />
                    <span>File</span>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0" />
            <a-layout-content style="margin: 0 16px">
                <a-breadcrumb style="margin: 16px 0">
                    <a-breadcrumb-item>User</a-breadcrumb-item>
                    <a-breadcrumb-item>Bill</a-breadcrumb-item>
                </a-breadcrumb>
                <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
                    Bill is a cat.
                </div>
            </a-layout-content>
            <a-layout-footer style="text-align: center">
                Ant Design ©2018 Created by Ant UED
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>
<script>
    export default {
        data() {
            return {
                collapsed: false,
            };
        },
    };
</script>

<style>
    #components-layout-demo-side .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
    }
</style>

效果