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

下面是查询项目的配置 按命令半天没有按出来 原来项目文件里面也可以看到（我是有多笨啊！）