筑基-React环境搭建一

金禹铭
722 阅读3分钟

创建项目 基本搭建

在创建之前，需要有一个git 仓库，我们要把项目搭建到git 中

目录介绍
cd D:  // cd 到某个盘或文件夹
    mkdir workspace //创建workspace文件夹
    cd workspace
    /**
        workspace一般为我们仓库和项目总目录
            git@192.168.1.1 仓库一（前端自己项目，如果自己是前端leader）
            cd 仓库名称
            cd www.bdplus.cn 为上线文件夹
                ls // 查看有哪些文件
                pc或w 为 pc 电脑端项目
                h5或m  为h5 网页或app 中网页或公众号
                minstore 小程序(如果分微信和支付宝可wminstore tminstore)
                app 前端app 用户开发
                mkdown (一些备注文件)
                以下为正常开发项目，以上为对应上线打包后文件
                w
                h5
                minstore
                app
                mkdown
                如果有其他方式可自己组织
        git@2 仓库二 （其他项目比如后端等）
        git@3 仓库三
    */
查看node 版本
    node -v 或 使用nvm 进行node 版本安装与切换
    node 版本
    nvm use v14
        Now using node v14.15.3 (npm v6.14.9)
    node -v
        v14.15.3
    为了保证同步，选择node 版本14
开始创建项目
    npx create-react-app my-app
    官方标准命令，my-app 为项目名称(PS：小写)
    npx create-react-app first-react   
    ....
git仓库提交
    创建项目后要做git 提交  
    git add --all    git add .  或git add 一个个添加
    git commit -m '创建项目提交'
    git status 查看仓库文件状态
    PS:在企业中我们一般要 某个模块 某个功能某个页面等都需要 add 或commit 
    一天 早 中晚 都分push 其他如果有上线，或领导要看代码等特殊情况可以push 否则不要太频繁
    为什么要早中晚，原因很简单，如果电脑跟屁了，你只需要补半天的代码就可以了。当然这是最致命一个问题
进入项目目录
    cd first-react
开启或释放配置
    yarn eject
    注意如果上面你没有仓库  如果没有git 提交，这一步是不可能实现的

PS:

  1. 发现package.json 内容前后是不一样的

  2. 多了一个config 文件夹

  3. 多了一个scripts文件夹
项目启动
    yarn start

运行ok 就可以了，但并没有完事 go on...

ctrl+c 后继续操作

项目 sass（scss）安装
yarn add node-sass-chokidar
yarn add npm-run-all

安装 node-sass-chokidar 需要多尝试几次， 如果三五次后还是报错，可尝试以下解决方案

node -v 
14 不建议使用node 16
1、npm install -g node-gyp
2、npm install --global --production windows-build-tools 
ok 后
删除掉当前文件夹的node 包
rm -rf node_modules
重新yarn 或 npm install
ok后
再次执行yarn add node-sass-chokidar
基本就可以安装成功了
修改package.json(替换 script 代码块 换成以下代码)
"scripts": {
        "build-css": "node-sass-chokidar src/ -o src/",
        "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive  --use-polling --polling-interval 1000",
        "start-js": "node scripts/start.js",
        "start": "npm-run-all -p watch-css start-js",
        "build-js": "node scripts/build.js",
        "build": "npm-run-all build-css build-js",
        "test": "node scripts/test.js --env=jsdom"
},
yarn build 打包注意事项
新建一个.env文件与package.json 同在根目录下
GENERATE_SOURCEMAP=false
以下三种路径
PUBLIC_URL=https://www.a.com/
PUBLIC_URL=./
PUBLIC_URL=/


正常代码如下：(会在后面上线具体再介绍)
GENERATE_SOURCEMAP=false
PUBLIC_URL=/
yarn start 启动项目
1、创建文件夹
mkdir -p  src/styles/
2、创建一个scss 文件 并写点代码
vi src/styles/index.scss
vi index.js 打开文件
first-react/src/index.js
找到
import './index.css';
修改成
import './styles/index.css';
要引入src/styles/index.css
如果启动后项目会自动生成 index.css
那此时 就代表我们的创建项目第一节点算完成了，

虽然看上步骤挺繁琐的， 但离我们真正创建项目完成还差好几步。 但这一步完成了我们就可以开始码代码了。

avatar
文章
阅读
粉丝