引言：

成都創(chuàng)新互聯(lián)公司專注于三明企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城開發(fā)。三明網(wǎng)站建設(shè)公司,為三明等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

隨著時(shí)代的進(jìn)步，很多零代碼拖拽建站工具，智能建站工具，這些工具能快速滿足常用網(wǎng)站布局與交互（視差、輪播等）需求。但是往往一些定制化的交互（3D，VR，SVG等），還是需要運(yùn)用常用的引擎和庫來完成整個(gè)交互構(gòu)架。面對一些特殊的視覺交互需求，就需要一套工具箱，來幫助開發(fā)者快速完成網(wǎng)站的結(jié)構(gòu)，標(biāo)準(zhǔn)參考，基礎(chǔ)視覺樣式、網(wǎng)格布局等，Uix Kit由此而誕生！ Uix Kit! 是一個(gè)偏視覺交互的工具集合，數(shù)據(jù)交互的模塊非常少，它基于常用的腳本庫，幫助開發(fā)者快速完成一套完整的交互型網(wǎng)站。它不是一個(gè)框架，不是一個(gè)腳本庫，它是一個(gè)兼容Bootstrap的快速建站HTML5套件，遵循W3C標(biāo)準(zhǔn)，包括手風(fēng)琴、Tab切換、大型導(dǎo)航、單頁、視差、分頁、項(xiàng)目符號列表、文章列表、網(wǎng)格系統(tǒng)、AJAX交互、常用的多風(fēng)格輪播、視頻、計(jì)數(shù)器、作品畫廊展示、模態(tài)彈窗、簡易燈箱、無限滾動加載、鼠標(biāo)交互、滾動偵聽動畫、時(shí)間軸、按鈕、多風(fēng)格Footer、文字效果、徽章、表單等等常用的網(wǎng)站模塊，并支持官方無限更新和擴(kuò)展、優(yōu)化，滿足各類常用的、交互和動效級的Web前端開發(fā)需求。支持Gulp和Webpack開發(fā)模式。套件提供了規(guī)范的HTML結(jié)構(gòu)和模塊化的HTML,CSS,JS代碼(默認(rèn))，能夠讓開發(fā)者快速進(jìn)入開發(fā)模式，自定義、修改或刪除任意模塊。

需求：

現(xiàn)在很多普通網(wǎng)站，已經(jīng)可以通過在線的拖拽建站工具，智能建站系統(tǒng)快速完成，因此普通網(wǎng)站已經(jīng)無需專門花很多金錢和時(shí)間去找一個(gè)開發(fā)者完成。Uix Kit工具箱是針對一些特殊效果的交互的網(wǎng)站，也可以用于比較個(gè)性化的定制網(wǎng)站的開發(fā)設(shè)計(jì)。

超過120+基礎(chǔ)模塊，快速搭建你的響應(yīng)式網(wǎng)站!

Uix Kit是一個(gè)偏視覺交互的工具集合，它基于常用的腳本庫，幫助開發(fā)者快速完成一套完整的交互型網(wǎng)站。它不是一個(gè)框架，所有的模塊腳本和樣式，全部由你掌控！

演示

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

GitHub pages只提供靜態(tài)內(nèi)容訪問，AJAX和PHP請求無法預(yù)覽效果，你可以通過線上服務(wù)器進(jìn)行完整預(yù)覽。

https://uiux.cc/uix-kit

資源地址：

https://github.com/xizon/uix-kit

核心目錄結(jié)構(gòu):

uix-kit/
├──?README.md???---------------------------?#?主要文檔
├──?CHANGELOG.md???------------------------?#?更新日志
├──?CONTRIBUTING.md???---------------------?#?引用資源
├──?LICENSE?????---------------------------?#?許可證
├──?webpack.config.js??--------------------?#?webpack腳手架配置
├──?package.json??-------------------------?#?項(xiàng)目配置文件【網(wǎng)站編譯生成的注釋信息可以在此修改】
├──?package-lock.json
├──?dist/
│???├──?css/
│???│???├──?uix-kit.css??------------------?#?網(wǎng)站核心樣式（已編譯）
│???│???├──?uix-kit.css.map
│???│???├──?uix-kit.min.css??--------------?#?網(wǎng)站核心樣式壓縮版，默認(rèn)產(chǎn)品調(diào)用（已編譯）
│???│???├──?uix-kit.min.css.map
│???│???├──?uix-kit-rtl.css???-------------?#?網(wǎng)站核心RTL樣式（已編譯）
│???│???├──?uix-kit-rtl.css.map
│???│???├──?uix-kit-rtl.min.css???---------?#?網(wǎng)站核心RTL樣式壓縮版，默認(rèn)產(chǎn)品調(diào)用（已編譯）
│???│???└──?uix-kit-rtl.min.css.map
│???└──?js/
│???│???├──?uix-kit.js???------------------?#?網(wǎng)站核心腳本（已編譯）
│???│???├──?uix-kit.js.map
│???│???├──?uix-kit.min.js??---------------?#?網(wǎng)站核心樣式壓縮版，默認(rèn)產(chǎn)品調(diào)用（已編譯）
│???│???├──?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/?-----------------------------?#?PSD版本網(wǎng)格系統(tǒng)，輔助UI設(shè)計(jì)
├──?src/
│???├──?components/
│???│???├──?ES5/??-------------------------?#?第三方插件(直接合并，不經(jīng)過ES6的編譯)
│???│???├──?ES6/_global?-------------------?#?網(wǎng)站通用代碼模塊
│???│???├──?ES6/_main??--------------------?#?網(wǎng)站定制化文件目錄【用于二次開發(fā)或者新網(wǎng)站開發(fā)。網(wǎng)站新的HTML模板和其它樣式腳本可以直接放到此文件夾】
│???│???└──?ES6/??-------------------------?#?網(wǎng)站通用功能模塊【一般不需要去修改它們，可以根據(jù)情況修改其樣式和腳本】
├──?examples/????????????????????????????????
│???├──?*.html??---------------------------?#?編譯后的純HTML模板，用于后端整合或者演示
│???└──?assets/??--------------------------?#?靜態(tài)資源目錄
│???│???????├──?css/
│???│???????├──?fonts/
│???│???????├──?images/
│???│???????├──?videos/
│???│???????├──?models/
│???│???????├──?json/
│???│???????└──?js/
└──

開發(fā)者基本操作:

1. 配置你電腦的Node.js環(huán)境

2. 下載完資源后，進(jìn)入到?uix-kit?目錄下，運(yùn)行?npm run build, 進(jìn)入開發(fā)模式

3. 當(dāng)你需要配置腳手架和網(wǎng)站基礎(chǔ)信息和結(jié)構(gòu)的時(shí)候，請直接編輯?package.json?文件。

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

不建議跳過開發(fā)模式直接修改examples/ 文件夾里的文件，因?yàn)榇a量非常大，很難去維護(hù)和定制各種動畫、交互、結(jié)構(gòu)。

命令使用方法:

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

$?cd?/{your_directory}/uix-kit

Step 2.?如果沒有node_modules文件夾，則需要運(yùn)行下面的代碼來安裝開發(fā)環(huán)境

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

Step 3.?運(yùn)行下面的代碼來實(shí)時(shí)開發(fā)項(xiàng)目，修改模塊功能

$?npm?run?build

Step 4.?可以使用下面的網(wǎng)址來訪問，建議使用本地服務(wù)器來訪問，因?yàn)橄旅娴木W(wǎng)址是靜態(tài)訪問，不會執(zhí)行ajax異步請求，一些網(wǎng)站需要異步來測試效果

http://localhost:8080/examples/

FAQ:

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

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

下面是截圖和介紹圖（英文版），歡迎咂鉆：）

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。