React 项目搭建

vue 用习惯了，React 的一些项目配置和 vue 的区别还是很大的，一步一步的搭建 React 项目。

1.项目初始化

# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app

# 启动编译当前的React项目，并自动打开 http://localhost:3000/
npm start

2.配置路径别名，减少项目中引用路劲的方便和管理，避免 ../../ 这样的引用(尽量在项目初始化之后进行，会避免一些不必要的麻烦)

    react官方脚手架默认是将webpack配置隐藏起来了，在进行配置之前需要将webpack给暴露出来。

    1.输入命令 npm run eject

    2.会出现一个命令提示：这是一个单向操作，确认操作后不可逆转/返回?
       输入 y 回车
       成功之后 在项目根目录出现 config 文件夹

    3.打开 config 文件夹下的 webpack.config.js 文件

    4.进行搜索 alias ,大概在 291 行的位置

     ...(modules.webpackAliases || {}),
    // 文件路径别名
    '@': path.resolve(__dirname, '../src'),
    '@view': path.resolve(__dirname, '../src/view'),
   5.重新启动项目就可以了。可以把 src 下的 inde.js 中的 

   import '@/index.css';

   import App from '@/App';

   import reportWebVitals from './reportWebVitals';

   换成 

   import '@/index.css';

   import App from '@/App';

   import reportWebVitals from '@/reportWebVitals';

   亲测有效

3.React的Sass配置

    npm install sass-loader node-sass --save-dev

    找到module下的rules，然后找到最后一个配置，exclude 里增加 /.scss$/

    可以把 /index.css 改成 inde.scss 文件类型和引用类型都改一下。

    重启项目就可以了

    亲测有效

 4.配置 rem 

  我也是找了相关的资料，分享一下,PC上 我试过，是可以的。直接简单粗暴的在 index,html 里加入一段代码就可以了。 flex(false, 20, 1); 可以修改里面的阈值，可以自己多尝试一下。

 <script>

      ! function (e) {

          function t(a) {

              if (i[a]) return i[a].exports;

              var n = i[a] = {

                  exports: {},

                  id: a,

                  loaded: !1

              };

              return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports

          }

          var i = {};

          return t.m = e, t.c = i, t.p = "", t(0)

      }([function (e, t) {

          "use strict";

          Object.defineProperty(t, "__esModule", {

              value: !0

          });

          var i = window;

          t["default"] = i.flex = function (normal, e, t) {

              var a = e || 100,

                  n = t || 1,

                  r = i.document,

                  o = navigator.userAgent,

                  d = o.match(/Android[Ss]+AppleWebkit/(d{3})/i),

                  l = o.match(/U3/((d+|.){5,})/i),

                  c = l && parseInt(l[1].split(".").join(""), 10) >= 80,

                  p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),

                  s = i.devicePixelRatio || 1;

              p || d && d[1] > 534 || c || (s = 1);

              var u = normal ? 1 : 1 / s,

                  m = r.querySelector('meta[name="viewport"]');

              m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(

                      m)), m.setAttribute("content",

                      "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u +

                      ",minimum-scale=" + u), r.documentElement.style.fontSize = normal ? "50px" : a / 2 *

                  s * n + "px"

          }, e.exports = t["default"]

      }]);

      flex(false, 20, 1);

  </script>

  5.image 引入

      为什么单独提这个，是因为在 React 项目中，会有一个 elint 报错  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images 

      所以 import 或者  require 引用图片的路径之后，在  img 标签里加上 alt 这个属性。

6.样式格式化安装 normalize.css 后在 index.js 中 import 'normalize.css'

7.路由设置，安装 react-router-dom，现在已经是 5.x 版本了

   1.引入相关组件

 2.路由渲染

8. 动态设置页面 title, 例如，只要在路由里提前设置好 title 就可以了，亲测有效。

 

 8. token 存储与读取

npm install  react-cookies --save-dev
import cookie from 'react-cookies'
存：cookie.save('userId', "123")
取：cookie.load('userId')
删：cookie.remove('userId')
时效： let inFifteenMinutes = new Date(new Date().getTime() + 24 * 3600 * 1000);//一天   cookie.save('userId', "123",{ expires: inFifteenMinutes })

也可以用 localStorage 来实现，但是最重要的是兼容性，浏览器的无痕模式下需要要特别注意。

9. 页面跳转验证

    我的思路是验证分两部分：1.路由跳转的时候，验证是否有 token;2.请求的时候，通过接口返回，判断是否失效；涉及到权限的另外讨论

 第二种是在  _axios.interceptors.response.use 里根据约定的 token 失效 code 来实现