vue3.0使用ant-design-vue進行按需加載原來這麼簡單

本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！

下載 ui庫

yarn add ant-design-vue
默認是全局引入，打包後體積很大，
很是影響首屏加載速度，
複製代碼

按需加載

下載按需加載的插件;推薦使用cnpm
cnpm install babel-plugin-import --save-dev 下載在開發環境中
複製代碼

在項目的根目錄下建立 babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ["import", 
      { 
        libraryName: "ant-design-vue",
        libraryDirectory: "es",
        style: true,   // `style: true` 會加載 less 文件
      }
    ]
  ]
}
複製代碼

在項目跟目錄下建立vue.config.js配置項目信息

const Timestamp = new Date().getTime()
module.exports = {
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].title = '個人vue3.0' //這個是網站標題
            return args
        })
    },
    css: {
        loaderOptions: {
            // 你的基礎樣式 由於沒有我就註釋了
            // sass: {
            //     data: `
            // 		@import "@/assets/style/base.scss";
            // 	`,
            // },

            //這隻主題樣式，修改此文件後須要從新啓動，
            less: {
                lessOptions: {
                    modifyVars: {
                      //這是配置css主題色
                      'primary-color': '#007AFF', 
                    },
                    javascriptEnabled: true,
                },
            },
        },
        // 每次打包後生成的css攜帶時間戳
        extract: {
            filename: `css/[name].${Timestamp}.css`,
            chunkFilename: `css/[name].${Timestamp}.css`,
        },
    },
    productionSourceMap: false,
    //打包後相對目錄
    publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
    configureWebpack: {
        //每次打包後生成的js攜帶時間戳
        output: {
            filename: `[name].${Timestamp}.js`,
            chunkFilename: `[name].${Timestamp}.js`,
        },
    },
}

複製代碼

安裝less與less-loader

咱們須要確認本身是否安裝了 less與less-loader
【本身看一下】
cnpm install less less-loader --save-dev  【進行安裝】
可能你安裝後會出現ess less-loader的版本太高。
這個時候你須要將你的版本降低一下

咱們爲何須要安裝less與less-loader
由於咱們ant-design-vue是用less編寫的
配置babel.config.js後，

下面是個人版本庫

dependencies用戶發佈環境
"dependencies": {
  "@ant-design/icons-vue": "^6.0.1",
  "ant-design-vue": "^2.2.1",
  "core-js": "^3.6.5",
  "vue": "^3.0.0",
  "vue-class-component": "^8.0.0-0",
  "vue-router": "^4.0.0-0"
},


devDependencies用於本地環境開發時候
"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-plugin-import": "^1.13.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "less": "^3.13.1",
    "less-loader": "^7.1.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5"
  },
複製代碼

devDependencies和dependencies區別?

devDependencies是隻會在開發環境下依賴的模塊，
生產環境不會被打入包內。
經過NODE_ENV=developement或
NODE_ENV=production指定開發仍是生產環境。

而dependencies依賴的包不只開發環境能使用，
生產環境也能使用。
其實這句話是重點，
按照這個觀念很容易決定安裝模塊時是使用--save仍是--save-dev

因此像css預處理語言咱們確定是--save-dev
像ui庫請求axios咱們確定是--save
複製代碼

main.ts 組件進行按需引入

import { createApp } from 'vue'
// 引入App.vue這個入口文件
import App from './App.vue'
// 引入路由
import router from './router'
const app = createApp(App)
import {
    Button,
    ConfigProvider,
    Layout,
    Menu,
    message,
    Input,
    Space,
    Dropdown,
    Divider,
    Form,
    AutoComplete,
    Modal,
    Tree,
    Drawer,
    Row,
    Col,
    Select,
    DatePicker,
    Tooltip,
    Breadcrumb,
    Popconfirm,
    InputNumber,
    Table,
    Pagination,
} from 'ant-design-vue'
app.use(Button)
    .use(Layout)
    .use(ConfigProvider)
    .use(Menu)
    .use(Input)
    .use(Space)
    .use(Dropdown)
    .use(Divider)
    .use(Form)
    .use(AutoComplete)
    .use(Modal)
    .use(Tree)
    .use(Drawer)
    .use(Row)
    .use(Col)
    .use(Select)
    .use(DatePicker)
    .use(Tooltip)
    .use(Breadcrumb)
    .use(Popconfirm)
    .use(InputNumber)
    .use(Table)
    .use(Pagination)
    .use(router).
    mount('#app')
複製代碼

按需加載說明和優點

後只需從 ant-design-vue 引入模塊便可，無需單獨引入樣式.
babel-plugin-import 會幫助你加載 JS 和 CSS
import { Button } from "ant-design-vue";
也就是說你不須要引入
import 'ant-design-vue/dist/antd.css'
這個樣式文件了
複製代碼

Vue3.0出現Cannot read property ‘use‘ of undefined

其實很簡單 哈哈哈 就是由於版本的問題
執行  cnpm i --save ant-design-vue@next
複製代碼

Vue3.0出現Cannot find module 'vue-loader-v16/package.json

當你第一次刪除後node-module可能會報錯:
Cannot find module 'vue-loader-v16/package.json'.
你在yarn.lock 能夠看見這個文件的描述
先卸載vue-loader-v16依賴
npm uninstall vue-loader-v16

以後使用cnpm安裝vue-loader-v16依賴
cnpm i vue-loader-v16
複製代碼

vue3.0 ant-design-vue Failed to resolve component: a-layout-header

若是是這樣的警告提示
這就說明了 你使用的a-layout-header沒有進行加載
須要你在main.ts中添加該組件哈
複製代碼