#thinkleaf

是什么？

thinkleaf是前端工程化开发工具， 功能有

• 本地开发环境【支持前后端分离：本地数据mock、接口代理转发】
• 自动化编译【支持包括js、css的预编译方案：es6、sass...】
• 模块化开发【commonJS，ES6 Modules...】
• 支持基于VUE、React框架开发的工程

特点

• 基于webpack
• 提供的命令简洁，易使用

如何安装

安装之前的准备

nodejs & npm

安装

npm install thinkleaf -g
如果安装失败
sudo npm install thinkleaf -g

安装慢，怎么办？
切换npm源：http://www.tuicool.com/articles/nYjqeu

如果提示相应模块未安装
eg: npm install webpack-hot-middleware

命令介绍

本地开发:
think dev

代理：
think dev -o beta.bm.xxx.com:8150

发布：
think build

使用

进入开发根目录
执行创建项目脚手架命令: think init
执行本地开发环境命令: think dev
在浏览器中访问: http://localhost:3000 【其中端口号根据具体配置】

编译本地开发代码: think build -host
![输入图片说明](https://s.momocdn.com/w/u/img/2017/02/10/1486699017210-think-build-host.png)


编译发布代码命令: think build
![输入图片说明](https://s.momocdn.com/w/u/img/2017/02/10/1486699017215-think-build.png)


约定：
  html文件名{name}.html与入口js文件名{name}_entry.js
  会自动编译{name}_entry.js文件并自动在{name}.html文件中引入

示例项目

问题

babel模块出现问题？
在项目容器目录下安装相应模块
{
  "name": "thinkleaf-extend",
  "version": "1.0.0",
  "description": "前端构建工具",
  "directories": {
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
  },
  "repository": {
  },
  "author": {
    "name": "li.youxi",
    "url": "https://git.oschina.net/Rightli"
  },
  "dependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0"
  }
}

联系我

 qq: 714789620