国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

初探React技術(shù)棧（一）

neroneroffy / 1498人閱讀

react

最近已經(jīng)開始使用react技術(shù)棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl

create-react-app 
這是官方維護(hù)的腳手架應(yīng)用 我們一般也采用這個
$ npm or cnpm

$ npm install create-react-app -g #全局下載

$ create-react-app #[項目名稱] 新建項目

# 如果想要把 webpack 配置暴露出來 可以執(zhí)行以下命令
$ npm run eject # 初始時可以在package.json中找到
less/sass 
為了提升我們寫樣式的效率 一般采用 less/sass
# less
$ npm i less less-loader

# sass
$ npm i node-sass sass-loader

并在webpack.config.js修改以下配置:

# 添加sass支持
# 找到 file-loader
{
    loader: require.resolve("file-loader"),
    exclude: [/.(js|mjs|jsx|ts|tsx)$/, /.html$/, /.json$/, /.scss$/],
    options: {
    name: "static/media/[name].[hash:8].[ext]",
    },
},
# 在exclude中加上`/.scss$/` 并且在后面加上
{ 
    test: /.scss$/,
    loader: ["node-sass", "sass-loader"]
}

// 添加less支持 這種是省事的寫法 如果需要 antd 的個性化主題定制 請參看下文 antd less 配置
// 找到 `/.css$/` 改成 `/.(?:le|c)ss$/`
// 找到 `getStyleLoaders` 函數(shù) 在其中 loaders 中添加
{
    loader: require.resolve("less-loader"),
    options: cssOptions,
}
// 這樣就完成 less 支持
// 如果想要樣式模塊化那么就需要加上  modules: true
{
    test: cssRegex, // cssRegex這個代表著就是 匹配文件的正則表達(dá)式
    exclude: cssModuleRegex,
    use: getStyleLoaders({
    importLoaders: 1,
    modules: true,  //模塊化
    sourceMap: isEnvProduction && shouldUseSourceMap,
    }),
    sideEffects: true,
},
完成對less/sass支持，!注意 樣式模塊化需要不同的文件命名方式 比如  app.scss 模塊化 -> app.module.scss 否則編譯器也不知道那個文件是私有的
配置路徑 
一般情況下 我們引入文件都是需要相對路徑但是如果嵌套層級少還可以但是如果層級很多 我們就需要尋找一種辦法幫助我們 來擺脫繁瑣的 ./../......

同樣還是在webpack.config.js 找到alias在其中添加 "@": paths.appSrc

Ant Design 
之前一直使用的 vue + element 的布局方式，而這次寫項目則是主要使用 React + Ant Design

不得不說Ant Design整體的動畫以及各種方案讓我耳目一新！天啦嚕這個動畫 愛了 愛了

# 下載antd
$ npm or cnpm
$ npm i antd --save

首先在全局樣式文件中寫@import "~antd/dist/antd.css";此時就可以看到antd已經(jīng)引入成功了

根據(jù) Ant Design 官方文檔 推薦其中定制主題介紹了less

所有可定制的less變量

@import "~antd/dist/antd.less"; // 引入官方提供的 less 樣式入口文件
@import "your-theme-file.less"; // 用于覆蓋上面定義的變量
警告根據(jù)antd issues 7929中提示 css less 不要都采用less-loader
// 首先在webpack中定義兩種變量
const lessRegex = /.less$/; // 可以找到 `style files regexes` 處聲明
const lessModuleRegex = /.module.less$/;
// 這是為了匹配 .less / .module.less 文件
// 找到 `getStyleLoaders` 函數(shù) 在其中 loaders 中添加
{
    loader: require.resolve("less-loader"),
    options: cssOptions,
}
// 找到 sassModuleRegex 位置處 在對象后加上 以下代碼
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
    {
        importLoaders: 1,
        sourceMap: isEnvProduction && shouldUseSourceMap
    }
    ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
    {
        importLoaders: 1,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true, // 模塊化
        getLocalIdent: getCSSModuleLocalIdent,
    }
    ),
}
此時還沒有完成 但是less / module.less 但是在改主題色的時候，我們發(fā)現(xiàn)會報錯

// 此時需要修改以下代碼
// 找到 `getStyleLoaders` 函數(shù) 在其中 loaders 中添加
{
    loader: require.resolve("less-loader"),
    options: {...cssOptions, javascriptEnabled: true}, // 啟用js編譯。。。
}
相信用scss/sass的同學(xué)也不少
// 找到 `getStyleLoaders` 函數(shù) 在其中 loaders 中添加
{
    loader: require.resolve("less-loader"),
    options: {...cssOptions, javascriptEnabled: true, modifyVars: {"primary-color": "#000",}}, // 啟用js編譯。。。
}

然后在index.js 入口文件中引入自定義的全局less文件，并在里面引入~antd/dist/antd.less
然后可以繼續(xù)使用scss寫樣式不受影響，雖然這種做法非常雞肋，但是我搜索了幾種方法，但是都不理想，希望有知道更好的方法的大佬告知

鏈接

less/sass to create-react-app
Ant Design

結(jié)語

好長時間沒有寫文章了，嗯嗯 其實是因為工作忙！！！最近學(xué)習(xí)的東西也比較多，覺得是一個很好的鞏固，分享的時間，打算就這段時間的學(xué)習(xí)，寫一個小系列的分享文章，希望有錯誤的地方有大佬能夠不吝賜教！！晚安

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109756.html

相關(guān)文章

  • 初探react技術(shù)棧（一）

    摘要：相信用的同學(xué)也不少找到函數(shù)在其中中添加啟用編譯。。。react 最近已經(jīng)開始使用react技術(shù)棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護(hù)的腳手架應(yīng)用 我們一般也采用這個 $ npm or c...

    劉玉平 評論0 收藏0

  • 面試分享：一年經(jīng)驗初探阿里巴巴前端社招

    摘要：三輪技術(shù)面上一輪發(fā)揮感覺沒前兩輪發(fā)揮好，所以還是有點不自信的，沒想到第三天后，就來電話了，通知我去阿里園區(qū)面試。 一般阿里社招都是招3-5年的P6+高級工程師，當(dāng)初自己一年經(jīng)驗也沒有想過有這個面試機(jī)會。 雖然沒想著換工作，但是經(jīng)常關(guān)注一些招聘網(wǎng)站的信息，某一天，在某boss上有個人找我，叫我發(fā)一下簡歷，我一看是阿里的某技術(shù)專家，雖然之前也有阿里的在某boss上給我要簡歷，但是我深知自己...

    ACb0y 評論0 收藏0

  • 面試分享：一年經(jīng)驗初探阿里巴巴前端社招

    摘要：三輪技術(shù)面上一輪發(fā)揮感覺沒前兩輪發(fā)揮好，所以還是有點不自信的，沒想到第三天后，就來電話了，通知我去阿里園區(qū)面試。 一般阿里社招都是招3-5年的P6+高級工程師，當(dāng)初自己一年經(jīng)驗也沒有想過有這個面試機(jī)會。 雖然沒想著換工作，但是經(jīng)常關(guān)注一些招聘網(wǎng)站的信息，某一天，在某boss上有個人找我，叫我發(fā)一下簡歷，我一看是阿里的某技術(shù)專家，雖然之前也有阿里的在某boss上給我要簡歷，但是我深知自己...

    wuyumin 評論0 收藏0

  • React 初探

    摘要：各個組件維護(hù)自己的狀態(tài)和，當(dāng)狀態(tài)變更，自動重新渲染整個組件。形式的定義的組件是以的形式來創(chuàng)建的組件的，是目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會取代形式相對于可以更好實現(xiàn)代碼復(fù)用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號。 目前在前端開發(fā)領(lǐng)域，框架Angular、react和vue占據(jù)著主流的地位而且可能會持續(xù)比較長的一段時間。三門框架中，從數(shù)據(jù)綁定機(jī)制來看，vue和an...

    levy9527 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<