zoukankan      html  css  js  c++  java
  • React构建项目

    一、命令行依次输入如下的命令

    npm install -g create-react-app

    create-react-app my-app

    cd my-app

    npm start

    创建完成后文件的结构如下:

      

    src中的文件就是我们项目需要编写的文件

      如果我们需要在react项目中使用antd

    则需要执行如下命令

      npm install antd --save之后执行npm install babel-plugin-import --save(这是按需引入)

    babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理),现在我们尝试安装它并修改 config-overrides.js 文件

    const { override, fixBabelImports } = require('customize-cra');
    
    - module.exports = function override(config, env) {
    -   // do stuff with the webpack config...
    -   return config;
    - };
    + module.exports = override(
    +   fixBabelImports('import', {
    +     libraryName: 'antd',
    +     libraryDirectory: 'es',
    +     style: 'css',
    +   }),
    + );

    之后只需要在组件中引用就行了

      // src/App.js
      import React, { Component } from 'react';
      import { Button } from 'antd';
      import './App.css';
    
      class App extends Component {
        render() {
          return (
            <div className="App">
              <Button type="primary">Button</Button>
            </div>
          );
        }
      }

    为了加快开发的速度,我们可能需要使用less

     npm install less less-loader --save-dev 

     我们需要运行npm run eject   来暴露webpack的配置文件,你会发现多了config为名的文件夹

    之后修改webpack.config.js文件

     // 在module中做了三处修改
      // 第一处是找到 `test: /.css$/` 将其改为  `test: /.(css|less)$/`
      // 第二处是增加 `less-loader`的配置
      // 第三处是在exclude属性中增加 `/.(css|less)$/` 
      // 具体修改如下
      module: {
        ...
        {
          // test: /.css$/  第一处 
          test: /.(css|less)$/,
          use: [
            require.resolve('style-loader'),
            ...
            // 第二处
            {
              loader: require.resolve('less-loader')
            }
          ]
        },
        {
          exclude: [
            /.(js|jsx|mjs)$/, 
            /.html$/, 
            /.json$/,
            // 第三处
            /.(css|less)$/,
          ]
        }
      }

    之后重启项目就可以用less了

    babel-plugin-import

  • 相关阅读:
    iOS开发之--将 "中文" 转化成 "拼音"
    iOS swift语言
    手势识别
    学习git
    iOS开发如何在外面拿到一个子控件的frame ????
    协议和代理的理解及使用
    iOS开发之----生成二维码
    组合数C(n,m)的四种求解方法
    求一个数的正数因子(模板)
    图论五:网络流
  • 原文地址:https://www.cnblogs.com/sisxxw/p/12514498.html
Copyright © 2011-2022 走看看