Node.js 環境建置
下載 NVM
nvm 是 Node.js 的版本管理器 (version manager),可在同一台主機上安裝多個版本的 Node.js 環境,因為不同專案可能會使用不同的 Node.js 版本,那就需要透過一個版本管理器來切換不同的 Node.js 版本。
NVM install - 點選右邊的 releases
https://github.com/coreybutler/nvm-windows
NVM 常用指令
1 | nvm list // 列出目前電腦有安裝的 nodejs 版本 |
下載 node.js
1 | nvm install v12.19.0 // 該 nodejs 版本下載安裝 |
檢查 npm 是否安裝成功
1 | npm -v // 目前該 npm 版本 |
npm 常用指令
1 | npm -v // 查看目前npm的版本 |
安裝 Vue-cli
Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統,確保各種構建工具能夠平穩銜接,使開發人員可以專注在撰寫應用上,而不必花好幾天去糾結配置的問題。
1 | npm install -g @vue/cli |
建構一個新的 Vue 專案
1 | vue create my-project // my-project 為要創建的資料夾名稱 |
Please pick a preset: (請選擇一個預設)
1 | Manually select features //手動選擇功能 |
Check the features needed for your project: (檢查項目所需的功能)
1 | Choose Vue version //選擇 Vue 版本 |
Choose a version of Vue.js that you want to start the project with (選擇Vue版本)
1 | 3.x (Preview) |
Use history mode for router?
1 | Y |
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?
1 | Y |
Save preset as: 直接 ENTER
建立完後啟動 serve
1 | cd my-project // 進入資料夾 |
Vue-cli 專案結構解析
node_modules:透過 npm 下載的套件跟工具都會放在這個資料夾裡面
package.json:關於這整包專案所有的資訊,包含安裝套件版本、專案版本、npm 指令都可以在這個 json 檔案裡面找得到,之後要搬移專案重新安裝套件也需要靠這個 json 檔案
package-lock.json:專門紀錄 package.json 裡面更細節的內容,例如安裝的套件的詳細版本,或是確認你的 dependency (依賴)是被哪個函式庫所要求的等等
babel.config.js: babel 轉換 JS 時所用的套件
以上是我的學習筆記,希望也有幫助到你哦 😀
Hey!想學習更多前端知識嗎?
最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈無論您是 0 基礎新手,又或是想學 RWD 的初學者,
我們將帶你從零開始,深入了解並掌握 RWD 響應式網頁設計的核心技術,快來一起看看吧 😊