1.开始

设置Node_Global：npm config set prefix "C:\Program Files\nodejs"

Express组件：npm install express -g（全局安装）

Express-Generator：npm install express-generator -g（全局安装）

如果没有设置global可能导致express命令在cmd里面无法执行

我接触过3个模版jade,ejs,swig，最后选择了swig

jade ：是express的默认View模版，jade的功能强大（模版继承、判断、循环、变量等）,然而风格我忍不了，放出来感受一下；

extends layout

block content

  h1= title

  p Welcome to #{title}

ejs ： 看起来像是html了，风格我喜欢，但是里面把模版要素和js混用看着很纠结，如果写到后面很难维护 ，最重要的是功能没有jade那么多，弃用原因2是不支持模版继承；

<% if (names.length) { %>

  <ul>

    <% names.forEach(function(name){ %>

      <li foo='<%= name + "'" %>'><%= name %></li>

    <% }) %>

  </ul>

<% } %>

swig ：缺点是搜索结果比ejs、jade少很多，然而支持继承，功能比ejs强大，又是html风格的，没有和js混用的缺点，棒棒哒；

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>{% block title %}My Site{% endblock %}</title>

  {% block head %}

  <link rel="stylesheet" href="main.css">

  {% endblock %}

</head>

<body>

  {% block content %}{% endblock %}

</body>

</html> 


 注：上表Swig最强参考 http://paularmstrong.github.io/node-templates/

2.改造Express默认模版使用swig作为ViewEngine

 打开CMD使用命令新建一个Express Example

$ cd D:\Libraries\Documents\Visual Studio Code

$ express myapp

create : myapp

create : myapp/package.json

......

install dependencies:

> cd myapp && npm install

run the app:

> SET DEBUG=myapp:* & npm start

修改package.json文件，将jade替换为swig

修改app.js将jade viewengine替换为swig viewengine

修改后：swig ViewEngine

var express = require('express');

var path = require('path');

var favicon = require('serve-favicon');

var logger = require('morgan');

var cookieParser = require('cookie-parser');

var bodyParser = require('body-parser');

//add swig required

var swig = require('swig');

var routes = require('./routes/index');

var users = require('./routes/users');

var app = express();

// view engine setup -swig

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'tpl');

app.engine('tpl', swig.renderFile);

修改view/layout.jade ，更名为view/layout.tpl

修改后layout.html

<!DOCTYPE html>

<html>

<head>

    <title>{% block title %} {% endblock %}</title>

    <link rel="stylesheet" href="/stylesheets/style.css">

</head>

<body>

    {% block content %} {% endblock %}

</body>

</html>

修改view/index.jade，更名为view/index.tpl

修改后index.tpl

{% extends 'layout.tpl' %}

{% block title %}{{ title }}{% endblock %}

{% block content %}

    <h1>{{ title }}</h1>

    <p>Welcome to {{ title }}</p>

{% endblock %}

修改view/error.jade，更名为view/error.tpl

修改后error.tpl

{% extends 'layout.tpl' %}

{% block title %}{% endblock %}

{% block content %}

  <div class="container">

    <h1>{{ message }}</h1>

    <h2>{{ error.status }}</h2>

    <pre>{{ error.stack }}</pre>

  </div>

{% endblock %}

修改routes/index.js

var express = require('express');

var router = express.Router();

/* GET home page. */

router.get('/', function(req, res, next) {

  res.render('index', { title: 'Swig Express' });

});

module.exports = router;

修改完成，打开CMD运行项目

$ npm install

swig@1.4.2 node_modules\swig

├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10)

└── uglify-js@2.4.24 (uglify-to-browserify@1.0.2, async@0.2.10, yargs@3.5.4, source-map@0.1.34)

$ npm start

> myapp@0.0.0 start d:\Libraries\Documents\Visual Studio Code\myapp

> node ./bin/www

源代码：https://github.com/Mengkzhaoyun/nodepractise

目录：01.Swig

Nodejs in Visual Studio Code 04.Swig模版的更多相关文章

  1. crossplaform---Nodejs in Visual Studio Code 04.Swig模版

    1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install e ...

  2. Nodejs in Visual Studio Code 05.Swig+Bootstrap

    1. 开始 准备好Express+Swig的练习代码:https://github.com/Mengkzhaoyun/nodepractise 准备好AdminLTE后台管理模版:https://ww ...

  3. Nodejs in Visual Studio Code 11.前端工程优化

    1.开始 随着互联网技术的发展,企业应用里到处都是B/S设计,我有幸经历了很多项目有Asp.Net的,有Html/js的,有Silverlight的,有Flex的.很遗憾这些项目很少关注前端优化的问题 ...

  4. Nodejs in Visual Studio Code 10.IISNode

    1.开始 Nodejs in Visual Studio Code 08.IIS : http://www.cnblogs.com/mengkzhaoyun/p/5410185.html 参考此篇内容 ...

  5. Nodejs in Visual Studio Code 14.IISNode与IIS7.x

    1.开始 部署IISNode环境请参考:Nodejs in Visual Studio Code 08.IIS 部署Nodejs程序请参考:Nodejs in Visual Studio Code 1 ...

  6. Nodejs in Visual Studio Code 01.简单介绍Nodejs

    1.开始 作者自己:开发人员,Asp.Net , html / js , restful , memcached , oracle ,windows , iis 目标读者:供自己以后回顾 2.我看No ...

  7. crossplatform---Nodejs in Visual Studio Code 05.Swig+Bootstrap

    1. 开始 准备好Express+Swig的练习代码:https://github.com/Mengkzhaoyun/nodepractise 准备好AdminLTE后台管理模版:https://ww ...

  8. Nodejs in Visual Studio Code 07.学习Oracle

    1.开始 Node.js:https://nodejs.org OracleDB: https://github.com/oracle/node-oracledb/blob/master/INSTAL ...

  9. Nodejs in Visual Studio Code 08.IIS

    1.开始 本文部分内容均转载自文章: http://www.hanselman.com/blog/InstallingAndRunningNodejsApplicationsWithinIISOnWi ...

随机推荐

  1. Meth | phpstorm invalid descendent file name

     Failed to collect files: Invalid descendent file name "codelog_ddz.\"(]))\",\').txt& ...

  2. 使用ssh对服务器进行登录

    一.什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录. 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会 ...

  3. git 的记住用户名和密码和一些常用

    git config --global core.autocrlf falsegit config --global color.ui truegit config --global credenti ...

  4. 从一个SVN下载的导入另一个SVN里面

    如果项目是你从个一个SVN下载的,你想存入另一个SVN里面 那么问题来了 你用eclipse的team的时候会发现没有Team share 这个选项,那么就等于是没有上传的选项了 解决办法,把项目删掉 ...

  5. Struts1 中实现Action跳转地址栏变化的方法

    Action进行跳转,有时候地址栏不变化,如果重复刷新就会重复提交, 这里一般需要进行重定向: 1.在xml里面进行配置 <action path="/checkCdconfirmEn ...

  6. sqlserver2008附加数据库——错误3415

    权限问题, 在其文件,右击属性>安全>编辑>添加>加一个everyone单击确定>其完全控制, 这样给每个用户权限 ---来自凌波小屋----冯和超笔记-----

  7. 卸载mysql时，如何卸载干净！

    相信很多朋友在使用mysql的过程中都会遇到这样的问题,安装过程出错,或者想要换个版本,或者不想使用了,这个时候我们都需要完全卸载mysql呢?下面,就来谈一谈我的经验. 1.控制面板——>所有 ...

  8. cocos2dx 3.2中的物理引擎初探(一)

    cocos2dx在设计之初就集成了两套物理引擎,它们是box2d和chipmunk.我目前使用的是最新版的cocos2dx 3.2.引擎中默认使用的是chipmunk,如果想要改使用box2d的话,需 ...

  9. 13_FCITX输入法安装及问题排查解决

    使用linux最沮丧的事情莫过于中文输入法切换不出来,甚至有人错误地认为,要使用中文输入法,必须把“区域和语言”(Region & Language)设置为中国-中文.输入法只是一个软件,和区 ...

  10. jquery 工作空间注册

    在一些面向对象的语言中有命名空间的概念,好处就是把不同的类放在不同的文件夹下面,这样就不会发生命名冲突,当然命名空间还有其他的作用. 在这里我们讨论的是在JS中怎么使用命名空间.当然JS并没有提供原生 ...