react自动化项目构建

Posted woailiming

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react自动化项目构建相关的知识,希望对你有一定的参考价值。

前言:此前我使用从0开始配置webpack框架,然后引入相关依赖的方式进行项目的搭建。但到引入react路由的时候,发现BrowserRouterHashRouter可以)在该框架下无法运行,提示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();

完成。

以上是关于react自动化项目构建的主要内容,如果未能解决你的问题,请参考以下文章

React 使用webpack构建React项目

react简介

react简介

Reactreact概述组件事件

React + antd 搭建项目

自动化运维:如何零停机构建与部署项目