採用React+Ant Design元件化開發前端介面(一)
阿新 • • 發佈:2018-12-15
![](https://upload-images.jianshu.io/upload_images/2774022-8d65190f1b972cd1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
基礎知識
1.使用腳手架建立專案並啟動
1.1 安裝腳手架:
npm install -g create-react-app
1.2 使用腳手架建立專案:
create-react-app antd-start-demo antd-start-demo為專案名。
1.3 啟動
npm start
2.npm轉換為yarn
2.1 安裝yarn:
npm install -g yarn
2.2 獲取yarn當前的映象源:
yarn config get registry
2.3 設定為淘寶映象:
yarn config set registry 'https://registry.npm.taobao.org'
2.4 常用命令:
yarn init --初始化
yarn add --新增模組
yarn remove --刪除模組
yarn /yarn install --安裝專案中的依賴
專案搭建
2.1 安裝react-router 4.0、axios、less-loader
yarn add react-router-dom axios less-loader
2.2 暴漏webpack配置
yarn eject
![](https://upload-images.jianshu.io/upload_images/2774022-2142790d40cd282a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/496/format/webp)
2.3 配置less-loader
antd是基於less開發的,我們使用less可以方便的改變主題色等配置。
安裝less模組:yarn add [email protected]
開啟config/webpack.config.dev.js新增如下配置:
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: { importLoaders: 1 },
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
},
},
{ loader: require.resolve('less-loader') }
],
},
到配置cssload同級如圖所示
![](https://upload-images.jianshu.io/upload_images/2774022-c6b7de1983b8a5de.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/978/format/webp)
注意:在webpack.config.dev.js新增的配置部分,也需要在webpack.config.prod.js中做相同的配置。否則可能導致專案釋出上線後,報錯無法執行。
2.4 安裝antd
yarn add antd
2.5 測試使用
import { Button } from "antd";
import 'antd/dist/antd.css'; ... render() { return ( <div> <Button>click</Button> </div> ); } ...
注意:預設情況下安裝的antd需要引入antd/dist/antd.css才會生效樣式,但很多時候,我們只是使用了部分元件,引入整個antd樣式檔案,有些得不償失。所以按需載入應運而生。
2.6 antd按需載入
1.新增babel-plugin-import,
yarn add babel-plugin-import
2.開啟webpack配置,搜尋:JS with Babel
找到如下配置:
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc, loader: require.resolve('babel-loader'), options: { customize: require.resolve( 'babel-preset-react-app/webpack-overrides' ), plugins: [ [ require.resolve('babel-plugin-named-asset-import'), { loaderMap: { svg: { ReactComponent: '@svgr/webpack?-prettier,-svgo![path]', }, }, }, ], ], cacheDirectory: true, // Save disk space when time isn't as important cacheCompression: true, compact: true, }, },
進行修改plugin下新增:
["import", { "libraryName": "antd", "style": true }]
至此可以取消引入css檔案了,babel會自動根據引入的元件,預設載入對應的css。
2.7修改主題色
{
loader: require.resolve('less-loader'),
options: {
modules: false,
modifyVars: {
"@primary-color": "#f9c700" } } }
在webpack,中配置less的地方即可修改。@primary-color為antd內建的less變數,只需要覆蓋掉預設的配置,就實現了修改主題色。
本文GitHub程式碼:GitHub地址 歡迎star!
作者部落格:做全棧攻城獅
分享交流前後端知識,一起做全棧攻城獅。