React + webpack 开发单页面应用简明中文文档教程(四)调整项目
React + webpack 开发单页面应用简明中文文档教程(四)调整项目文件以及项目配置React 入门系列教程导航React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念 在上一篇博文中,我们很好的认识了项目的各个文件的所用,并且进行了一些调整。经过这些调整之后,我们的项目已经很成功的跑不起来了。 嗯,我们要接着干,才能让我们的项目跑起来。 编辑调整项目 src 文件配置 index.js 文件原文内容如下: import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />,document.getElementById('root')); registerServiceWorker();
我们调整为 import React from 'react'
import ReactDOM from 'react-dom'
import './style/style.scss'
import App from './router/App'
import registerServiceWorker from './registerServiceWorker'
ReactDOM.render(<App />,document.getElementById('root')) registerServiceWorker()
如上,我们引入了俩文件,一个是
所以,我们需要去创建这俩文件。
配置 style.scss 文件首先,我们创建这个文件,然后在里面写入一下内容: //$res: "/erjimulu/image/"; // 打包时用此路径
$res: "/image/"; // 本地开发是用此路径
body {
background: #f00;
}
好了,不管他了。 配置 router/App.js 文件这里是我们的路由入口文件,我们写入一下内容: import React,{ Component } from 'react'
import { BrowserRouter as Router,Switch,Route } from 'react-router-dom'
import SiteIndex from '@/page/site/index'
export default class App extends Component {
render () {
return (
<Router basename="/"> <Switch> <Route exact path='/' component={SiteIndex} /> </Switch> </Router> ) } }
好的,我们在这里,引用了一个 编写 page/site/index.jsx 首页文件import React,{ Component } from 'react'
export default class Index extends Component {
constructor (props) {
super(props)
this.state = {}
}
componentDidMount () {
}
render () {
return (
<div className="outer home"> indexPage </div> ) } }
好了,现在你是不是迫不及待的去运行 react 基础配置配置支持 @ 文件映射 src 目录在
我们打开项目根目录下的 '@': path.join(__dirname,'..','src'), 如上图所示,这样配置一下。同时,我们需要修改
配置项目支持 scss 文件我们继续编辑 { test: /.scss$/,loaders: ['style-loader','css-loader','sass-loader'],}, 然后,再找到 exclude: [/.(js|jsx|mjs)$/,/.json$/,/.scss$/], 好,修改好之后,我们要对 安装缺少组件我们在路由文件中使用了 npm i react-router-dom
我们使用了 npm i node-sass sass-loader
最后,我们运行 npm start
我们的项目终于跑起来了。 虽然只是一个简单的页面,但是,我们经过这一系列的配置,下面我们可以愉快的撸代码了。 本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |