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