开始说明

  • 预估时间 1 天（包括优化和写脚本时间）
  • 需要的角色
    • 一个开发 （构建、部署；需要熟悉前后端）；占比80%；
    • 一个设计（主要设计logo、宣传图）；占比10%；
    • 产品（可以开发兼任，主要是根据landing.ant.design选型一下）；占比10%；
  • 借助的工具和框架

第一阶段;可视化设计

  • 参考 landing.ant.design 说明文档；设计完后导出react源码组件；
  • 设计师设计的素材；可以通过上传到七牛；获取到图片链接后，在引用到可视化设计里面；

第二阶段：使用umi来渲染react代码

  1. mkdir tavel;
  2. cd tavel;
  3. mkdir src
  4. umi g page index;
  5. mkdir Home; cd Home;  unzip Home.zip; cd ../
  6. mv Home ./src
  7. mv pages ./src
  8. yarn add react react-dom
  9. yarn add umi-plugin-react --save
  1. vim .umirc.js 
  2. // .umirc.js 
  3. export default {
  4.   plugins: [
  5.     [
  6.       'umi-plugin-react', {
  7.         antd: true,
  8.       }
  9.     ],
  10.   ]
  11. }
  1. vim src/pages/index.js
  2. // index.js 
  3. import Home from '../Home';
  4.     export default function() {
  5.       return (
  7.        <Home />
  8.       );
  9.     }
  1. vim src/global.less
  2. //global.less
  3. @import './Home/less/antMotionStyle.less';
  1. vim src/Home/index.jsx
  2. 删除该句： import './less/antMotionStyle.less';
  • 执行完后：umi dev，进行调试；如有报错 提示有依赖组件 is not install 则使用 yarn add ’组件名称‘ 安装一下；
  • 最后进行 umi build; 在dist目录里面就能看到你要发布的内容

第三阶段（属于优化，可选操作）：js上传到cdn；加快页面加载速度；

  • 编译完后因为 umi.js 太大；超过了1M；且是放在根目录下；如果你站点没加cdn；会导致首次访问比较慢；所以建议你把umi.js 上传到cdn；再引用cdn的文件；
  • 以上做法是可加速；但是一点改动比较频繁的话，每次都要在编译后把umi.js 传到cdn，会很麻烦；建议的做法是把 依赖第三方一些 js 、css分离出来；这些是基本不会随着每次编译而改变；把他们上传到cdn即可；具体做法：
  1. vim .umirc.js 在plugins里面添加以下内容
  2. //.umirc.js
  3.  plugins: [
  4.      ...
  5.     ['umi-plugin-auto-externals', {
  6.       packages: [ 'antd' ],
  7.       urlTemplate: 'https://unpkg.com/{{ library }}@{{ version }}/{{ path }}',
  8.       checkOnline: false,
  9.     }],
  10.   ]
  1. tyarn add 'umi-plugin-auto-externals'; 
  2. tyarn add 'moment';
  3. umi build;
  • 最后把生成的 unpkg.com 文件上传到国内的七牛云； 修改index.html 文件的引用地址为新地址；

第四阶段（属优化，可选操作）：seo友好

  • 打开 dist/index.html；会看到里面body里面只有：<div id="root"></div>；真正的内容是在js来生成的；这样对seo非常不友好；我们需要预渲染；在服务器返回给浏览器的时候就把内容渲染好了；umi需要seo友好化；咋做？
  • 查看umi说明文档里面的这个介绍： https://umijs.org/zh/guide/ssr.html#预渲染（pre-render） ；基本讲清楚了；写这篇博文的时候，该组件还是beta版，部分场景会无法成功渲染；
  • 我只需渲染部分页面，所以选择在编译的时候进行渲染，操作如下：
  1. vim .umirc.js 添加以下内容：
  2. //.umirc.js
  3. ssr: true,
  4.  plugins: [
  5.  ...
  6. ['@umijs/plugin-prerender', {}],
  7. ],
  1. yarn add '@umijs/plugin-prerender'
  2. umi build

第五阶段: 服务器设置：

  • 因为是spa应用；所以需要设置为不存在的路由都走 index.html 入口：以下为nginx配置
  1. server {
  2.     listen 80;
  3.     server_name www.xxxx.com;
  4.     root /www/static/;
  6.     index index.html index.htm index.php;
  8.     charset utf-8;
  11.     location / {
  12.         try_files $uri @fallback;
  13.         autoindex on;
  14.     }
  15.     location @fallback {
  16.         rewrite .* /index.html break;
  17.     }
  19.     location = /favicon.ico { access_log off; log_not_found off; }
  20.     location = /robots.txt  { access_log off; log_not_found off; }
  22.     access_log /www/log/api.log;
  23.     error_log  /www/log/api.error.log;
  26.     location ~ /\.ht {
  27.         deny all;
  28.     }
  29. }

完结

  • 至此1天内撸完一个官网并上线；就讲解完了；里面的一些操作；比如编译、发布、修改cdn地址；这些都可以用脚本自动化走一下；具体可以看我的git代码：自动化发布脚本化工具
  • 说明一下： 编译阶段进行预渲染，我使用的时候，简单的页面模板可以成功，复杂一点的不行；建议改成用服务端渲染的方式