建立Node.js Express專案

tags: Node.js javascript

每次要建個新專案都要先上網查一下指令，咖麻煩诶！
所以我決定把它紀錄下來

，方便未來抄作業(O

---

1. 在建置專案之前，先來安裝Express：
   ​​​​$ npm install express-generator -g
   

   如果已經有安裝過的，可以直接無視這個步驟~
   等安裝好後，來去找建置專案的好位置

---

2. 在現行工作目錄中建立一個 Express 應用程式：

   ​​​​$ express --view=ejs <myapp>
   

   <myapp>是要建置專案名稱，可自行取名。
   建好後可以看到資料夾內出現這些東西

   ​​​​create : myapp
   ​​​create : myapp/package.json
   ​​​create : myapp/app.js
   ​​​create : myapp/public
   ​​​create : myapp/public/javascripts
   ​​​create : myapp/public/images
   ​​​create : myapp/routes
   ​​​create : myapp/routes/index.js
   ​​​create : myapp/routes/users.js
   ​​​create : myapp/public/stylesheets
   ​​​create : myapp/public/stylesheets/style.css
   ​​​create : myapp/views
   ​​​create : myapp/views/index.ejs
   ​​​create : myapp/views/layout.ejs
   ​​​create : myapp/views/error.ejs
   ​​​create : myapp/bin
   ​​​create : myapp/bin/www
   

   如果在下指令時遇到下面錯誤訊息內容，可以看這篇解決問題。

   ​​​​express:已停用指令碼執行,所以無法載入C:/***.foerShell_profile.ps1 檔案。
   ​​​​如需詳細資訊,請參閱about_Executio_oc網址為https:/8o.mi osoft.com/fwliLink51。
   ​​​​位於線路:1字元:3
   ​​​​C:/UsersHsiangfeng/Documents(windowsPowerShell/Microsoft.PowerShe...
   ​​​​~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   ​​​​CategoryInfo : SecurityError: (:) [], PSSecurityException
   ​​​​FullyQualifiedErrorId : UnauthorizedAccess
   

---

3. 安裝相依項目：
   ​​​​$ cd myapp
   ​​​​$ npm install
   

   這沒啥好說的…
   就install把一些模組建一建，建好會看到專案中出現叫做 node_modules 的資料夾。

---

4. 前端改用pug或ejs。
   前面建專案時，指令有一段"–view=ejs"，可以預設前端使用的工具，若不習慣使用.ejs，也可以在指令中改設定成pug。

   以下示範如何更改以建立的專案：

   將app.js檔，圖中這部分改成pug(建專案時預設是ejs)。
   

   
   然後安裝pug模組：
   ​​​​$ npm install --save pug
   

   個人開發習慣比較喜歡用ejs，各位用自己習慣的就好

---

5. 執行專案：
   建置好了當然也要能跑起來才算OK！

   ​​​​$ npm start
   

   因為bin/www那邊預設port是3000，所以瀏覽器中網址要輸入 http://localhost:3000/
   會得到以下畫面：
   

   這樣就是成功啦！