React + webpack 开发单页面应用简明中文文档教程(三)目录说明
React + webpack 开发单页面应用简明中文文档教程(三)目录说明以及调整项目构架文件React 入门系列教程导航React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念 在上一篇博文中,我们已经运行起来了我们的项目。但是,这只是一个初始项目而已,基本上属于不可用的状态,因此,我们要继续工作,展开我们的开发工作。 这篇博文,我们来调整项目构架,以及配置文件,让项目可以更好的开发。 自定义配置模式在默认情况下,项目的各种配置都是默认的,且不可修改,因此,我们需要将项目变成自定义配置模式。 npm run eject
运行这条命令之后,所有的配置文件以及相关依赖,会复制到你的项目中。
很快,命令执行成功了,我们的项目中,多了一些文件 根目录说明├── README.md # 说明文档,该文档非常丰富,建议由时间阅读
├── config # 配置文件夹
├── node_modules # node 依赖文件夹,基本不用管
├── package-lock.json # 包锁定文件,不用管。
├── package.json # 配置文件,有些内容在此配置
├── public # 静态资源目录、入口文件目录
├── scripts # npm 脚本文件夹,不用管
└── src # 开发目录
如上所示,这就是我们的项目目录结构了。 src 开发目录说明开发目录默认文件如下 ├── App.css # 删除
├── App.js # 删除
├── App.test.js # 删除
├── index.css # 删除
├── index.js # 入口文件
├── logo.svg # 删除
└── registerServiceWorker.js # 注册服务文件,留着就好
执行本命令,删除无用文件 cd src
rm App.* index.css logo.svg
不喜欢 创建我们需要的文件夹 mkdir coms page router style tool
说明如下: ├── coms # 放各种各样的组件
├── page # 放我们的项目页面
├── router # 放我们的路由配置
├── style # 放我们的样式文件
└── tool # 放我们用到的自己写的各种工具
好,创建好放这里就好了,回头我们再来整理。 public 静态文件目录说明├── favicon.ico # 标签栏图标文件,找设计做一个替换
├── index.html # 入口 index.html 文件
└── manifest.json # 配置参数,不理它 :-)
我们在下面创建 修改
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>React-app</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<style> .loader { position: absolute;top: 0;bottom: 0;left: calc(50% - .3rem);width: .6rem; display: inline-block; vertical-align: middle; } .loader-3 .dot { width: .1rem; height: .1rem; background: #d42627; border-radius: 50%; position: absolute; top: calc(50% - .05rem); } .loader-3 .dot1 { left: 0; animation: dot-jump 0.5s cubic-bezier(0.77,0.47,0.64,0.28) alternate infinite; } .loader-3 .dot2 { left: .2rem; animation: dot-jump 0.5s 0.2s cubic-bezier(0.77,0.28) alternate infinite; } .loader-3 .dot3 { left: .4rem; animation: dot-jump 0.5s 0.4s cubic-bezier(0.77,0.28) alternate infinite; } @keyframes dot-jump { 0% {transform: translateY(0);} 100% {transform: translateY(-.15rem);} } </style>
<script src="%PUBLIC_URL%/rem.js"></script>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
</head>
<body>
<div id="root">
<div class="loader loader-3">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
</div>
</div>
</body>
</html>
创建 rem.js 文件 并在该文件内写入一下内容 function htmlFontSize() {
var w = Math.max(document.documentElement.clientWidth,window.innerWidth || 0)
var width = w > 720 ? 720 : w
var fz = ~~(width * 100000 / 36) / 10000
var html = document.getElementsByTagName('html')[0]
html.style.cssText = 'font-size: ' + fz + 'px'
var realfz = ~~(+window.getComputedStyle(html).fontSize.replace('px','') * 10000) / 10000
if (fz !== realfz) {
html.style.cssText = 'font-size: ' + fz * (fz / realfz) + 'px'
}
}
htmlFontSize()
window.onresize = function () { htmlFontSize() }
这个文件是设置 我这里主要是演示,如何在入口文件中引入静态文件中的 经过了这些调整,我们的项目应该是跑不起来的。因为我们的 本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |