使用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版本会报错。

学使用React+TypeScript+styled项目搭建