---
title: node.js的環境安裝
tags: vue
---

概論
===
* node.js是一個server端的程式語言
所以他必須要架server的方式來做
是使用JS做的伺服器端程式語言
語法與規範跟JS有些許不同
使用vue要安裝node.js是因為它附帶NPM

* NPM / 套件管理:
Node package management
Node 套件 管理

可以下載JQ等額外套件使用
以往都是用CDN的方式連接這些外部功能
而使用CDN是有風險的
如 : 無網路環境, CDN伺服器掛了, CDN位址變動…等

* NPM套件=套件管理程式
如:composer.windows的程式管理員.
microsoft store及node.js和app store等等...

* NVM / 版本管理:
Node Version Manager
Node 版本 管理

是用來管理Node.js版本的工具
可讓使用者快速在各版本之間做切換

安裝 架設環境
===
1. 去官網下載左邊長期維護的版本
(右邊是開發中的版本)
https://vitejs.dev/
2. 安裝完以後開啟CMD終端機 輸入指令查看版本以確認是否安裝成功

    node -v

3. 使用vite開始
(用vite開始以後就不需要使用live server)
在終端機進入要建立檔案的資料夾後下指令

    npm create vite@latest 

4. 終端機會詢問你 是否要執行
回答y (是)
5. 問題二 專案名稱 請自行命名
6. 問題三 要使用的framework 此處選擇vue
7. 問題四 vue的版本 此處選擇vue
8. 安裝後表示已經建立好鷹架
而後在終端機下指令進入問題二的資料夾

    cd {問題二自行命名的資料夾名稱}

9. 進入資料夾後 輸入指令安裝

    npm install

10. 安裝完資料夾內會出現一個資料夾 表示成功
11. 成功後 回到CMD輸入指令運行

    npm run dev

12. 出現此畫面代表運行成功 執行網址就可以運行 http://127.0.0.1:5173/

安裝方便閱讀的套件
===
* vscode輸入vue找尋此套件進行安裝

vue安裝後的資料夾與內容解析
===
* package.json == 紀錄該專案用了哪些套件
* package.lock.json == package.json裡要用的套件 需要安裝哪些東西
* .vscode / extensions.json == vscode再該專案下 安裝哪些外掛的紀錄
* node_modules == 實際使用的套件內容等, 勿上傳 超大, 會被github網站ben掉
* vite.config.js == 定義外掛程式, 其設定檔的位置
* src/main.js == 如下圖 , #app為圖右第十行之app

----
puppeteer
https://ithelp.ithome.com.tw/articles/10199544