Xinui NPM | npm.io

uxinui

版本：1.0.0

配置环境

安装node.js

node.js的下载地址请点击这里;

在Windows系统中安装node.js：

下载Windows版本的msi文件后，双击文件安装。安装完成后，默认的安装路径为C:/Program Files/nodesjs目录。

按Win+R在运行窗口输入cmd，点确定打开 CMD命令提示符界面，在CMD窗口中输入 node -v，显示出安装的版本号表示安装成功。

如果提示无效命令，选中“计算机”->右键->“属性”->“高级系统设置”->“环境变量”->“系统变量”，找到PATH变量并双击，在后面添加 ;C:/Program Files/nodesjs 。记得在前面加上分号，与前面的路径分隔。点“确定”按钮保存配置重新在CMD窗口中输入 node -v。显示出安装的版本号，安装成功。

参考这里;

在Centos系统中安装node.js：

首先在官网下载Source code；

使用以下命令解压源文件：

tar zxvf node-v0.10.28.tar.gz
cd node-v0.10.28
./configure
make && make install

安装完成后，执行：

node -v

能显示出版本号表示安装成功。

在MAC系统中安装node.js：

在官网下载MAC版本的.pkg文件，下载之后点安装即可。

安装成功后关闭窗口，打开“终端”并输入命令：

curl http://npmjs.org/install.sh | sh

这个npm.js实际上是node.js的套件管理工具，执行完成后我们继续执行下面的命令：

sudo npm update npm -g

这一步是更新npm到最新版本，完成之后输入以下命令，打印出版本号表示安装成功。

npm -v

参考这里;

安装

初始化package.json文件，假如项目根目录下已经存在此文件，则不需要执行此步骤。

npm init --y

安装fe-uxin组件

npm install fe-uxin --save

初始化

初始化项目配置，执行以下命令：

./node_modules/.bin/fe-uxin init --phpframework=ci --static='public'

./node_modules/.bin/fe-uxin：要执行的文件；

init：要执行的动作；

--phpframework：指定项目使用的php模板，用来指定默认的html页面存放目录；目前包含两个值ci | laravel

--static：项目静态资源存放目录如果想要手动指定html页面存放路径，使用--html参数：

./node_modules/.bin/fe-uxin init --html='application/views/assets/' --static='public'

--html：手动指定静态资源存放目录，当指定--html时，--phpframework参数无效；

需要使用前端UI组件使用–uxinui参数：

./node_modules/.bin/fe-uxin init --html='application/views/assets/' --static='public' --uxinui=true --username='用户名' --password='密码'

--uxinui：指定--uxinui=true时，程序会自动将UI库文件拉取到–static指定的目录，上面的命令是将UI库文件保存在/public/uxinui/目录中；

--username：当--uxinui=true时，此参数为必填项，拉取UI组件时，需要指定域账户；

--password：当--uxinui=true时，此参数为必填项，拉取UI组件时，需要指定域账户；

更新

UI库存在更新时，将代码更新到最新版本：

./node_modules/.bin/fe-uxin update --uxinui=true  --username='用户名' --password='密码'

更新UI库时，会默认把旧的文件备份到跟组件库同级的.bak目录中，如果不想备份旧的文件，可以添加--bak=false参数；

./node_modules/.bin/fe-uxin update --uxinui=true  --username='用户名' --password='密码' --bak=false

--bak：当不设置此参数或--bak=true时，备份旧文件。否则不备份旧文件，直接删除。

发布

合并页面css引用的html结构：

<!-- build:css {#XIN_CDN_HTTP_DOMAIN#}/uxinui/uxinui.css -->
<link rel="stylesheet" href="{#XIN_CDN_HTTP_DOMAIN#}/uxinui/css/lib/alike.css"/>
<link rel="stylesheet" href="{#XIN_CDN_HTTP_DOMAIN#}/uxinui/css/lib/swiper.css"/>
<!-- endbuild -->

合并页面js引用的html结构：

<!-- build:js {#XIN_CDN_HTTP_DOMAIN#}/uxinui/uxinui.js -->
<script src="{#XIN_CDN_HTTP_DOMAIN#}/uxinui/js/m/lib/zepto.js"></script>
<script src="{#XIN_CDN_HTTP_DOMAIN#}/uxinui/js/m/lib/swiper.js"></script>
<script src="{#XIN_CDN_HTTP_DOMAIN#}/uxinui/js/m/lazy.js"></script>
<script src="{#XIN_CDN_HTTP_DOMAIN#}/uxinui/js/m/tabs.js"></script>
<!-- endbuild -->

用户提交代码后，执行此命令对本地静态资源进行合并、压缩、混淆、加密过程，并将生成后的静态资源生成到/imgs.xin.com目录中。