VSCode --- React项目实操

项目模板从git下载的：
coreui-free-react-admin-template.

1.导入项目

1.1 开启vscode，进入终端

1.常用快捷键

快捷键	Function
ctrl + /	注释多行
alt + shift + A	块注释
alt + shift + f	格式化
ctrl + ` (tab上面的按键)	开启终端，启动服务。

1.2 React项目结构

内容介绍

• public就是我们的入

1. 里面是index.html和favicon.ico
2. 可以修改html的title

• src则是最重要的部分

• assets
  待定

• components
  我们要开发的所有页面都在此目录下面

• layout

• scss
  自定义页面的css

• views
  大神们提供给我们学习使用的template

• _nav.js
  里面就是sidebar的列表

• App.js
  加载页面，程序入口

• index.js
  呼应pubic下的index.html
  document.getElementById(‘root’),

• routes.js
  路由，呼应前面的_nav.js,
  将sidebar的列表变成可点击的按钮，点击后跳页

• store.js

• package.json
  1.启动触发的script
  2.安装的依赖

2.启动项目

1.进入到项目目录，最好是管理员权限

• npm install
  

2.如果执行失败，(使用镜像)切换源

• 淘宝镜像
  npm install -g cnpm --registry=https://registry.npm.taobao.org
• 换源
  npm config set registry http://r.cnpmjs.org/
  npm config set registry https://registry.npmjs.org/
  npm config get registry

3.启动

• npm start
  
  

4.修改端口

• 默认端口：http://localhost:3000
• 修改package.json，使用5001
  

3.开发

3.1 认识项目

从public/index.html 到 src/index.html
再到src/App.js

• 从App.js到layout/DefaultLayout.js
• 再从DefaultLayout.js到src/components/index.js
• 再从index.js到./AppSidebar.js
• 最后到_nav.js,
• routes.js给列表赋予跳页功能

3.2 创建页面

x.报警

1.Node Sass does not yet support your current environment: Windows 64-bit with

//在本地项目的cmd路径下去安装，而非全局cmd
npm uninstall node-sass
npm install node-sass

待定，遇到这个问题，还没解决

2.in Plugin “react” was conflicted between “.eslintrc.js” and "BaseConfig » F:\CSV\coreui-free-react-admin-template-main\node_modules\eslint-config-react-app\base.js

//你的包除了问题，进入项目目录，重新install
npm install
npm start