VSCode --- React项目实操
- 1.导入项目
- 1.1 开启vscode，进入终端
- 1.2 React项目结构
- 2.启动项目
- 3.开发
- 3.1 认识项目
- 3.2 创建页面
- x.报警
项目模板从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就是我们的入
- 里面是index.html和favicon.ico
- 可以修改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 registry3.启动
- 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
