一個(gè)快速開發(fā)響應(yīng)式網(wǎng)站的有趣的偏視覺交互的前端開發(fā)工具箱 / 套件 - Uix Kit

dabai 發(fā)布于2019-08-23 18:16 / 2253人閱讀

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

這個(gè)產(chǎn)品維護(hù)已經(jīng)有一年了（由于業(yè)務(wù)需求不同，產(chǎn)品本身是針對(duì)國外網(wǎng)站和WordPress的需求搭配），自己本身是做UI出生，開發(fā)只是業(yè)余愛好，僅僅作為平時(shí)工作的需要。雜七雜八會(huì)一些前后端開發(fā)。并非職業(yè)碼農(nóng)！

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

好啦，自我介紹簡(jiǎn)單就好！：）

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

項(xiàng)目地址： https://github.com/xizon/uix-kit

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

設(shè)計(jì)初衷：

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

套件結(jié)構(gòu)：

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只提供靜態(tài)內(nèi)容訪問，AJAX和PHP請(qǐng)求無法預(yù)覽效果，你可以通過線上服務(wù)器進(jìn)行完整預(yù)覽。

https://uiux.cc/uix-kit

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

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

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

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

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

不建議跳過開發(fā)模式直接修改examples/ 文件夾里的文件，因?yàn)榇a量非常大，很難去維護(hù)和定制各種動(dòng)畫、交互、結(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)訪問，不會(huì)執(zhí)行ajax異步請(qǐng)求，一些網(wǎng)站需要異步來測(cè)試效果

http://localhost:8080/examples/

FAQ:

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

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

小提示：

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

如果它對(duì)你有幫助，可以關(guān)注Github項(xiàng)目主頁，項(xiàng)目會(huì)不斷更新升級(jí)優(yōu)化：）