react配置環境+Less+打包css分離+antd+router

一直在使用react做項目但是從來沒有自己搭建過，中間有搭建過也沒有成功，2017年的最後一個工作日我要完成這件事情

現在我們就開始吧！！！！

window+R 打開控制檯 輸入cdm

我們使用 react 應用最好用的腳手架 create-react-app

安裝 npm install -g create-react-app  

創建一個應用程序 

create-react-app qt(qt後面跟你的項目名 等待安裝...)

cd qt





運行

npm start | yarn start  

會自動打開http://localhost:3000/看下你的頁面

接下來我們配置項目中需要使用到的

配置Less（Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，可以加快寫css的速度）

npm run eject 先把配置文件暴露出來 因爲create-react-app創建的配置文件是沒有暴露的

先使用git init 創建自己的本地版本庫  這樣你每一次的配置都可以提交會有記錄 可以返回等

安裝less-loader 和 less 

npm install less-loader less --save-dev

安裝後修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

test: /\.css$/ 改爲 /\.(css|less)$/
test: /\.css$/ 的 use 數組配置增加 less-loader

然後把src 裏面的index.css 文件改成index.less文件 裏面使用less寫測試下效果

body {

margin: 0;

padding: 0;

font-family: sans-serif;

p{

background: red;

}

}

所有的文件都是打包到一個js文件裏面 我們現在把css文件分離出來 使用 extract-text-webpack-plugin

安裝 npm install extract-text-webpack-plugin --save

3處需要添加的 您添加後可以通過ExtractTextPlugin 搜索查詢下是否都添加好

第一處：constExtractTextPlugin=require("extract-text-webpack-plugin")

第二處：

第三處：

修改後 你會發現現在css單獨打包了

接下來配置螞蟻金服的組件antd（https://ant.design/docs/react/use-with-create-react-app-cn）

npm install antd --save

我們需要按需加載需要使用的antd組件使用babel-plugin-import 

yarn add babel-plugin-import --dev(如果沒有yarn 可以安裝)

然後添加如下圖顯示的

"plugins": [
	[
	"import",
	{
	"libraryName":"antd",
	"style":true
	}
	]
	]

https://ant.design/docs/react/use-with-create-react-app-cn 通過這個測試下是否成功

接下來我們就要配置路由了

yarn add react-router-dom

我們參考下官網哦 https://reacttraining.com/react-router/web/example/route-config

然後左側導航的位置如圖

然後就搞定了

我上傳到GitHub的地址 

https://github.com/osunstar/react-jqq

如果上傳到github

按照下圖拿到ssh配置到上去

https://github.com/settings/keys

上傳一個項目 然後把下面的內容在你的代碼裏面分別輸入下就可以了

如果第一次輸入後 然後沒有配置ssh 會讓輸入什麼的 你會再去配置 然後之前輸入過一遍了會存在 所以直接修改配置裏面的url

vi .git/config 進入然後修改

上面是我mac的到GitHub

Windows的上傳了好幾天都傳不上去 哎 我這個小小白啊 原來還需要在GitHub的項目上面加上我這臺電腦的ssh

下面是查詢項目的配置 按命令半天沒有按出來 原來項目文件裏面也可以看到（我是有多笨啊！）