一個快速開發響應式網站的有趣的偏視覺交互的前端開發工具箱 / 套件 - Uix Kit

dabai 發布于2019-08-23 18:16 / 2246人閱讀

摘要：雜七雜八會一些前后端開發。好啦，自我介紹簡單就好它是一個偏視覺交互的工具集合，它基于常用的腳本庫，幫助開發者快速完成一套完整的交互型網站。支持和開發模式。工具箱是針對一些特殊效果的交互的網站，也可以用于比較個性化的定制網站的開發設計。

這個產品維護已經有一年了（由于業務需求不同，產品本身是針對國外網站和WordPress的需求搭配），自己本身是做UI出生，開發只是業余愛好，僅僅作為平時工作的需要。雜七雜八會一些前后端開發。并非職業碼農！

我是一個BBoy，也是一個愛到處旅行拍極限視頻的冒險家！喜歡大自然，不喜歡繁華都市。

好啦，自我介紹簡單就好！：）

Uix Kit —— 它是一個偏視覺交互的工具集合，它基于常用的腳本庫，幫助開發者快速完成一套完整的交互型網站。

項目地址： https://github.com/xizon/uix-kit

它不是一個框架，不是一個腳本庫，它是一個兼容Bootstrap的快速建站HTML5套件，遵循W3C標準，包括手風琴、Tab切換、大型導航、單頁、視差、分頁、項目符號列表、文章列表、網格系統、AJAX交互、常用的多風格輪播、視頻、計數器、作品畫廊展示、模態彈窗、簡易燈箱、無限滾動加載、鼠標交互、滾動偵聽動畫、時間軸、按鈕、多風格Footer、文字效果、徽章、表單等等常用的網站模塊，并支持官方無限更新和擴展、優化，滿足各類常用的、交互和動效級的Web前端開發需求。支持Gulp和Webpack開發模式。套件提供了規范的HTML結構和模塊化的HTML,CSS,JS代碼(默認)，能夠讓開發者快速進入開發模式，自定義、修改或刪除任意模塊。

設計初衷：

現在很多普通網站，已經可以通過在線的拖拽建站工具，智能建站系統快速完成，因此普通網站已經無需專門花很多金錢和時間去找一個開發者完成。Uix Kit工具箱是針對一些特殊效果的交互的網站，也可以用于比較個性化的定制網站的開發設計。

套件結構：

uix-kit/
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── webpack.config.js
├── package-lock.json
├── package.json
├── dist/
│   ├── css/
│   │   ├── uix-kit.css
│   │   ├── uix-kit.css.map
│   │   ├── uix-kit.min.css
│   │   ├── uix-kit.min.css.map
│   │   ├── uix-kit-rtl.css
│   │   ├── uix-kit-rtl.css.map
│   │   ├── uix-kit-rtl.min.css
│   │   └── uix-kit-rtl.min.css.map
│   └── js/
│   │   ├── uix-kit.js
│   │   ├── uix-kit.js.map
│   │   ├── uix-kit.min.js
│   │   ├── uix-kit.min.js.map
│   │   ├── uix-kit-rtl.js
│   │   ├── uix-kit-rtl.js.map
│   │   ├── uix-kit-rtl.min.js
│   │   └── uix-kit-rtl.min.js.map
├── misc/
│   ├── screenshots/
│   └── grid/
├── src/
│   ├── index.js
│   ├── index-rtl.js
│   ├── components/
│   │   ├── ES5/  => Third-party plugins adopt pure file merger and do not import and export
│   │   └── ES6/  => Core modules
├── examples/
│   ├── *.html
│   ├── assets/
│   │       ├── css/
│   │       ├── fonts/
│   │       ├── images/
│   │       ├── videos/
│   │       ├── models/
│   │       ├── json/
│   │       └── js/
└──

演示

https://xizon.github.io/uix-kit/examples/

GitHub pages只提供靜態內容訪問，AJAX和PHP請求無法預覽效果，你可以通過線上服務器進行完整預覽。

https://uiux.cc/uix-kit

開發者基本操作:

配置你電腦的Node.js環境

下載完資源后，進入到 uix-kit 目錄下，運行 npm run build, 進入開發模式

當你需要配置腳手架和網站基礎信息和結構的時候，請直接編輯 package.json 文件。

網站的定制化模塊功能在 src/components/ES6/_global 和 src/components/ES6/_main 中，src/components/ES6/* 其它模塊是通用型的功能模塊。HTML文件將會自動打包生成到 examples/ 文件夾中，核心JavaScript和CSS文件會自動打包到 dist/ 文件夾里

不建議跳過開發模式直接修改examples/ 文件夾里的文件，因為代碼量非常大，很難去維護和定制各種動畫、交互、結構。

命令使用方法:

Step 1. 使用命令進入 uix-kit/ 目錄, {your_directory}換成你的目錄路徑

$ cd /{your_directory}/uix-kit

Step 2. 如果沒有node_modules文件夾，則需要運行下面的代碼來安裝開發環境

$ sudo npm install --only=dev --unsafe-perm --production

Step 3. 運行下面的代碼來實時開發項目，修改模塊功能

$ npm run build

Step 4. 可以使用下面的網址來訪問，建議使用本地服務器來訪問，因為下面的網址是靜態訪問，不會執行ajax異步請求，一些網站需要異步來測試效果

http://localhost:8080/examples/

FAQ:

如果出現nodejs的環境或權限問題，可以使用下面的命令解決，注意把{username}換成你自己的設備里的名字。

$ sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.config

小提示：

這個工具套件并不是強制誰去使用它的默認樣式和交互效果，而是提供了一個便于利用的自動化腳手架，通過Webpack來規范你的開發流程，提高代碼的質量和編寫效率，提高后期維護的便利性。這是一種工作方法，而不是現成的模板(當然也可以直接使用examples/目錄里的項目文件，作為快速建站的模板)，Uix Kit的價值，在于靈活運用常用的腳本庫(threejs，jQuery等)，靈活處理HTML文件的結構，快速、簡單的模塊分離，自動化打包和生成目錄，并提供了豐富的默認常用前端代碼應用。

如果它對你有幫助，可以關注Github項目主頁，項目會不斷更新升級優化：）

GPU云服務器云服務器前端開發的網站快速開發前端前端快速開發前端頁面快速開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104946.html

javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0
前端工程化工具初選

摘要：面對日益紛雜的前端工具，作為新人常感無從下手。腳手架應用開發流程與工具項目生成器集成方案解決前端開發中自動化工具性能優化模塊化框架開發規范代碼部署開發流程等問題框架簡潔直觀強悍的框架，讓開發更迅速后端程序的福音。　　面對日益紛雜的前端工具，作為新人常感無從下手。經過一番檢索和簡單對比，再結合自己的喜好，篩選了將要學習和使用的工具，以適應日益工程化、專業化的 Web 前端開發工作。 s...

Rocture 2019-08-19 18:33 評論0 收藏0
JavaScript 資源大全中文版

摘要：官網全新的靜態包管理器。官網一個整合和官網的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。官網小巧的兼容的所見即所得的富文本編輯器。官網富文本編輯器。官網由制作，適用于每天寫作的富文本編輯器。 1. 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。 npm：npm 是 javascript 的包管理器。官網 cnpm：cnpm 是由于國...

jzman 2019-08-23 17:18 評論0 收藏0