前言:懶得看前面兩篇介紹的也可以從本節直接參考,但建議最好了解下,因為 4.X 的express 已經把命令行工具分離出來 (鏈接https://github.com/expressjs/generator)
環境:win7
1. 首先 下載安裝 nodeJS , nodejs安裝可能比較簡單一點應該不會遇到什么問題,但鄙人不得不介紹一下npm(Node Package Manager), 它就是Nodejs的包管理器.Nodejs自身提供了基本的模塊,但是在這些基本模塊上開發實際應用需要較多的工作,能夠快速安裝和卸載package,新版nodejs已經集成了npm。下載安裝地址:https://nodejs.org/en/download/。
本人下載版本如下圖:紅圈文件
安裝:一路 Next 即可,可以更改安裝路徑,其余不變(即: 默認下載了 npm)。具體見篇一:Node.js 安裝配置介紹
安裝完成后不要立馬使用 nodeJS 或 npm命令。
2. 使用命令行改變 npm 啟動 和 緩存 位置(可以不更改,若不更改則會占用 C盤 空間):
npm一般都會配置成全局模塊,這樣以防以后使用不方便,一般情況下我們會在NodeJs安裝目錄下下建立"node_global"及"node_cache"兩個文件夾,如下圖:
接着:使用命令行改變npm啟動和緩存位置(此命令以管理員方式或用戶方式都可):
1 npm config set prefix "F:\Program Files\nodejs\node_global" # 啟動文件位置: 使用 npm 命令安裝的 全局模塊 文件存儲位置 2 npm config set cache "F:\Program Files\nodejs\node_cache" # 緩存位置:緩存文件位置
再接着:更改 npm 啟動(即 全局模塊)的環境變量,步驟如下:
1 更改位置: 計算機->屬性->高級系統設置->環境變量->Path 2 3 原來的(nodeJS,npm): 4 C:\Users\UserName\AppData\Roaming\npm # (即 默認的 全局模塊 文件存儲位置,根據以上 npm啟動存儲位置的更改,該部分要變更) 5 G:\Program Files\nodejs #(即:nodeJS 安裝路徑,該路徑不變) 6 7 改為: 8 G:\Program Files\node_global # 改為:自定義的 全局模塊 存儲地址 9 G:\Program Files\nodejs # 不用變更,安裝時自動已識別
3. 安使用 npm 命令安裝模塊,鑒於上篇提到的建立項目時已遇到的問題:
查了許多文檔:
主要原因:The issue is caused by recent changes in express-generator structure: express.js has been renamed to express-cli.js
導致結果:無法使用某些 IDE(eg: webstorm,...) 來創建 nodeJS 項目(如本人)
查閱的主要解決辦法:(1)Try running the command prompt as administrator. (我未實踐成功)
(2)To Fix :Run command prompt as administrator, and create the folder. (已實踐)
1 npm install -g express-generator
2 express project_name 3 cd project_name, npm install 4 in webstorm, File | open, choose project_name folder
(3) 解決方案:
解決法1:在建立項目時,選擇:下載 express-generator@1.14.1以下 或 下載 @1.15.0 ,但 @1.15.0建立項目時,必須選擇 Version:1.14.1 或以下(已親測試成功).
解決法2 :
聲明:(a) 按前面的建議,最好以管理員方式建立使用以下命令。
(b) 對於 3.X,4.X 版本來說,主要是 express 模塊的安裝,對於 4.X 版本來說,要注意首先需 express-generator 的安裝(必須全局安裝),再才能安裝express(可全局也可當前安裝) 及其他模塊,具體如下:
$ npm install -g express-generator # express-generator 必須全局安裝, 安裝指定版本: npm install -g express-generator@3.5.0
$ npm install express --save # express 沒必要全局安裝,但最好 安裝的同時,進行保存,即 加上 --save. 此處 express 最好和 上面的 express-generator 版本一致
$ npm install *** --save # 其他模塊的安裝類似 express 模塊,也可不全局安裝,但最好 安裝的同時,進行保存,即 加上 --save.
此外:要卸載模塊使用: npm uninstall express
4. 創建 nodeJS 項目:
首先要安裝好 nodeJS 使用 框架的相關模塊后,用 IDE 創建項目,出現以上問題,查看原因后,使用 命令行 方式創建項目,再用 IDE 打開即可。創建過程如下:
(1)先進入你想創建項目的目錄,eg:F:\workspace
(2 ) 創建項目,創建一個模板引擎為jade,應用名叫 mytest的工程,命令如下:
$ express --view=jade mytest
參數:jade :是創建的項目模板 # 項目模板共有多種
mytest:是項目名稱
回車后,出現如下:
1 create : mytest 2 create : mytest/package.json 3 create : mytest/app.js 4 create : mytest/public 5 create : mytest/public/images 6 create : mytest/routes 7 create : mytest/routes/index.js 8 create : mytest/routes/users.js 9 create : mytest/public/javascripts 10 create : mytest/public/stylesheets 11 create : mytest/public/stylesheets/style.css 12 create : mytest/views 13 create : mytest/views/index.jade 14 create : mytest/views/layout.jade 15 create : mytest/views/error.jade 16 create : mytest/bin 17 create : mytest/bin/www 18 install dependencies: 19 $ cd mytest && npm install 20 run the app: 21 $ DEBUG=mytest:* npm start
說明--項目模板(常見的有): ejs,hbs,pug,jade,haml,....等。可使用 express 幫助命令查看已有的模板等,如下:
$ express -h Usage: express [options] [dir] Options: -h, --help output usage information --version output the version number -e, --ejs add ejs engine support --hbs add handlebars engine support --pug add pug engine support -H, --hogan add hogan.js engine support -v, --view <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade) -c, --css <engine> add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css) --git add .gitignore -f, --force force on non-empty directory
(3)按照提示,進入到 mytest
目錄,然后安裝依賴:
$ cd mytest && npm install # 該句實際包含兩條命令:進入項目 和 安裝依賴包
(4)安裝完成后,啟動我們的應用:
$ npm start # 這里需要注意 express 4.x 無法以 node app.js 為啟動方式,而是用指令 npm start 作為啟動
訪問 http://localhost:3000/ 出現熟悉的 Welcome to Express,證明安裝成功,如下圖:
該項目創建到此就真的完成了!!
此后,就可以用 webstorm 等 IDE 打開該項目,並可以編寫自己的代碼了。