成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

dabai / 2259人閱讀

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

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

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

好啦，自我介紹簡單就好?。海?/p>

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

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

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

設(shè)計初衷：

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

套件結(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請求無法預(yù)覽效果，你可以通過線上服務(wù)器進行完整預(yù)覽。

https://uiux.cc/uix-kit

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

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

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

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

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

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

命令使用方法:

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

$ cd /{your_directory}/uix-kit

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

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

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

$ npm run build

Step 4. 可以使用下面的網(wǎng)址來訪問，建議使用本地服務(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
小提示：

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104946.html

相關(guān)文章

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

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

    netmou 評論0 收藏0

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

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

    Hydrogen 評論0 收藏0

  • javascript功能插件大集合，寫前端的親們記得收藏

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

    cfanr 評論0 收藏0

  • 前端工程化工具初選

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

    Rocture 評論0 收藏0

  • JavaScript 資源大全中文版

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

    jzman 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<