脚手架工具

发布者: xiaozhimn

安装说明:

声明:

1. 在开启hello world之前 请确保你的机器上已经安装了 nodejs v6.x 高版本可能有兼容性问题。 
2. mac执行npm命令安装的时候由于权限问题需要在命令前添加sodu命令例如: sudo npm install -gd easyvue
3. 安装过程中如果遇到问题,请在平台的常见问题中寻找答案。
4. 当然你也可以不用npm命令换成 cnpm速度更快。

1. easyspa安装使用说明
2. easyme安装使用说明
3. easyvue安装使用说明

easyspa -angular框架脚手架利器

第一步

npm install -gd easyspa

第二步

1. mac平台:  需要安装dos2unix,安装完成后执行 dos2unix /usr/local/lib/node_modules/easyspa/bin/easyspa
2. window平台: 需要安装gow.exe 下载地址:http://dlc2.pconline.com.cn/filedown_762799_7936482/BijfKrsS/pconline1483996577934.zip
只要保证你的win平台能够执行linux常规命令即可。如果你已经打开了cmd窗口,请关闭掉然后重新打开一个,保证安装的gow.exe可以正常执行linux命令。 

第三步

easyspa -h查看使用命令如下:
    -V, --version               output the version number
    -i,--init                   初始化应用
    -c,--create <string>        添加一个页面
    -r,--remove <string>        删除一个页面
    -a,--addWidget <string>     添加一个widget组件
    -d,--deleteWidget <string>  删除一个widget组件
    -b,--build                  压缩静态文件
    -k,--kick                   删除压缩后的静态文件
    -f,--fragment <string>      创建一个页面的子controller
    -o,--off <string>           删除一个页面的子controller
    组件相关命令                      
    easyspa adduser             添加用户(账号密码是在ue2注册的账号,
                                可以多个最后一次添加的为当前发布者)
    easyspa publish             发布组件
    easyspa install             组件名称 安装组件
    easyspa show all            显示所有上传的组件列表
    easyspa 组件名称 -v          查看组件的历史版本
    easyspa user                查看当前发布者的用户账号
    easyspa users               查看添加的所有用户列表

第四步 完成一个简单的hello world demo
easyspa -i

执行这个命令后,会在你当前的目录下面初始化一个空的angular应用,目录结构已经创建完毕,只需要填充内容即可。

easyspa -c test

执行这个命令后,会在languages目录下面创建config.json中指定的国际化语音包,在public/pages/test目录下面创建页面所需的静态资源,同时自动添加了更新angular的路由文件 public/common/routeConfig.json

将public/pages/test/test.html中修改如下:

<div>
    hello angular!
</div>

运行hello world

在运行之前请确保您本地安装了apache,wamp等服务器之一并开启php模块要求php版本为5.6及以上,将服务器的documentRoot指向hello world项目的根目录下,在浏览器中输入 http://localhost/#/test即可访问.

easyspa -b

将应用进行打包,会在对应的目录下面生成一个minify的目录,public/common/cacheConfig.js中 isUseCache=false改为isUseCache=true,即可使用压缩后的文件,线上环境isUseCache=true,生产环境isUseCache=false方便调试。

easyspa -r test

删除test页面以及相关的所有依赖

easyspa adduser

按照提示输入ue2平台注册的用户名密码。

easyspa publish

跳转到组件目录中,并且修改package.json文件,执行以上命令发布组件到云端仓库

easyspa install 组件名称

跳转到应用根目录后执行以上命令可以将云仓库中的组件安装到本地,安装的路径为package.json中指定的installPath路径

easyspa install 组件名称 安装路径

跳转到应用根目录后执行以上命令可以将云仓库中的组件安装到本地,安装的路径为命令行中用户指定的路径

easyme -react框架脚手架利器

第一步

npm install -gd easyme

第二步

1. mac平台: 需要安装dos2unix,安装完成后执行 dos2unix /usr/local/lib/node_modules/easyme/bin/easyme
2. window平台: 需要安装gow.exe,下载地址:http://dlc2.pconline.com.cn/filedown_762799_7936482/BijfKrsS/pconline1483996577934.zip,只要保证你的win平台能够执行linux常规命令即可。 如果你已经打开了cmd窗口,请关闭掉然后重新打开一个,保证安装的gow.exe可以正常执行linux命令

第三步

easyme -h查看使用命令如下:
    -V, --version               output the version number
    -i,--init                   init app
    -c,--create <string>        创建一个页面
    -r,--remove <string>        删除一个页面
    -a,--addWidget <string>     添加一个widget组件
    -d,--deleteWidget <string>  删除一个widget组件
    -f,--fragment <string>      添加一个公共组件
    -k,--kickFragment <string>  删除一个公共组件
    -p,--component <string>     创建一个页面的业务子组件
    -o,--outComponent <string>  删除一个页面的业务子组件
    -w,--watch                  热启动服务器
    -t,--trace                  以debug模式启动服务器
    组件相关命令                   
    easyme adduser              添加用户(账号密码是在ue2注册的账号,
                                可以多个最后一次添加的为当前发布者)
    easyme publish              发布组件
    easyme install              组件名称 安装组件
    easyme show all             显示所有上传的组件列表
    easyme 组件名称 -v           查看组件的历史版本
    easyme user                 查看当前发布者的用户账号
    easyme users                查看添加的所有用户列表

第四步 完成一个简单的hello world demo
easyme -i

执行这个命令后,会在你当前的目录下面初始化一个空的reactjs应用,目录结构已经创建完毕,只需要填充内容即可。

npm install

安装package.json中项目依赖包

easyme -c test

执行这个命令后,会在public/javascripts和public/stylesheets下面增加一个页面相关的前端资源文件,同时在routes目录下面增加了一个test目录,这个目录为node相关的代码并且更新routes/watch.json文件来增加一个路由配置项。

将views/tpl/test/init.html中修改如下:

<div>
    hello react!
</div>

easyme -w

在应用根目录下执行以上命令直接启动服务器,并自动检测文件的修改从而可以自动重启服务。 在浏览器中输入http://localhost:8006即可查看运行结果

easyme -r test

删除test页面以及相关的所有依赖

easyme adduser

按照提示输入ue2平台注册的用户名密码。

easyme publish

跳转到组件目录中,并且修改package.json文件,执行以上命令发布组件到云端仓库

easyme install 组件名称

跳转到应用根目录后执行以上命令可以将云仓库中的组件安装到本地,安装的路径为package.json中指定的installPath路径

easyme install 组件名称 安装路径

跳转到应用根目录后执行以上命令可以将云仓库中的组件安装到本地,安装的路径为命令行中用户指定的路径

easyvue -vuejs框架脚手架利器

第一步

npm install -gd easyvue

第二步

1. mac平台: 需要安装dos2unix,安装完成后执行 dos2unix /usr/local/lib/node_modules/easyvue/bin/easyvue
2. window平台: 需要安装gow.exe,下载地址:http://dlc2.pconline.com.cn/filedown_762799_7936482/BijfKrsS/pconline1483996577934.zip,只要保证你的win平台能够执行linux常规命令即可。如果你已经打开了cmd窗口,请关闭掉然后重新打开一个,保证安装的gow.exe可以正常执行linux命令

第三步

easyvue -h查看使用命令如下:
    -V, --version               output the version number
    -i,--init                   初始化应用, 带应用类型参数 spa 表示为单页面应用例如 easyvue -i spa初始化一个 
                                单页应用
    -c,--create <string>        创建一个单页面
    -r,--remove <string>        删除一个单页面
    -a,--addWidget <string>     添加一个widget组件
    -d,--deleteWidget <string>  删除一个widget组件
    -p, --product <string>      添加页面中的一个vue组件
    -k, --kick <string>         删除一个页面中的vue组件
    -w,--watch                  启动服务器应用
    -b,--build                  打包压缩静态资源
    -s,--strike                 删除已经压缩的静态资源
    组件相关命令                      
    easyvue adduser             添加用户(账号密码是在ue2注册的账号,可以多个最后一次添加的为当前发布者)
    easyvue publish             发布组件
    easyvue install             组件名称 安装组件
    easyvue show all            显示所有上传的组件列表
    easyvue 组件名称 -v          查看组件的历史版本
    easyvue user                查看当前发布者的用户账号
    easyvue users               查看添加的所有用户列表

第四步 以非spa应用为例完成一个简单的hello world demo
easyvue -i

执行这个命令后,会在你当前的目录下面初始化一个空的vuejs应用,目录结构已经创建完毕,只需要填充内容即可。

npm install

安装package.json中项目依赖包

easyvue -c test

执行这个命令后,会在public/pages下面增加一个页面相关的前端资源文件,同时在routes目录下面增加了一个test目录,这个目录为node相关的代码并且更新routes/watch.json文件来增加一个路由配置项。

easyvue -p test/banner

执行这个命令后,会在public/pages/components/test目录下面创建一个test页面内部的vue组件零部件。

将public/pages/test/test.html中修改如下:

<div>
    hello world!
</div>

在public/pages/test/test.js文件中use对banner组件的依赖

use([
    'public/pages/test/store.js',
    'public/pages/test/testService.js',
    'public/pages/components/test/banner/banner.js'
], function() {
    function init(storage, store) {
        var app = new VueRoot({
            template: 'public/pages/test/test.html',
            data: storage,
            store: store,
            created: function() {},
            mounted: function() {

            },
            methods: {

            }
        });
        return app;
    }
    module.exports = init;
    if(typeof window != 'undefined') {
        var mainComponent = init(storage, store);
        mainComponent.$mount('#app');
    }
});

在public/pages/test/test.html文件中加入

<template>
   <div id='content-box'>
       <bannerComponent></bannerComponent>
   </div>
</template>
注意对组件的引入要包在template标签下面 id='content-box'为渲染的主容器。

easyvue -w

在应用根目录下执行以上命令直接启动服务器。 在浏览器中输入http://localhost:8006即可查看运行结果

easyvue -b

将应用进行打包,会在对应的目录下面生成一个minify的目录,将根目录下面的config.json中 isUseGlobalCache: false,
改为isUseGlobalCache: true,即可使用压缩后的文件,线上环境isUseGlobalCache: true,生产环境isUseGlobalCache: false方便调试。

easyvue -r test

删除test页面以及相关的所有依赖

easyvue adduser

按照提示输入ue2平台注册的用户名密码。

easyvue publish

跳转到组件目录中,并且修改package.json文件,执行以上命令发布组件到云端仓库

easyvue install 组件名称

跳转到应用根目录后执行以上命令可以将云仓库中的组件安装到本地,安装的路径为package.json中指定的installPath路径

easyvue install 组件名称 安装路径

跳转到应用根目录后执行以上命令可以将云仓库中的组件安装到本地,安装的路径为命令行中用户指定的路径
0赞

简单.就好

fsfs

时间:11/22/2018, 9:49:55 AM

回复