一款有趣的响应式网站开发工具箱-UixKit-创新互联
引言：
成都创新互联公司专注于三明企业网站建设,响应式网站开发,商城开发。三明网站建设公司,为三明等地区提供建站服务。全流程按需网站制作，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务随着时代的进步，很多零代码拖拽建站工具，智能建站工具，这些工具能快速满足常用网站布局与交互（视差、轮播等）需求。但是往往一些定制化的交互（3D，VR，SVG等），还是需要运用常用的引擎和库来完成整个交互构架。面对一些特殊的视觉交互需求，就需要一套工具箱，来帮助开发者快速完成网站的结构，标准参考，基础视觉样式、网格布局等，Uix Kit由此而诞生！ Uix Kit! 是一个偏视觉交互的工具集合，数据交互的模块非常少，它基于常用的脚本库，帮助开发者快速完成一套完整的交互型网站。它不是一个框架，不是一个脚本库，它是一个兼容Bootstrap的快速建站HTML5套件，遵循W3C标准，包括手风琴、Tab切换、大型导航、单页、视差、分页、项目符号列表、文章列表、网格系统、AJAX交互、常用的多风格轮播、视频、计数器、作品画廊展示、模态弹窗、简易灯箱、无限滚动加载、鼠标交互、滚动侦听动画、时间轴、按钮、多风格Footer、文字效果、徽章、表单等等常用的网站模块，并支持官方无限更新和扩展、优化，满足各类常用的、交互和动效级的Web前端开发需求。支持Gulp和Webpack开发模式。套件提供了规范的HTML结构和模块化的HTML,CSS,JS代码(默认)，能够让开发者快速进入开发模式，自定义、修改或删除任意模块。
需求：
现在很多普通网站，已经可以通过在线的拖拽建站工具，智能建站系统快速完成，因此普通网站已经无需专门花很多金钱和时间去找一个开发者完成。Uix Kit工具箱是针对一些特殊效果的交互的网站，也可以用于比较个性化的定制网站的开发设计。
超过120+基础模块，快速搭建你的响应式网站!
Uix Kit是一个偏视觉交互的工具集合，它基于常用的脚本库，帮助开发者快速完成一套完整的交互型网站。它不是一个框架，所有的模块脚本和样式，全部由你掌控！
演示
https://xizon.github.io/uix-kit/examples/
GitHub pages只提供静态内容访问，AJAX和PHP请求无法预览效果，你可以通过线上服务器进行完整预览。
https://uiux.cc/uix-kit
资源地址：
https://github.com/xizon/uix-kit
核心目录结构:
uix-kit/ ├── README.md --------------------------- # 主要文档 ├── CHANGELOG.md ------------------------ # 更新日志 ├── CONTRIBUTING.md --------------------- # 引用资源 ├── LICENSE --------------------------- # 许可证 ├── webpack.config.js -------------------- # webpack脚手架配置 ├── package.json ------------------------- # 项目配置文件【网站编译生成的注释信息可以在此修改】 ├── package-lock.json ├── dist/ │ ├── css/ │ │ ├── uix-kit.css ------------------ # 网站核心样式（已编译） │ │ ├── uix-kit.css.map │ │ ├── uix-kit.min.css -------------- # 网站核心样式压缩版，默认产品调用（已编译） │ │ ├── uix-kit.min.css.map │ │ ├── uix-kit-rtl.css ------------- # 网站核心RTL样式（已编译） │ │ ├── uix-kit-rtl.css.map │ │ ├── uix-kit-rtl.min.css --------- # 网站核心RTL样式压缩版，默认产品调用（已编译） │ │ └── 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/ ----------------------------- # PSD版本网格系统，辅助UI设计 ├── src/ │ ├── components/ │ │ ├── ES5/ ------------------------- # 第三方插件(直接合并，不经过ES6的编译) │ │ ├── ES6/_global ------------------- # 网站通用代码模块 │ │ ├── ES6/_main -------------------- # 网站定制化文件目录【用于二次开发或者新网站开发。网站新的HTML模板和其它样式脚本可以直接放到此文件夹】 │ │ └── ES6/ ------------------------- # 网站通用功能模块【一般不需要去修改它们，可以根据情况修改其样式和脚本】 ├── examples/ │ ├── *.html --------------------------- # 编译后的纯HTML模板，用于后端整合或者演示 │ └── assets/ -------------------------- # 静态资源目录 │ │ ├── css/ │ │ ├── fonts/ │ │ ├── images/ │ │ ├── videos/ │ │ ├── models/ │ │ ├── json/ │ │ └── js/ └──
开发者基本操作:
配置你电脑的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-kitStep 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下面是截图和介绍图（英文版），欢迎咂钻：）
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文名称：一款有趣的响应式网站开发工具箱-UixKit-创新互联
本文链接：http://myzitong.com/article/dhipod.html