目录
- 使用create-react app (简称cra)
- CSS reset
- 配置SCSS
- 配置styled-component
- 用React Router添加底部导航
- 引入SVG lcon
创建项目
全局安装目标版本的create-react-app
yarn global add create-react-app@3.4.1
创建项目morney并且使用typescript编写
create-react-app morney --template typescript
接下来的操作是
// 切换目录
cd morney
// 运行
yarn start(会自动打开浏览器)
如果不喜欢自动打开
// 不喜欢自动,就运行
echo 'BROWSER=none' > .env
// 再运行
yarn start
这里可能会改动其他地方代码 提交时忽略这个改动
git rm -rf --cached .idea
git rm -rf --cached .vscode
在.gitignore添加忽略文件
如果用 WebStorm,就在 .gitignore 添加 /.idea
如果用 VSCode,就在 .gitignore 添加 /.vscode
这里就完成了项目创建
文件目录说明
将public里面的index.html中不必要的代码删掉
CSS相关配置
引入normalize 的 css,只需要在index.css文件最上面 写入下面这句话
@import-normalize;
如果这个有警告 直接忽略
css normalize 和 css reset 的区别
css normalize是让默认样式基本一样
css reset 是把基本样式都去掉
node-sass的问题
- 网络下载比较慢
- 本地编译慢
安装dart-sass(React 只支持 node-sass)
// 偷梁换柱 node-sass 换成 dart-sass
yarn add node-sass@npm:dart-sass
yarn add --dev node-sass@npm:dart-sass@1.25.0
这里技术问题
我想让React应用支持sass
需要node-sass,它有两个缺点:下 载速度慢、本地编译慢
于是我想改用dart-sass代替node-sass
但是React只支持
node-sass不支持dart-sass
进过我的努力搜索和研究
我发现npm 6.9支持一个新功能,叫做package alias
npm install node-sass@npm:dart-sass即可偷梁换柱瞒天过海
最后我达成我了的目标
配置css 的引用问题
@import ‘xxx/aaa.scss'
// 这样编译器会报错
解决办法 在webstorm里面点击src 目录右键选择作为 as resource root
配置JS 引用问题
在tsconfig.json
里面合适的位置添加
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
创建helper.scss用来进入变量,函数等公用的东西
CSS in JS
安装 styled-components
yarn add styled-components@5.0.1
支持 typeScript 的安装
yarn add --dev @types/styled-components@5.0.1
使用React router
文档 页面
yarn add react-router-dom
// 支持 typescript
yarn add --dev @types/react-router-dom
创建 tags money statistics 404 这四个路由页面
默认进入 money 页面 错误进入 404页面
Router有两种模式: History 和Hash
如果你没有后台服务器,就只能用Hash
如果你有后台服务器,配置所有路径都到首页才能用History
全局字体
使用 fonts.css 里面的黑体
复制里面的代码
创建Nav组件
手机导航栏一般位于屏幕下,尽量不要使用fixed定位,这样会出很多的bug。我们可以采取flex布局。
注意对于所有的css结构都不要把高度写死。尽量使用 padding 和 line-height 来将高度撑开。
使用 SVG Symbols
SVG的优点高保证 ,无损
在阿里官方图标库找的需要的SVG图,然后下载。
放入项目icons文件夹中
引入 svg-sprite-loader
在React里面首先要将config文件夹弄出来
yarn eject
// 点击 y 会自动下载
执行完后
安装和配置 svg-sprite-loader
原理:当我们引入SVG 后会先去 svg-loader 然后去svg-sprite-loader 然后生成一个标签。
他会将所有的SVG 写入一个标签,这个标签放在head标签里面。
yarn add --dev svg-sprite-loader
将配置svg-sprite-loader代码 放入 webpack.config.js
目录示例
然后再里面找到下图的地方将代码放入;module 里面 的 rules代码块里面
// webpack 版本大于 2.0 引入
{
test: /\.svg$/,
use: [
{loader: 'svg-sprite-loader', options: {}},
'svg-transform-loader',
// 'svgo-loader'
// 上面这句可以使用下面这句深度配置
{loader: 'svgo-loader', options: {}}
]
},
**安装 svgo-loader**
yarn add --dev svgo-loader
这是用来优化 svg 的
svg-transform-loader(这里没用到)
yarn add --dev svg-transform-loader
用来添加和修改 svg 图片的属性
JS引入SVG
现在我们引入后打印出来
import x from 'icons/money.svg'
console.log(x);
发现引入的就是一个对象
这样就配置好啦,但是有个缺点,每次引入一个SVG 都要打印才会在页面上使用,稍后我们会解决这个问题。
这个问题就是 TreeShaking,如果不去使用引入的文件,就会从依赖的树上摇下来
上面的提出的问题 可以使用一下方法解决
require('icons/money.svg');
原因是 TreeShaking 不适用与 require。记得后面的分号(;)必须加上
我们在需要引用的地方试一试
<li>
<svg>
// #money 就是文件的名字
<use xlinkHref="#money" />
</svg>
<Link to="/tags">标签页</Link>
</li>
这样就可以完美的在页面上展示
这样的引入我们可以对其修改 颜色和大小。
require整个icons文件夹
一直require单个文件效率不是很高,我们可以尝试require整个icons文件夹
// require 一个目录
let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
// 'icons'是SVG图片文件夹的位置 记得修改位置
try {importAll(require.context('icons', true, /\.svg$/));} catch (error) {console.log(error);}
这里需要安装一些依赖
yarn add --dev @types/webpack-env
然后就搞定__WebpackModuleApi
报错。
删除SVG自带的颜色
{
loader: 'svgo-loader', options: {
plugins: [
{removeAttrs: {attrs: 'fill'}}
]
}
}
注意这样修改只适合 svgo-loader@2.2.1版本,安装的 svgo-loader @3.0版本会报错。