第一章 YUI3开发环境搭建

基本环境搭建

 

作者是在Ubuntu的环境下开始学习YUI的，YUI3一般和NodeJs等环境整合在一起，开发时对网络的依赖较强烈。所以建议在网络环境良好，并可配置本地代理的机器上学习开发，避免因为依赖包下载不下来而降低学习兴趣。

 

1.1 NodeJs环境搭建

Ubuntu ：sudo apt-get install nodejs

 

1.2 npm环境搭建

Ubuntu： sudo apt-get install npm

 

1.3 express环境搭建

express为NodeJs的一套web框架，整合了url router/err handle/basic utils等一些列功能

>> npm install-g express

 

1.3.1 express-generator安装

express-generator为express项目骨架生成器，可以帮助生成一个基本的项目骨架和初始化一些骨架代码，极大的加快web开发进程。

>> npm install -g express-generator

 

1.4 初始配置 npm package

 

>> npm init

会有一个配置向导，提示当前工程使用的名称/版本号/git仓库地址等，依赖关系元数据需要单独配置，

这个操作过程类似于maven生成项目骨架和生成一个初始pom文件一样，也会生成一个package.json的配置文件。

笔者提供一个demo 配置文件，包括接下来要使用的yui3,expres框架和grunt构建工具

{
"name": "yui3_tutorial",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "~4.2.0",
"static-favicon": "~1.0.0",
"morgan": "~1.0.0",
"cookie-parser": "~1.0.1",
"body-parser": "~1.0.0",
"debug": "~0.7.4",
"jade": "~1.3.0"
}
}

 

 

 

 

 

 

 

 

 

1.5 生成初始项目骨架

使用express-generator工具生成项目骨架，包括views/bin/public等目录

xiangkui@xiangkui-pc:~/workspace/my_workspace$ express --css .

destination is not empty, continue?

destination is not empty, continue? (yes or no)

destination is not empty, continue? (yes or no) yes

 

create : .

create : ./package.json

create : ./app.js

create : ./public

create : ./routes

create : ./routes/index.js

create : ./routes/users.js

create : ./views

create : ./views/index.jade

create : ./views/layout.jade

create : ./views/error.jade

create : ./bin

create : ./bin/www

create : ./public/stylesheets

create : ./public/stylesheets/style.css

create : ./public/javascripts

create : ./public/images

 

install dependencies:

$ cd . && npm install

 

run the app:

$ DEBUG=my_workspace ./bin/www

 

 

 

 

 

 

 

1.6启动demo项目

 

>> cd bin && node www

程序在本机监听3000端口，并且启动一个web应用

 

访问 http://localhost:3000端口，即可以访问该应用

 

 

 

参考链接：

 

http://nodejs.org/

 

 

http://expressjs.com/guide.html