新建一个项目

npm install -g create-react-app
create-react-app my-app
cd my-app
npm i
npm start
# 或者，npm 5.1版本以上自带npx,以下官方推荐
npx create-react-app my-app
cd my-app
npm start
复制代码

暴露配置文件

# 暴露配置文件，输入yes就好
npm eject
复制代码

下载依赖

# scss依赖
npm install sass-loader node-sass --save-dev
# 如果node-sass下载不下来的话，即node-sass安装失败使用：npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
# 说明
--registry=https://registry.npm.taobao.org 淘宝npm包镜像
--disturl=https://npm.taobao.org/dist 淘宝node源码镜像，一些二进制包编译时用
--sass-binary-site=http://npm.taobao.org/mirrors/node-sass 这个才是node-sass镜像
# ant-design
npm install antd --save
# 按需加载的依赖
npm install babel-plugin-import --save
复制代码

配置webpack参数

scss

在config 里面的webpack.config.dev.js和webpack.config.prod.js里面，前面一个是开发的配置文件，后面的是生产时的配置文件

大约160行左右
# 第一处是：
test: /\.css$/ 变成 test: /\.s?css$/
# 第二处是：
{loader: require.resolve('sass-loader')}
复制代码

之后你随便新建一个a.scss ，import "路径/a.scss"就可以了

缺点就是css代码会是全局的，一个人开发还好，多人的话，css命名冲突就很难受了，css-moudle是一种解决方案，但是我不怎么喜欢，我个人推荐可以用下style-component

css-moudle阮一峰

style-component

ant-design

# 修改babel配置，在package.json里面
# 装饰器的包：npm i babel-plugin-transform-decorators-legacy --D
# 1.按需加载,让nodejs支持最新的语法，装饰器
# package.json里面不能写注释，记得删掉"babel": {"presets": ["react-app",["env",{"targets": {"node": true}}]],// 这边是按需加载ant-design的css"plugins": [["import",{"libraryName": "antd","libraryDirectory": "es","style": "css"}],// 装饰器"transform-decorators-legacy"]},//设置代理,应为前端开启了一个服务器，后端又开启了一个服务器，导致跨域的问题，设置代理能解决这个问题"proxy": "http://localhost:8888",
复制代码

之后就ok了。你引入一个ant的组件试试就知道了

结果

# 导入
import { Button } from 'antd';
import React from 'react'
import "./msgCircle.scss";
class MsgCircle extends React.Component {render() {return (<div className="msg-circle"><Button type="primary">Primary</Button></div>)}
}
export default MsgCircle;
# 有人说为什么不用导入css,应为前面已经配置了按需加载
复制代码

如果我又想用antd的主题怎么办

这里就给一个官方的解决方案

传送门

注意

修改配置文件后要重新npm start一下的

• 若配置装饰器后，发现 vscode 有红色波浪线，解决方法

# 新建一个tsconfig.json，内容如下
{"compilerOptions": {"experimentalDecorators": true,"allowJs": true}
}
复制代码

链接mongodb，后端node

梦想还是要有的，万一实现了呢

# 在根目录新建一个server
cd server
# init后就会生成一个package.json，记录你每次安装的包
npm init
# 为什么把模块装在server里面，装在外面的package.json不好吗，可以啊，不过我喜欢分开
npm i bluebird express mongoose nodemon --save
mkdir server.js
复制代码

准备启动后端了，链接mongodb

const express = require('express');
const mongoose = require('mongoose')const app = express();app.use('/', function (req, res) {return res.json('hello world')
})
// mongoose的Promise已经废弃了，这里就用下bluebird
mongoose.Promise = require('bluebird');try {mongoose.connect('mongodb://localhost/test', {// 不加参数会报警告// useMongoClient: true})
} catch (error) {console.log(error)
}
mongoose.connection.once('open', function () {console.log('mongoose connection')}).on('error', function (error) {throw error;})app.listen(8888, () => {console.log("服务开启在8888");
})
复制代码

前面代理的端口要和后端启动的端口一致的

修改package.json

# nodemon 就是你不用每次再去手动node server.js了，他会自动的帮你的（在外层的package.json）"scripts": {"server": "nodemon server/server.js"},
复制代码

express怎么不是es6的语法?

# 那就实现一下
# 用babel-cli
npm i bebel-cli --save
修改scripts命令"server": "NODE_ENV=test nodemon --exec babel-node server/server.js"# 不指定babel-node的话，默认是node# 之后你把里面的require改成import是不会报错的
复制代码

mongodb 存储配置

• 默认你已经安装好mongodb,配好mongodb的环境变量，不配也没关系，多打几个路径而已
• 在某一盘符下新建一个test(名字随意)，里面新建data,etc,logs三个文件夹
• data是存放数据的，etc是配置文件，logs是日志
• 在etc下新建mongo.conf

# 内容范例
#数据库路径 (你自己的路径)
dbpath=/home/skl/Desktop/test/data
# 日志输出文件路径
logpath=/home/skl/Desktop/test/logs/mongodb.log
# 错误日志采用追加模式，配置这个选项后mongodb的日志文件会追加到现有的日志文件，而不是重新创建一个文件
logappend=true# 过滤一些无用的日志
quiet=false# 启动日志文件，默认启动
journal=true# 端口号，默认是27017
port=27018
复制代码

• 需要注意的是：linux和window的文件分隔符是不一样的，pwd打一下就知道了
• 在etc文件里面运行 mongod --config mongo.conf （指定配置文件）

启动server.js前先链接数据库 ，在etc文件里面运行 mongod --config mongo.conf （指定配置文件）

启动

cd server
npm start
复制代码

访问localhost:8888，会出现

传送门 项目放github上了，可以自己查看