前端门户网站搭建

前言：

近年来有很多UI框架组件曾不出穷，典型的代表有：

• • 1、蚂蚁集团的Ant Design系列（官网地址:element-cn.eleme.io/#/zh-CN
    Github: github.com/ElementUI/e…
  • 2、饿了么PC ElementUI（官网地址:element-cn.eleme.io/#/zh-CN
    Github: github.com/ElementUI/e… UI（官网：https://mint-ui.[github](https://so.csdn.net/so/search?q=github&spm=1001.2101.3001.7020).io/#!/zh-cn
    Github: github.com/ElemeFE/min…
  • 3、有赞移动端组件库 Vant UI（官网地址：youzan.github.io/vant/#/zh-C…
    Github: github.com/youzan/vant…
  • 4、谷歌移动UI框架Flutter（官网:flutterchina.club/
    Github: github.com/flutter/flu…
  • 5、小程序UI框架WeUI（官网地址：weui.io/
    Github: github.com/weui/weui.g…
  • 6、TalkingData开发维护 Iview UI（官网地址：www.iviewui.com
    Github: github.com/TalkingData…
  • 。。。。

对于前端开发而言，UI组件库的出现，加速了开发，统一了UI，给程序员大大节省了时间。对于这些UI库我们去使用的时候，都需要去参考相对应的门户网站，例如 Ant Design：

一个标准的门户网站它基本上包含：首页、版本、国际化、github地址、以及各种上手教程、开发规范、升级规则、组件教程等等信息。那作为一个前端开发人员，我们在平常的工作中，也会封装各种组件，那如何将你封装的组件配合你的教程形成你自己的门户网站呢，这是我们今天要讨论的。

前端语言目前Vue与React分庭抗礼，今天我们就用这两种不同的语言来对比下搭建门户网站的区别，Vue语言我们推荐使用Vue Press框架来进行门户网站的建设；React语言我们推荐使用Dumi直接集成AntD Pro项目来自动生成门户网站。

1、关于VuePress框架

官网地址：vuepress.vuejs.org/

VuePress是Vue驱动的静态网站生成器，以Markdown为中心项目结构，支持Vue+webpack的开发体验，支持在Markdown中使用Vue组件，又可以使用Vue来开发自定义主题，同时每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

1、基本操作-全局

tips：node版本>=8.6.0；

# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build 

2、脚手架快速上手 - 项目

tips：node版本>=8.6.0；如果你的现有项目依赖了 webpack 3.x，我们推荐使用 yarn 而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。

1、这里我们从0开始搭建网站；如果要在已有的项目中使用vuepress管理文档，可以直接安装vuepress依赖

# 创建目录

mkdir vuepress-starter  &  cd vuepress-starter 

# 初始化

yarn init  

# 安装依赖

yarn add -D vuepress

# 配置 在package.json 中增加dev启动命令与build构建命令；如下配置

 "scripts": {
    "dev": "vuepress dev docs", 
    "build": "vuepress build docs" 
  },

2、在项目中新增docs目录，目录中新增README.md文件，内容如下：

---
home: true
features:
- title: 丰富功能
  details: 提炼了典型的业务模型，提供了丰富的功能组件。
- title: 最新技术栈
  details: 使用 vue/vuex/vue-router/element 等前端前沿技术开发。
- title: 权限验证
  details: 内网统一登录，集成请求库，快速上手。提供ACL权限处理，权限管理更加方便。
- title: 数据统计
  details: 集成神策全埋点，统计用户行为数据，通过神策数据后台让你更清晰掌握用户的行为，以提升用户体验。
- title: 降本增效
  details: 上线方式采用OSS+CDN，降低运维成本、避免运维申请一台机器。
- title: 业务组件
  details: GNSS、算法通用业务组件，独立拆分，可在老项目中进行使用单个vue组件。
footer: MIT Licensed | Copyright ©

---

3、启动项目

执行 yarn dev ； 访问localhost:8080；会看到如下界面：

4、开启配置

• 4.1、在docs目录下新增 .vuepress 目录;在其目录下新增config.js；

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象；

可填写的配置参考官方文档： 参考地址

我们这里写入标题title与描述description

module.exports = {
    title: '门户网站',
    description: '这是用vuepress搭建的静态门户网站'
}

• 4.2、在docs/README.md 文件中 增加快速上手导航

• 4.3 、在docs下新增guide目录，该目录即代表快速上手指向的地址，在该目录下创建README.md文件，编写需要的内容，语法完全参考markdown语法。

5、网站搭建

如上，基本架子结构已经搭建好，剩下的就是各种内容文档的建设工作

例如：在config.js中新增如下配置

 themeConfig: {
        displayAllHeaders: true,
        sidebarDepth: 3,
        nav: [
            { text: '首页', link: '/' },
            {
                text: '学习',
                items: [
                    {
                        text: '文档', items: [
                            { text: '基础', link: '/guide/' },
                            { text: 'API', link: '/layout/' }
                        ]
                    },
                    {
                        text: '进阶', items: [
                            { text: '其他', link: '/other/' }
                        ]
                    },
                    {
                        text: '高级', items: [
                            { text: 'vueComponent', link: '/vueComponent/' }
                        ]
                    }
                ]
            },
            { text: 'GitLab', link: 'xxxxxxx' },
        ],
        sidebar: [
            {
                title: '基础',
                collapsable: true,
                children: ['/guide/'],
                sidebarDepth: 3
            },
            {
                title: 'API',
                collapsable: true,
                children: [
                    {
                        title: '基础',
                        collapsable: true,
                        children: ['/layout/']
                    },
                    {
                        title: '组件',
                        collapsable: true,
                        children: ['/layout/component/']
                    },
                    {
                        title: '网络请求api',
                        collapsable: true,
                        children: ['/layout/api/']
                    },
                    {
                        title: '外部模块使用',
                        collapsable: true,
                        children: ['/layout/outmodule/']
                    }
                ],
            },
            {
                title: '其他',
                collapsable: true,
                children: ['/other/',
                    {
                        title: 'TS',
                        collapsable: true,
                        children: ['/other/tsdemo/']
                    },
                    {
                        title: 'EsLint',
                        collapsable: true,
                        children: ['/other/eslint/']
                    },
                    {
                        title: 'CDN+OSS发布',
                        collapsable: true,
                        children: ['/other/cdn/']
                    },
                    {
                        title: '埋点',
                        collapsable: true,
                        children: ['/other/sensors/']
                    },
                    {
                        title: '更多',
                        collapsable: true,
                        children: ['/other/more/']
                    }
                ],
            },
            {
                title: 'VueComponent',
                collapsable: true,
                path: '/vueComponent/',
                children: [
                    {
                        title: 'x x x x',
                        collapsable: true,
                        children: ['/vueComponent/xxxx/']
                    }
                ],
            }
        ]
    }

重新启动后，我们可以看到如下配置，上述配置中路径构建对应的README.md文件即可作为当前访问目录的信息内容，语法为markdown语法。

到这里，我们使用vuepress搭建一个门户网站就完成了。

2、关于dumi框架

dumi是为组件开发场景而生的文档工具，开箱即用，将注意力集中在组件开发和文档编写上，丰富的 Markdown 扩展，不止于渲染组件 demo，基于 TypeScript 类型定义，自动生成组件 API。

1、环境准备

node版本需在10.13以上

$ node -v
v10.13.0

2、脚手架初始化

官方提供了三种模式，这里推荐这两种模式，文档模式与站点模式

$ npx @umijs/create-dumi-lib        # 初始化一个文档模式的组件库开发脚手架
# or
$ yarn create @umijs/dumi-lib

$ npx @umijs/create-dumi-lib --site # 初始化一个站点模式的组件库开发脚手架
# or
$ yarn create @umijs/dumi-lib --site

创建完以后，执行yarn ；然后启动 yarn start；可以看到项目架构

文档模式：

站点模式：

开发请参考d.umijs.org/zh-CN/guide… 进行配置，以及文件构建；

1、项目集成dumi

以上为通过dumi官方脚手架初始化门户网站，然而作为使用react进行项目开发的程序员，我们的系统架构大多是基于umi开发的，脚手架更多的是通过antd pro搭建的，那么基于此项目，我们再使用dumi开发，会自动根据项目的组件等生成文档，更加方便我们门户网站的建设，减少工作量。

1、环境准备

首先创建antd pro项目

# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp

选择umi3版本，选择全量/简单的脚手架，进行yarn ，启动

2、自动集成

当 dependencies 或 devDependencies 中包含 umi 和 @umijs/preset-dumi 时，进入集成模式（不再需要单独安装 dumi 这个包）；使用antd pro脚手架，搭建的项目，默认包含此依赖，故会自动集成，不需要安装dumi这个包；

所有 dumi 文档都会集中在 /~docs 路由下，与原项目相互隔离、互不干扰，可以理解为标准 dumi 文档都加了一个特定路由前缀，也包括用户的导航和菜单路由配置；

此时不做任何操作的情况下，直接访问localhost:8000/~docs，即可看到基于antd pro的 文档化工具；默认为文档模式；

3、配置

1、在config中创建config.dumi.ts文件，用于dumi文档配置

// https://umijs.org/config/
import { defineConfig } from 'umi';

export default defineConfig({
  //dumi配置
  mode: 'site',
  title: '门户网站',
  outputPath: 'docs-dist',
  navs: [
    null, // null 值代表保留约定式生成的导航，只做增量配置
    {
      title: 'GitHub',
      path: 'https://xxxxx',
    },
  ],
  // dumi配置到此
});

选择site模式，里面同时可以配置logo等图标，更多配置可参考官网

2、在package.json中新增关于dumi的指令

// 启动dumi配置文件
"start:doc": "cross-env UMI_ENV=dumi umi dev",
//构建dumi文档化
"build:doc": "UMI_ENV=dumi umi build --dumi",

完成以上两步，执行yarn:start:doc，访问http://localhost:8000/~docs，即可看到如下

2、进阶

首页增加，为了使门户网站更加美观，可以丰富首页，这里选择使用模版来新增首页，关于模版，ant landing提供了丰富的模版供我们参考landing.ant.design/index-cn

可以选择已有的模版，也可以自行编辑（自行编辑，编辑器内提供很多丰富的模块，可以自行添加修改文案与图片），更多模版的技术，可自行学习官网，这里我们使用其提供的模版在新增门户网站的首页。

1、在项目根目录下新建docs目录，新增index.md文件，写入内容如下：

---
gapless: true
---

<code src="./Home/index.jsx" inline />

2、选择模版/编辑模版 ，点击下载，解压后放在docs目录下

3、依赖安装

4、重新启动运行

可看到如下首页已经添加至门户网站，这样整个门户网站会更加美观。同时首页可展示跟多信息。