新建一個專案
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')}
複製程式碼
缺點就是css程式碼會是全域性的，一個人開發還好，多人的話，css命名衝突就很難受了，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
複製程式碼
傳送門 專案放github上了，可以自己檢視