1.项目目录没有什么好说的，直接创建文件夹便行，dist：自动生成，docs：存放生成文档，config：存放配置文件，controllers：控制路由，models：负责数据交互，web：暂时没用到，tests：存放测试文件


2.编写gulpfile.js先创建文件gulpfile.js，实现编译，监听文件变化自动编译




//安装包npm install -D gulp gulp-babel gulp-watch//编译es6npm install -D babel-plugin-transform-es2015-modules-commonjs babel-core//安装 cross-env 能跨平台地设置及使用环境变量npm install -D  cross-env复制代码



const gulp = require('gulp')const babel = require('gulp-babel')const watch = require('gulp-watch');// 生产环境gulp.task('buliddev', () => {    return watch('./src/nodeuii/**/*.js',//监听src/nodeuii所有的js      { ignoreInitial: false },      () => {         gulp.src('./src/nodeuii/**/*.js')//编译此文件            .pipe(babel({                babelrc: false,                "plugins": ["transform-es2015-modules-commonjs"]            }))            .pipe(gulp.dest('dist'));//输出到dist中    })});let _task = ['buliddev']if(process.env.NODE_ENV == 'production') {    _task = [];}gulp.task('default', _task)复制代码3.编写config>index.js



//安装包 lodashnpm install -s lodash复制代码



import _ from 'lodash'import path from 'path'//静态路径，待会用到let config = {    'viewDir': path.join(__dirname, '../views'),    'staticDir': path.join(__dirname, '../assets')}//初始化，判断开发环境还是生产环境const init = () => {    if(process.env.NODE_ENV == 'development'){        const localConfig = {            port:8081        }        config = _.extend(config, localConfig)    }    if(process.env.NODE_ENV == 'production'){        const localConfig = {            port:80        }        config = _.extend(config, localConfig)    }    return config}const result = init()export default result复制代码4.配置package.json，用supervisor启动node



//安装supervisornpm install -D supervisor复制代码



  "scripts": {    "test": "",    "server:bulid": "gulp",    "start": "pm2 start",    "bulid": "",    "docs": "jsdoc ./src/nodeuii/**/*.js -d ./docs/jsdocs",    "start:dev": "cross-env NODE_ENV=development supervisor ./dist/app.js"  },复制代码5.编写app.js



//先装包npm install -s koa kao-simple-router koa-swig koa-static复制代码



import Koa from 'koa'import router from 'koa-simple-router'import render from 'koa-swig'import serve from 'koa-static'import co from 'co'import config from './config'import controllerInit from './controllers'const app = new Koa()//配置模板路径app.context.render = co.wrap(render({    root:config.viewDir,    autoescape: true,    cache: 'memory',     ext: 'html',    varControls: ["[[","]]"],//更改数据模板样式本来是{{}}    writeBody: false}));controllerInit(app, router)// 配置静态路径app.use(serve(config.staticDir))console.log(config)app.listen(config.port, () => {    console.log(`success listening on ${config.port}`)})复制代码编写controllers里面的index.js IndexController.js index.js
import IndexController from './IndexController'const indexController = new IndexController()//路由的集成中心export default (app, router) => {    app.use(router(_ => {        _.get('/', indexController.indexHome()),        _.get('/', indexController.indexAction())    }))}复制代码IndexController.js
import IndexModel from '../models/IndexModel'class IndexController {    constructor(){}    indexHome(){     return async (ctx, next) => {         ctx.body =  '第一次node server架构， 有点意思'    }   }    indexAction(){        return async (ctx, next) => {            const IndexModelIns = new IndexModel()            const result = await IndexModelIns.getData()            ctx.body =  await ctx.render('index',{                data: result            });        }    }}export default IndexController复制代码编写models里的IndexModel.js/** *@fileOverview 实现Index数据模型 * @author chen *//** *IndexModle类 生成一段异步数据 * @class */export default class IndexModel {    /**     *@constructor     * @example{string} app koa2上下文     */    constructor(app){}    /**     * 获取具体数据api接口     * @return {Promise} 返回异步数据     * @example     * return new Promise     * getData()     */    getData(){        return new Promise((resolve, reject) => {            setTimeout(function () {                resolve('异步数据')            }, 1000)        })    }}复制代码写到这里，大家可以运行一下 npm run start:dev 访问127.0.0.1:8081看一下效果了


如果报错，请自行分析，或者接着往下走：
6.在dist中创建文件夹assets：存放静态文件， views：存放模板文件请看上文app.js配置的文件


css>index.css
:root{    --mainColor:#6B4C99;}body{    background: var(--mainColor);}复制代码js>index.js
console.log(111)复制代码views>index.html
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="/css/index.css"></head><body><div id="app"><h1>[[data]]</h1>有点意思！！！接下来....<input type="text" v-model="data">{{data}}</div></body><script src="/js/index.js"></script><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script><script>  var app = new Vue({    el: '#app',    data: {      data: '有点意思！！！！'    }  })</script></html>复制代码不单只可以使用swig模板，还可以使用vue。
访问http://127.0.0.1:8081/index
7.生成文档



//下载包npm install -D jsdoc复制代码执行npm run docs


打开index.html，文档便生成了





【转载】
作者：eternalless
链接：https://juejin.im/post/5b6d50ddf265da0fa8676f47

赞

奈斯