另外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的官方文檔部署到了我們本地。