Skip to content

Commit

Permalink
update: version
Browse files Browse the repository at this point in the history
  • Loading branch information
@woshi82
woshi82 committed May 4, 2017
1 parent fbaf3dd commit e5be44e
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 67 deletions.
228 changes: 162 additions & 66 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,47 @@
# olo

基于`scrat`及类似框架开发的一个自动化前端工程流的框架。通过`olo`能够一键初始化并快速开发web端项目、基于node服务端渲染的项目、vue项目。并且是组件化的方式进行开发，特别有利于团队合作开发。生成的项目还提供服务、热加载功能、生产环境、优化产出环境。
olo 是一个前端自动化工程流框架。

通过 olo 能够一键初始化并快速开发web端项目、基于node服务端渲染的项目、vue项目。整个框架项目是以组件化的方式进行开发，提供服务、热加载功能、生产环境、优化产出环境。有利于团队合作开发。olo 中采用的构建工具是fis3、webpack,可以根据项目需要进行选择。

olo里面包括**seo**、**seo-php**、**vue**模式。

#### seo、seo-php

1. _共同点_：都是具有PC端SEO优化的工作流程。都采用了node服务，通过fis3进行资源定位及优化。

2. _区别_：

a. **seo-php**用的是generator-biketo的开发流程，模版渲染部分由PHP负责。最后产出在后台的服务上运行项目。

b. **seo**采用了node服务，以handlebars为模版引擎，实现了页面的自动路由功能。最后产出在node服务上运行。是一种前后端分离的开发模式。

#### vue

vue模式下提供fis3、webpack2两种构建工具，其中webpack2对es6的编译速度相比于fis3会快一些。

olo里面包括**seo**、**seo-php**、**vue**模式。
> _共同点_：都是具有PC端SEO优化的工作流程。都采用了node服务，通过fis3进行资源定位及优化。
> _区别_：
**seo-php**用的是generator-biketo的开发流程，模版渲染部分由PHP负责。最后产出在后台的服务上运行项目。
**seo**采用了node服务，以handlebars为模版引擎，实现了页面的自动路由功能。最后产出在node服务上运行。是一种前后端分离的开发模式。


## 安装

通过npm进行安装

npm i olo -g


## 基本命令
> 所有命令的参数都可以通过`olo ** -h`查看

> 所有命令的参数都可以通过`olo -h`、`olo ** -h`查看。
#### 初始化
```javascript
olo init
olo init -c // 初始化项目的时候同时清楚本地缓存模版
olo init -c // 初始化项目的时候从远端拉取所选择的模版，清除本地缓存模版
```
> 初始化项目后，项目启动、监听、产出的脚本命令在 `package.json` 中的 script 中。
#### 生成视图

```javascript
olo v view-name
```
Expand All @@ -31,7 +52,9 @@ olo v view-name
olo install component-name
#### 增加第三方包
olo f lib-name
> olo f jq ｜ jquery | ejs | throttle | zepto
> 现在olo中有的第三方包有 jquery、ejs、throttle、zepto,运行命令后会将相应的第三方包存放在项目libs文件夹下。
>
> 可以运行这些命令： olo f jq ｜ jquery | ejs | throttle | zepto
#### 监听项目
olo w
Expand All @@ -41,7 +64,10 @@ olo v view-name
olo s
#### 发布
olo r


## 新建项目

```
mkdir my-project
cd my-project
Expand All @@ -51,35 +77,39 @@ olo v view-name
olo s (或者) npm start
olo w (或者) npm run watch
```
#### 一. seo


## 模式说明

### 一. seo

##### 1. 目录结构

```
|---- assets # 静态文件目录
|---- images # 图片文件
|---- scss # 通用样式文件
|---- components/ # 页面组件文件
|---- views/ # 前端页面渲染
|---- libs/ # 前端辅助类或工具类文件
|---- common.js # 在此文件引入的第三方插件不会模块化（例：jquery），项目中可以直接用($)
|---- statistics.js #统计数据，放在html的最后。
|---- mock/ # 模拟数据文件
|---- routes/ # Node路由
|---- _conf.json # 路由配置文件
|---- init.js # 路由派发规则解析文件
|---- controllers/ # 前端页面渲染路由文件
|---- service/ # 前端接口路由文件
|---- middleware/ # 路由中间件
|---- utils/ # 后端辅助类或工具类文件
|---- app.js # 系统启动文件
|---- config.json # 系统环境配置文件
|---- fis-conf.js # fis3 配置文件
|---- pm2.json # pm2 配置文件
|---- package.json # 管理项⽬的依赖
|---- .editorconfig # ediforconfig 代码书写配置文件
|---- .eslintrc # eslint 代码规范性检查配置文件
|---- .gitignore # git 仓库文件忽略配置
|-- assets # 静态文件目录
|-- images # 图片文件
|-- scss # 通用样式文件
|-- components/ # 页面组件文件
|-- views/ # 前端页面渲染
|-- libs/ # 前端辅助类或工具类文件
|-- common.js # 在此文件引入的第三方插件不会模块化（例：jquery），项目中可以直接用($)
|-- statistics.js #统计数据，放在html的最后。
|-- mock/ # 模拟数据文件
|-- routes/ # Node路由
|-- _conf.json # 路由配置文件
|-- init.js # 路由派发规则解析文件
|-- controllers/ # 前端页面渲染路由文件
|-- service/ # 前端接口路由文件
|-- middleware/ # 路由中间件
|-- utils/ # 后端辅助类或工具类文件
|-- app.js # 系统启动文件
|-- config.json # 系统环境配置文件
|-- fis-conf.js # fis3 配置文件
|-- pm2.json # pm2 配置文件
|-- package.json # 管理项⽬的依赖
|-- .editorconfig # ediforconfig 代码书写配置文件
|-- .eslintrc # eslint 代码规范性检查配置文件
|-- .gitignore # git 仓库文件忽略配置
```
##### 2. 数据模拟
mock数据功能内嵌在node服务中，功能用法和fis文档上说明的一样。[http://fis.baidu.com/fis3/docs/node-mock.html][1]
Expand All @@ -105,20 +135,21 @@ module.exports = {
二级路由/三级路由: 接口名称
二级路由:{
三级路由:接口名称
```
}
}
(或)
一级路由/二级路由: 接口名称
一级路由/二级路由/```: 接口名称

路由函数名|一级路由:接口名称
```
>*1、一级路由默认对应‘路由函数名称’，即：所有路由对应`一级路由.js`的路由函数。*
>*2、如果需要自定义路由函数可以借助分隔符`|`,即：`路由函数名|一级路由`。*
>*3、controllers中路由方式默认是GET。*
>1、一级路由默认对应‘路由函数名称’，即：所有路由对应`一级路由.js`的路由函数。
>2、如果需要自定义路由函数可以借助分隔符`|`,即：`路由函数名|一级路由`。
>3、controllers中路由方式默认是GET。
​```javascript
```
"controllers": {
"root": "../controllers",
"map":{
Expand Down Expand Up @@ -155,9 +186,9 @@ module.exports = {

一级路由:［请求方式，接口名称］
```
>*1、一级路由默认对应‘路由函数名称’，即：所有路由对应`一级路由.js`的路由函数。*
>*2、如果需要自定义路由函数可以借助分隔符`|`,即：`路由函数名|一级路由`。*
>*3、service中路由方式默认是POST,如果需要get方式，可用：`［"get","接口名"］`。*
> 1、一级路由默认对应‘路由函数名称’，即：所有路由对应`一级路由.js`的路由函数。
> 2、如果需要自定义路由函数可以借助分隔符`|`,即：`路由函数名|一级路由`。
> 3、service中路由方式默认是POST,如果需要get方式，可用：`［"get","接口名"］`。
```javascript
"service": {
Expand All @@ -175,46 +206,111 @@ module.exports = {
##### 目录结构
```
|---- assets # 静态文件目录
|---- images # 图片文件
|---- scss # 通用样式文件
|---- components/ # 页面组件文件
|---- views/ # 前端页面渲染
|---- libs/ # 前端辅助类或工具类文件
|---- common.js # 在此文件引入的第三方插件不会模块化（例：jquery），项目中可以直接用($)
|---- statistics.js #统计数据，放在html的最后。
|---- mock/ # 模拟数据文件
|---- controllers/ # 前端页面渲染路由文件
|---- service/ # 前端接口路由文件
|---- utils/ # 后端辅助类或工具类文件
|---- app.js # 系统启动文件
|---- config.json # 系统环境配置文件
|---- fis-conf.js # fis3 配置文件
|---- package.json # 管理项⽬的依赖
|---- .editorconfig # ediforconfig 代码书写配置文件
|---- .eslintrc # eslint 代码规范性检查配置文件
|---- .gitignore # git 仓库文件忽略配置
|-- assets # 静态文件目录
|-- images # 图片文件
|-- scss # 通用样式文件
|-- components/ # 页面组件文件
|-- views/ # 前端页面渲染
|-- libs/ # 前端辅助类或工具类文件
|-- common.js # 在此文件引入的第三方插件不会模块化（例：jquery），项目中可以直接用($)
|-- statistics.js #统计数据，放在html的最后。
|-- mock/ # 模拟数据文件
|-- controllers/ # 前端页面渲染路由文件
|-- service/ # 前端接口路由文件
|-- utils/ # 后端辅助类或工具类文件
|-- app.js # 系统启动文件
|-- config.json # 系统环境配置文件
|-- fis-conf.js # fis3 配置文件
|-- package.json # 管理项⽬的依赖
|-- .editorconfig # ediforconfig 代码书写配置文件
|-- .eslintrc # eslint 代码规范性检查配置文件
|-- .gitignore # git 仓库文件忽略配置
```
##### 注意事项
1. `{{#if dev}}`*handlebars*语法区分纯前端开发和后台模板开发；

2. `{{> cmp}}`引入组件；

3. 可以自行加入`helper`并在 _conf.js_ 中的 *handlebars* 配置项中配置；

​


#### 三. vue
### 三. vue

快速初始化 vue 项目框架， 加入了 **vuex** 进行数据管理。这个模块提供了两种构建工具 **fis3**、**webpack 2**， 可根据编码习惯进行选择。两种构建工具都加入了 **es6** 编译，只是**webpack 2** 编译速度更快。

#### vue-webpack

目录结构

```
|-- assets # 静态文件目录
|-- images # 图片文件
|-- scss # 通用样式文件
|-- build/ # webpack2 编译配置
|-- config/ # 项目配置
|-- components/ # 页面组件文件
|-- component/
|-- page/
|-- main.js # 页面入口文件
|-- libs/ # 前端辅助类或工具类文件
|-- flexible.js
|-- mock/ # 模拟数据文件
|-- service/ # 前端接口路由文件
|-- index.hbs # 页面入口
|-- package.json # 管理项⽬的依赖
|-- .bowerrc
|-- .editorconfig # ediforconfig 代码书写配置文件
|-- .eslintrc # eslint 代码规范性检查配置文件
|-- .eslintignore
|-- .gitignore # git 仓库文件忽略配置
```

#### vue-fis3
这个模式采用的是fis3进行构建

目录结构

```
|-- assets # 静态文件目录
|-- images # 图片文件
|-- scss # 通用样式文件
|-- components/ # 页面组件文件
|-- component/
|-- page/
|-- main.js # 页面入口文件
|-- libs/ # 前端辅助类或工具类文件
|-- flexible.js
|-- mock/ # 模拟数据文件
|-- store/ # vuex文件
|-- modules/
|-- commonHandlers.js
|-- mutation-types.js
|-- index.js # vuex入口文件
|-- index.html # 页面入口
|-- config.json # 系统环境配置文件
|-- package.json # 管理项⽬的依赖
|-- fis-conf.js # fis3 配置文件
|-- .bowerrc
|-- .editorconfig # ediforconfig 代码书写配置文件
|-- .eslintrc # eslint 代码规范性检查配置文件
|-- .eslintignore
|-- .gitignore # git 仓库文件忽略配置
```




## 更新
**v3.1.0**
**v3.1.1**
1. `vue-webpack模式`relative path、 source map 、free config

1. 添加`vue模式` **webpack 2** 构建
**v3.1.0**
1. 添加`vue-webpack模式` 构建
2. 修复其它模块的BUG

**v3.0.0**

1. 添加`vue模式`工程流
2. olo模版`本地直接拷贝`方式改成`远程获取并缓存`
3. 添加`olo init -c`清楚模版缓存初始化项目
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "olo",
"version": "3.1.0",
"version": "3.1.1",
"description": "基于fis3、webpack2的前端工程流",
"main": "index.js",
"bin": {
Expand Down

0 comments on commit e5be44e

Please sign in to comment.