blend-cli

blend-cli

版本 @blend/cli 1.5.1.

介绍：

可以实现vue、react项目的自动化搭建；

可以实现基于gulp构建的模块化等多页面项目的搭建；

作者：

陈元广

##查看node版本：

"必须保证node在7.3以上版本"

##下载安装

检查是否安装过blend-cli

    blend -V

###初次安装

    npm install -g blend-cli

###版本更新

使用插件进行更新

####windows 这里采用的是最笨拙有效的方式（windows权限问题很恶心）

1、先找到全局npm和npm-cache(一般都在C:\Users\用户名\AppData\Roaming)

2、删除npm-cache(防止从缓存中读取blend-cli)

3、打开npm文件夹

4、把如下文件删除：blend、vuecli、vuecli-init、reactcli、reactcli-init、mbcli、mbcli-init

5、打开npm/node_modules文件夹：删除blend-cli

6、再次进行全局安装

    npm install -g blend-cli

####mac

1、先找到命令所在的文件夹(一般都在/usr/local/bin/)

2、打开文件夹

3、把如下文件删除：blend、vuecli、vuecli-init、reactcli、reactcli-init、mbcli、mbcli-init

4、打开/usr/local/lib/node_modules文件夹：删除blend-cli

5、再次进行全局安装

    npm install -g blend-cli

##创建项目：

###react项目创建：

####template-name:

1、webpack：自动集成了所有的配置，在创建项目时，以询问的方式进行项目配置

2、normal：可以添加任何一种react模板，不具备创建项目时的询问 ####创建

    reactcli init <template-name> [project-name]
    cd [project-name]
    npm install
    npm start

example：

    reactcli init webpack reactTest
    reactcli init normal reactTest

###vue项目创建：

####template-name:

1、webpack：自动集成了所有的配置，在创建项目时，以询问的方式进行项目配置

2、normal：可以添加任何一种react模板，不具备创建项目时的询问

####创建

    vuecli init <template-name> [project-name]
    cd [project-name]
    npm install
    npm start

example：

    vuecli init webpack vueTest
    vuecli init normal vueTest

###mb项目创建(移动项目)：

####创建

    mbcli init [project-name]
    cd [project-name]
    npm install
    npm start

example：

    mbcli init mbTest

##注：

####template-name为webpack的配置说明：

    name                   项目名称
    description            项目描述
    author                 项目作者
    email                  邮箱
    device                 项目平台
    host                   项目访问地址
    port                   项目端口号
    browerOpen             是否在浏览器中直接打开
    devtool                是否使用webpack的devtool调试代码
    cssType                是否使用sass，less进行css书写
    mock                   是否使用mock进行接口数据的模拟
    esLint                 是否使用esLint
    react-project-type     
    # or
    vue-project-type       使用何种模板创建项目

###使用antd时，在config/config.js的babel：plugin中添加如下配置：

    ["import", { 
        "libraryName": "antd",
        "libraryDirectory": "es", 
        "style": "css" 
    }]

###使用antd-mobile时，在config/config.js的babel：plugin中添加如下配置：

    ["import", {
        libraryName: "antd-mobile",
        style: true,
    }]