作者微信
微

React中框架和目录结构

小技术 7个月前 (08-30) 0 999+

关注

ant-design

一款react的移动端ui框架，提供了大量的组件，方便我们的开发

官网, 移动端

npm

也是一个npm模块我们也可以通过npm来安装

npm install antd-mobile

安装完成，我们就可以在项目中使用这些组件了

按需加载

antd-mobile提供的组件太多，全部加载进来会使文件很大。所以要按需加载。

我们就要为webpack添加babel-plugin-import插件

我们要在加载机的options属性配置中引入该插件

query是为加载机定义插件的配置属性

options也是为加载机定义各种插件的属性（包含query）

因此定义了option，就不要定义query了，query中的配置，可以直接写在options中

babel-plugin-import插件要在options的plugins中定义

属性值是数组，每一个成员代表一个插件

[
    {'import', {
    style: 'css', 定义默认样式文件
    libraryName: 'antd-mobole'  处理的模块名称
    }}
]

注意：由于我们要处理css文件，因此我们要定义css加载机

element-ui

element-ui则是一个pc端的框架的，element-ui早期是为vue设计的，后来也为react以及angular提供了相应的UI框架，但是框架模块的名称发生了变化

vue => element-ui

react => element-react

因此我们要通过npm来安装

官网

组件是相似的。

样式

在element-react没有默认样式，我们要选择主题样式并安装

主题样式也是一个模块，也要通过npm安装

npm install element-theme-default

我们要在入口文件中，将其引入

引入的是css样式，所以我们要定义css加载机

字体图标

在主题样式中，引入字体图标，因此要配置字体图标加载机

url-loader

// 引入库
import React, { Component } from 'react';
import { render } from 'react-dom';
// 引入按钮组件
import { Button, Tag, Alert } from 'element-react';
// 引入样式
import 'element-theme-default';
// 定义组件
class App extends Component {
     render() {
          return (
              <div>
              <Button type="success">hello1</Button>
              <Alert title="react学习"></Alert>
              </div>
          )
     }
}
render(<App></App>, app);