React

create-react-app

功能有：
···

axios 网络获取数据

rem 手机距离适配，同时添加less-loader

yarn add less less-loader
yarn add autoprefixer

在/public/index.html 中间插入

1
2

<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);
      flex(100, 1);</script>

然后在/config/webpack.config.dev.js 增加

const pxtorem = require('postcss-pxtorem');
module.exports = {
    module: {
        rules: [{
                oneOf: [
                    {
                        test: /\.(svg)$/i,
                        loader: 'svg-sprite-loader',
                        include: [
                        require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. svg files of antd-mobile
                        path.resolve(__dirname, '../src/icons'), // folder of svg files in your project
                        ]
                    },
                    {
                        test: /\.less$/,
                        use: [
                        require.resolve('style-loader'),
                        require.resolve('css-loader'),
                        {
                            loader: require.resolve('postcss-loader'),
                            options: {
                            ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                            plugins: () => [
                                autoprefixer({
                                browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
                                }),
                                pxtorem({ rootValue: 100, propWhiteList: [] })
                            ],
                            },
                        },
                        {
                            loader: require.resolve('less-loader'),
                            options: {
                            modifyVars: { "@primary-color": "#1DA57A" },
                            },
                        }],
                    }]
            }]
    }
}

yarn run eject 和 antd加入

由于需要使用mobx 的”@” decorator 功能。yarn run eject 解开webpack 之后
yarn add babel-plugin-transform-decorators-legacy --dev,
同时/package.json 加上

"babel": {
    "plugins": [
        "transform-decorators-legacy",
        [
            "import", { "libraryName": "antd-mobile", "style": "css"}
        ]
    ]
}

同时为了打包yarn build 项目路由能找到静态文件,在/package.json "homepage": ".". 重要

项目目录

/src
    /axios
    /components
    /constants
    /icons
    /pages//各个页面的page
    /router/index//路由中心
    /routes//各级路由和总根路由
    /store//各个store和index store
    /utils
    index.js
    index.css
package.json

解决编译后某个bug

/public/index.html 中间加上:
<script type="text/babel" src="./lander.js"></script>

build

build 的语法同样很重要，否则出现Nginx 配置路由，启动build 后的项目变成阅览文件目录:
$ PUBLIC_URL=http://lsgood.top yarn build

原由是/public/index.html 的link 写到：

1 2	<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

注意PUBLIC_URL(当时不知道解决方案，花了三天，愁的都长痘痘了).

Nginx 配置

server {
        listen 80 default_server;
        server_name www.lsgood.top lsgood.top;

        root /var/www;
        index index.html index.htm;      
        # Any route that doesn't have a file extension (e.g. /devices)
        location ~ ^/favicon\.ico$ {
            root /var/www;
        }
        location / {
            try_files $uri $uri/ /index.html;
            index index.html;
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Proto  $scheme;
        }
        location @fallback {
            rewrite ^.*$ /index.html break;
        }
        location /girlS/ {
            proxy_pass http://127.0.0.1:8000/girl.v1/;
        }

        location /popcircle/ {
            root /root/Work/game/;
        }
    }

这样多个路由就能看到不同点了

Mobx 在上面的使用

/src/store/下存储着各个store 具体事务，index 是其中的集合体。

/src/index.js 下导入“mobx-react” 的Provider，引入了所有的store。

这样在使用时，如/store:topics.js, /pages:Default.js inject关联store:

@inject(({topics, status}) => ({
    data: topics.data
}))
@observer class DefaultClass extends React.Component {
    ...this.props.data//就拿出来了
}

store.js 里面一般会有4个方法:{ observable, action, useStrict }
action 的作用是，强制用户在该方法下更改被observable 的属性, 用法：

@observable data;
@action.bound updateData(val) {
    this.data = val;
}

同时,action.bound 可以正确获得this 指针.

最后export 这个单例对象:export default new Store();，放到/src/store/index.js 的export default {store}下,完成合并store，以便所有节点都可以inject.
···

2018-11-14lesson