react自动化项目构建

Posted 2021-03-02 woailiming

前言：此前我使用从0开始配置webpack框架，然后引入相关依赖的方式进行项目的搭建。但到引入react路由的时候，发现BrowserRouter（HashRouter可以）在该框架下无法运行，提示can not get /xxx(路径名) 并不能按照配置的路径成功跳转，搞了几天没什么头绪，就放弃了，连带着那篇随笔也就完结了（事实上是“太监了”，hhhhh）。然后，用了react提供的自动化脚手架来搭建项目。

一、安装脚手架

npm install -g create-react-app

二、创建React项目

create-react-app myApp

其中myApp为项目的目录名称，自定义即可。

到这里之后，就可以使用 npm start 在项目文件夹中运行该项目了。

三、create react app添加 Sass 样式表 以及模块化样式

create react app自动化脚手架预装了部分的sass处理模块，但倘若我们需要在自己的项目中使用它，则还需要安装 node-sass ：

npm install node-sass --save

 

安装成功后，即可以在项目中使用sass文件，例如之前的app.css文件现在可以命名为app.scss，此前的app.module.css的模块化样式表可以命名为app.module.scss，并且使用方法与之前一致。

四、引入react路由：

要添加React Router，运行：

npm install --save react-router-dom

接下来便可以这样改造我们的App.js文件了：

import React from ‘react‘;

import { BrowserRouter as Router, Switch, Route } from ‘react-router-dom‘;

 

import Sub from ‘./pages/sub‘;

import Login from ‘./pages/login‘;

import ‘./App.css‘;

 

function App() {

  return (

    <div className="App">

      <Router>

        <Switch>

          <Route path=‘/‘ exact component={Sub} />

          <Route path=‘/login‘ component={Login} />

        </Switch>

      </Router>

    </div>

  );

}

 

export default App;

React Router是一个开放性极高的插件，更多的应用场景（例如受保护的页面、vue-router一样的路由配置）等等都可以通过封装它来实现。同时需要注意的是实现上述场景需要用到更多的诸如Route组件上的render属性等更多的API。

五、添加移动端调试工具 vConsole：

下载：

 npm install vconsole -D;

 

在根目录的index.js中添加如下代码：

import VConsole from ‘vconsole‘;

 

new VConsole();

完成。