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