react记录

1.使用create-react-app命令创建react项目，生成的项目里没有config等配置文件，运行npm run eject命令来生成配置文件，报了下面的错：

2.PNG

原因是脚手架里有.gitgnore文件，但是却没有本地仓库，删掉.git文件夹或者初始化个本地仓库就可以了

2.修改默认路径
config文件夹下webpack.config.js文件，在alias下添加

  alias:{
     ...
     '@': path.resolve(__dirname, '../src')
  }

3.图片等静态文件引入方法

/**
 * 两种引入方式
 * 1.import 然后将变量写入
 * 2.require 这种方法只能直接引入一个字符串，不可以放变量。
 * 
 * require引入，在css里没问题，但是在js里写入的时候，webpack会把它当成字符串来打包，可能会出现打包完毕图片找不到的问题
 * import是es6的写法，推荐使用
 */
import a0 from '@/assets/img/a-0.png'
import a1 from '@/assets/img/a-1.png'
import a2 from '@/assets/img/a-2.png'
import a3 from '@/assets/img/a-3.png'

export default class FootTab extends React.Component {
    render() {
        return <div>
            <p>
                <img src={a1} />
                <span>首页</span>
            </p>
            <p>
                <img src={require('@/assets/img/a-3.png')}/>
                <span>我的</span>
            </p>
        </div>
    }
}

4.引入sass

1.安装sass      npm install node-sass -D
2.安装依赖     npm install sass-loader node-sass --save-dev

修改config下的配置文件webpack.config.js

rules:[
    ...
    {
         exclude: [/\.js$/,/\.html$/,/\.json$/,/\.scss$/],   //添加类别
         loader: require.resolve('file-loader'),
         options: {
            name: 'static/media/[name].[hash:8].[ext]'
          },
      },
     //新增
     {
          test:/\.scss$/,
          loaders:['style-loader','css-loader','sass-loader']
      }
  ]

5.警告 ：'XXX' is defined but never used
页面引入了'XXX'却没有使用，注掉就行