第一章 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等目錄

[email protected]:~/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