Node.js 環境建置

下載 NVM

nvm 是 Node.js 的版本管理器 (version manager)，可在同一台主機上安裝多個版本的 Node.js 環境，因為不同專案可能會使用不同的 Node.js 版本，那就需要透過一個版本管理器來切換不同的 Node.js 版本。

NVM install - 點選右邊的 releases
https://github.com/coreybutler/nvm-windows

NVM 常用指令

nvm list // 列出目前電腦有安裝的 nodejs 版本
nvm list available // 目前網路上可用的 nodejs 版本列表
nvm install v12.19.0 // 該 nodejs 版本下載安裝
nvm uninstall v12.19.0 // 移除該 nodejs 版本
nvm use v12.19.0 // 使用該 nodejs 版本
nvm -v // 目前該 nvm 版本

下載 node.js

1
2
3

nvm install v12.19.0 // 該 nodejs 版本下載安裝
nvm use v12.19.0 // 使用該 nodejs 版本
node -v // 目前該 node 版本

檢查 npm 是否安裝成功

1	npm -v // 目前該 npm 版本

npm 常用指令

npm -v // 查看目前npm的版本
npm install <package> // 安裝npm套件
npm install <package>  -D // 安裝開發階段套件
npm install <package>  -S // 安裝上線階段套件
npm rm <package> // 移除該套件

安裝 Vue-cli

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，確保各種構建工具能夠平穩銜接，使開發人員可以專注在撰寫應用上，而不必花好幾天去糾結配置的問題。

1	npm install -g @vue/cli

建構一個新的 Vue 專案

1
2
3

vue create my-project // my-project 為要創建的資料夾名稱
# OR
vue ui // ui介面設定

Please pick a preset: (請選擇一個預設)

1	Manually select features //手動選擇功能

Check the features needed for your project: (檢查項目所需的功能)

Choose Vue version //選擇 Vue 版本
Babel //JavaScript 轉譯器，可將 ES6+ 程式碼轉為等效的 ES5 程式碼
Router // 路由
CSS pre-processors //CSS 預處理器

Choose a version of Vue.js that you want to start the project with (選擇Vue版本)

1	3.x (Preview)

Use history mode for router?

Pick a CSS pre-processor

1	Sass/SCSS (with dart-sass)

Where do you prefer placing config for Babel, ESLint, etc.?

1	In package.json

Save this as a preset for future projects?

Save preset as: 直接 ENTER

建立完後啟動 serve

1
2
3

cd my-project // 進入資料夾
npm run serve // 開啟serve
npm run build // 建立dist

Vue-cli 專案結構解析

node_modules：透過 npm 下載的套件跟工具都會放在這個資料夾裡面

package.json：關於這整包專案所有的資訊，包含安裝套件版本、專案版本、npm 指令都可以在這個 json 檔案裡面找得到，之後要搬移專案重新安裝套件也需要靠這個 json 檔案

package-lock.json：專門紀錄 package.json 裡面更細節的內容，例如安裝的套件的詳細版本，或是確認你的 dependency (依賴)是被哪個函式庫所要求的等等

babel.config.js: babel 轉換 JS 時所用的套件

以上是我的學習筆記，希望也有幫助到你哦 😀

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

環境建置 & Vue-cli專案