前端UI組件設(shè)計(jì)系統(tǒng)【免費(fèi)下載鏈接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 項(xiàng)目地址https://gitcode.com/gh_mirrors/an/ant-design-vue點(diǎn)擊查看免費(fèi)下載vue-cli 是 Vue 生態(tài)中最流行的應(yīng)用腳手架工具之一本文以 ant-design-vue 官方文檔《在 vue-cli 3 中使用》為核心脈絡(luò)完整演示從安裝腳手架、初始化項(xiàng)目到引入 antd 組件并在頁(yè)面中渲染出第一個(gè)按鈕的全過(guò)程。同時(shí)結(jié)合本倉(cāng)庫(kù)ant-design-vue 4.2.6的源碼與構(gòu)建產(chǎn)物配置深入講解 Button 組件局部注冊(cè)、全局注冊(cè)的底層實(shí)現(xiàn)以及 ES modules 按需加載tree shaking的原理幫助你在真實(shí)工程中做出正確的接入與優(yōu)化決策。安裝 vue-cli 并初始化項(xiàng)目首先在命令行中安裝 vue-cli 腳手架工具。如果你更習(xí)慣使用 yarn 包管理器也可以先安裝 yarn再通過(guò) yarn 安裝 vue-cli$ npm install -g vue/cli # OR $ yarn global add vue/cli安裝完成后使用vue create命令新建一個(gè)項(xiàng)目這里以antd-demo為例$ vue create antd-demo執(zhí)行該命令后工具會(huì)引導(dǎo)你進(jìn)行項(xiàng)目配置如選擇默認(rèn)預(yù)設(shè)、手動(dòng)選擇 Babel/ESLint/Router 等特性隨后自動(dòng)初始化腳手架并安裝 Vue 項(xiàng)目的各種必要依賴。如果過(guò)程中出現(xiàn)網(wǎng)絡(luò)問(wèn)題導(dǎo)致依賴下載緩慢或失敗可以嘗試配置代理或切換至其他 npm registry例如國(guó)內(nèi)鏡像源后重新安裝。初始化完成后進(jìn)入項(xiàng)目目錄并啟動(dòng)開發(fā)服務(wù)器$ cd antd-demo $ npm run serve此時(shí)瀏覽器訪問(wèn) http://localhost:8080/ 看到Welcome to Your Vue.js App的界面即表示項(xiàng)目運(yùn)行成功。認(rèn)識(shí) vue-cli 生成的默認(rèn)目錄結(jié)構(gòu)以下是 vue-cli 生成的默認(rèn)工程結(jié)構(gòu)理解它有助于后續(xù)定位需要修改的文件├── README.md ├── babel.config ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── App.vue │ └── main.js └── yarn.lock其中src/main.js是應(yīng)用入口負(fù)責(zé)創(chuàng)建 Vue 應(yīng)用實(shí)例并掛載到 DOMsrc/App.vue是根組件。接下來(lái)對(duì) antd 的引入就集中在這兩個(gè)文件中。安裝 ant-design-vue使用 yarn或 npm安裝 ant-design-vue$ yarn add ant-design-vue也可以使用 npm 并顯式指定 4.x 版本線與當(dāng)前倉(cāng)庫(kù)package.json中的版本保持一致$ npm i --save ant-design-vue4.x從本倉(cāng)庫(kù) package.json 可以看到ant-design-vue 4.x 的peerDependencies聲明為vue: 3.2.0即它面向 Vue 3 設(shè)計(jì)使用時(shí)請(qǐng)確保工程中安裝的是 Vue 3 及以上版本同時(shí)engines.node要求12.22.0。修改 src/main.js按需引入 Button 組件編輯src/main.js按需引入 antd 的按鈕組件以及樣式文件import Vue from vue; import Button from ant-design-vue/lib/button; import ant-design-vue/dist/antd.css; import App from ./App; const app createApp(App); /* 會(huì)自動(dòng)注冊(cè) Button 下的子組件, 例如 Button.Group */ app.use(Button).mount(#app);這段代碼的要點(diǎn)如下import Button from ant-design-vue/lib/button直接從lib/button子路徑引入 Button 組件屬于局部注冊(cè)按需引入方式不會(huì)把整個(gè) antd 打入包中import ant-design-vue/dist/antd.css引入全部組件樣式。在當(dāng)前倉(cāng)庫(kù)的 英文版文檔 中樣式文件使用的是ant-design-vue/dist/reset.cssv4 起官方更推薦reset.css組件樣式會(huì)在運(yùn)行時(shí)由 cssinjs 按需注入兩種文件都在包的dist目錄下可按需選擇app.use(Button)會(huì)調(diào)用 Button 的install方法完成注冊(cè)并自動(dòng)注冊(cè)其下的子組件例如Button.Group。之所以能自動(dòng)注冊(cè)Button.Group可以從源碼中找到直接證據(jù)。在 components/button/index.ts 中Button.Group ButtonGroup; /* istanbul ignore next */ Button.install function (app: App) { app.component(Button.name, Button); app.component(ButtonGroup.name, ButtonGroup); return app; };即 Button 組件的install鉤子會(huì)同時(shí)調(diào)用app.component注冊(cè)AButton與AButtonGroup兩個(gè)全局組件因此在模板中可以直接使用a-button和a-button-group。修改 App.vue渲染第一個(gè) antd 按鈕接著修改src/App.vue的 template 內(nèi)容template div idapp img src./assets/logo.png a-button typeprimaryButton/a-button /div /template ...保存后回到瀏覽器頁(yè)面上即可看到一個(gè) antd 的藍(lán)色主按鈕typeprimary。至此 antd 已成功接入 vue-cli 工程接下來(lái)你可以繼續(xù)選用其他組件開發(fā)應(yīng)用。關(guān)于a-button的更多用法可以參考 Button 組件 API 文檔type支持primary、default、dashed、link、text、ghost等取值size支持large、middle、small此外還有block、danger、disabled、loading、icon、shape等常用屬性并可透?jìng)髟?button 的所有屬性。深入ant-design-vue 的注冊(cè)機(jī)制與按需加載原理在真實(shí)工程中除了按需引入 Button你還可能希望全局注冊(cè)所有組件或希望打包體積盡可能小。理解 ant-design-vue 的兩種接入方式與底層實(shí)現(xiàn)能幫助你做出正確選擇。方式一全局完整注冊(cè)如果業(yè)務(wù)中組件使用面廣可以直接從包入口引入并全局注冊(cè)import { createApp } from vue; import Antd from ant-design-vue; import App from ./App; import ant-design-vue/dist/reset.css; const app createApp(App); app.use(Antd).mount(#app);全局注冊(cè)的底層實(shí)現(xiàn)在 components/index.ts 的install函數(shù)中它遍歷 components/components.ts 導(dǎo)出的全部組件逐個(gè)調(diào)用app.use(component)并額外注冊(cè)StyleProvidercssinjs 樣式上下文同時(shí)把message、notification以及Modal的info/success/error/warning/confirm/destroyAll等命令式 API 掛載到app.config.globalProperties上方便通過(guò)this.$message、this.$confirm等方式調(diào)用。方式二按需引入與 tree shakingant-design-vue 默認(rèn)支持基于 ES modules 的 tree shaking。從 package.json 的構(gòu)建字段可以看到main: lib/index.js—— CommonJS 構(gòu)建產(chǎn)物module: es/index.js—— ES modules 構(gòu)建產(chǎn)物供 webpack 4/5 等支持module字段的打包器優(yōu)先解析sideEffects中僅對(duì)*.css、*.md、site/*等聲明副作用組件 JS 邏輯可被安全地 tree-shake。因此直接寫import { Button } from ant-design-vue或import Button from ant-design-vue/lib/button打包器就能搖樹剔除未使用組件的代碼實(shí)現(xiàn)按需加載的效果再配合按需引入reset.css或全部dist/antd.css即可兼顧開發(fā)便利與產(chǎn)物體積。如果使用 babel 生態(tài)倉(cāng)庫(kù)的devDependencies中也包含babel-plugin-import可供配置但 v4 官方推薦優(yōu)先使用 ES modules 自帶的 tree shaking無(wú)需額外插件。兩種方式的取舍全局完整注冊(cè)寫起來(lái)最省事所有組件開箱即用但會(huì)引入較多組件代碼配合 tree shaking 后可緩解按需局部注冊(cè)如本文示例的app.use(Button)只注冊(cè)需要的組件包體最小且Button.Group等子組件會(huì)自動(dòng)一并注冊(cè)。工程化建議與常見問(wèn)題Vue 版本匹配ant-design-vue 4.x 需要 Vue3.2.0請(qǐng)確認(rèn)package.json中 vue 版本符合要求若使用舊版 vue-cli 3 默認(rèn)生成的 Vue 2 項(xiàng)目需要先升級(jí)到 Vue 3 及配套的vue/cli-plugin-babel、vue-loader等插件版本倉(cāng)庫(kù)自身的 package.json 中即為 Vue 3 webpack 5 的完整依賴組合可作為參考。vue-cli 的定位官方 快速上手 文檔提示 Vue CLI 已停止迭代新項(xiàng)目推薦使用 Vite 或 Rsbuild本文所演示的接入流程同樣適用于這些現(xiàn)代構(gòu)建工具只是初始化命令不同。網(wǎng)絡(luò)與依賴安裝安裝過(guò)慢或報(bào)錯(cuò)時(shí)可嘗試配置 npm 代理或更換 registry 后重試。主題定制接入 antd 后如需修改主色等設(shè)計(jì)變量可參考 定制主題 文檔通過(guò) ConfigProvider 與 cssinjs 的 token 機(jī)制完成無(wú)需覆蓋 CSS 文件。至此你已經(jīng)掌握了在 vue-cli 3 工程中接入 Ant Design Vue 的完整鏈路初始化項(xiàng)目 → 安裝依賴 → 引入組件與樣式 → 注冊(cè)并渲染組件并理解了全局注冊(cè)與按需引入各自的底層機(jī)制。其他開發(fā)流程可以參考 vue-cli 的官方文檔繼續(xù)探索。贊分享前端UI組件設(shè)計(jì)系統(tǒng)【免費(fèi)下載鏈接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 項(xiàng)目地址https://gitcode.com/gh_mirrors/an/ant-design-vue點(diǎn)擊查看免費(fèi)下載相關(guān)推薦vue/cli-plugin-router 深入指南在 vue-cli 項(xiàng)目中接入 Vue Routervue/cli plugin router 深入指南在 vue cli 項(xiàng)目中接入 Vue Router 本文以 vue cli 倉(cāng)庫(kù)中的官方文檔 docs前端開發(fā)工具構(gòu)建工具免費(fèi)高效的Sketch設(shè)計(jì)稿轉(zhuǎn)HTML工具M(jìn)arketch終極指南免費(fèi)高效的Sketch設(shè)計(jì)稿轉(zhuǎn)HTML工具M(jìn)arketch終極指南 還在為Sketch設(shè)計(jì)稿到前端代碼的轉(zhuǎn)換而煩惱嗎Marketch插件為你提供了一鍵式解決開發(fā)工具前端Code Blocks支持哪些編程語(yǔ)言完整語(yǔ)言列表及使用技巧Code Blocks支持哪些編程語(yǔ)言完整語(yǔ)言列表及使用技巧 Code Blocks是一款專為Google Docs設(shè)計(jì)的語(yǔ)法高亮插件能幫助用戶在文檔中優(yōu)雅創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考