(一)将elementUI官方文档部署到本地 - 昭冥大人呀

时间:2024-01-29 15:39:23

(一)将elementUI官方文档部署到本地

Posted on 2020-04-17 16:13  昭冥大人呀  阅读(2707)  评论(0编辑  收藏  举报

另外elementUI的官网好像中毒了一样,vue版本的文档完全被广告遮挡了,这是官网要和代码一起停止维护的节奏吗?(有些可惜了,傻鱼使用elementUI的体验还是很不错的。>_<)

由于傻鱼工作中使用的UI库主要是element,看不了官方文档真心不方便,于是打算把官网部署到本地环境。

 

过程很简单

 

首先下载一份源码:官方仓库(https://github.com/ElemeFE/element),elementui的源码中包含了elementui官方文档的源码

 

本地安装运行(npm install....)

 

然后分析package.json中的指令。。。里面的指令很多,我们以后逐个分析。

 

找到dev指令,看到执行内容为:

"dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
dev干了很多事,我们先只看 webpack-dev-server启动的哪个配置文件,webpack.demo.js,看一下这个配置文件内容

 

 本地运行的入口文件是 examples/entry.js  ,事实上这个文件正式文档部分源码的入口文件(example目录下是官方文档源码)

启动端口8085

本地启动结果如下图

 

 

现在问题来了

我们可以本地启动官方文档,那怎样把官方文档打包,部署到我们的本地的Nginx上呢?

package.json里当然已经有这条指令了

"deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",

配置文件还是webpack.demo.js,看看它将我们的官网打包到哪里了

 

 在examples文件夹下会生产一个element-ui文件夹。。。

看来这就是我们的官网了,将这个文件夹放到Nginx上试一下。

结果如下:

 

 

 

 

 

到此,我们已经把elementui的官方文档部署到了我们本地。