(一)將elementUI官方文檔部署到本地


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM