下載 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中新增該元件哈
