✨Node.js
Node.js 是能夠在伺服器端運作 JavaScript 的開放源代碼、跨平台運作環境。
Node.js 由 OpenJS Foundation（原為 Node.js Foundation，已與 JS Foundation 合并）持有和維護，亦為 Linux 基金會的項目。
Node.js 采用 Google 開發的 V8 運作代碼，使用事件驅動、非阻塞和異步輸入輸出模型等技術來提高性能，可優化應用程式的傳輸量和規模。這些技術通常用于資料密集的即時應用程式。
Node.js 大部分基本子產品都用 JavaScript 語言編寫。在 Node.js 出現之前，JavaScript 通常作為用戶端程式設計語言使用，以JavaScript 寫出的程式常在使用者的浏覽器上運作。Node.js 的出現使 JavaScript 也能用于服務端程式設計。Node.js 含有一系列内置子產品，使得程式可以脫離 Apache HTTP Server 或 IIS，作為獨立伺服器運作。
官方網站：Node.js (nodejs.org)
中文官網：Node.js 中文網 (nodejs.cn)
✨npm
npm（全稱 Node Package Manager，即“node包管理器”）是Node.js預設的、用JavaScript編寫的軟體包管理系統。
官方網站：npm (npmjs.com)
官方文檔：npm Docs (npmjs.com)
中文文檔：npm 中文文檔 | npm 中文網 (npmjs.cn)
✨npm安裝配置
下載下傳
進入Node.js官網 Node.js (nodejs.org) 點選下載下傳 Node.js (LTS)
LTS(Long Term Support) -> 長期支援版本
安裝
運作下載下傳得到的 node-v14.18.1-x64.msi
安裝完成
檢視是否安裝成功
配置說明
npm配置将儲存在
C:\Users\${username}\.npmrc
中
不配置global倉庫的情況下預設安裝在
C:\Users\${username}\AppData\Roaming\npm
下面介紹兩種配置方式
- 配置方式一（隻修改鏡像源 其餘安裝預設配置）
- 配置方式二（配置global倉庫與鏡像源 配置相應環境變量）
兩種方式各有優缺點：
- 配置方式一：所有
node_modules
- 配置方式二：修改了global倉庫與環境變量，可以将global倉庫位置配置在非C槽位置
！不建議将global倉庫配置在nodejs安裝目錄下，否則後續操作都需要管理者權限
對于雙硬碟筆記本（C槽固态其餘機械）
建議将global倉庫配置在C槽（或者不配置global倉庫）
配置方式一（推薦）
更改鏡像源
npm config set registry=http://registry.npm.taobao.org
檢視配置資訊
npm config list
配置方式二
配置global倉庫
運作如下指令在建立目錄
mkdir D:\nodejs\node_global
mkdir D:\nodejs\node_cache
配置global倉庫與緩存路徑
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
npm config set registry=http://registry.npm.taobao.org
npm config list
如圖配置完成。
配置環境變量
新增 系統環境變量
NODE_PATH
内容：D:\nodejs\node_global\node_modules（配置的global倉庫下的node_modules）
修改 使用者環境變量
✨Vue初始化
安裝vue
npm install vue -g
-g 安裝到global
！權限不足則使用管理器權限運作Terminal
安裝vue-router
中文官網：Vue Router (vuejs.org)
npm install vue-router -g
安裝vue-cli
中文官網：Vue CLI (vuejs.org)
npm install vue-cli -g
vue初始化
vue init <template-name> <project-name>
例如：
vue init webpack vue-test
後續選項根據需求自行選擇
cd進入項目目錄後
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
依次運作
npm install
npm run dev
根據提示打開 http://localhost:8080
初始化完成。
✨Vue CLI（2021.7.30 更新）
npm install vue-cli -g
上述指令安裝的是
vue-cli
(1.x 或 2.x)
新版本
vue-cli
安裝及更新方式如下。
關于舊版本
Vue CLI 的包名稱由
改成了vue-cli
。 如果你已經全局安裝了舊版本的@vue/cli
(1.x 或 2.x)，你需要先通過vue-cli
或npm uninstall vue-cli -g
解除安裝它。yarn global remove vue-cli
Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推薦 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台電腦中管理多個 Node 版本。
可以使用下列任一指令安裝這個新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安裝之後，你就可以在指令行中通路
vue
指令。你可以通過簡單運作
vue
，看看是否展示出了一份所有可用指令的幫助資訊，來驗證它是否安裝成功。
你還可以用這個指令來檢查其版本是否正确：
vue --version
更新
如需更新全局的 Vue CLI 包，請運作：
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
Vue CLI 官方文檔
更多詳細内容請閱讀
vue-cli
官方文檔
介紹 | Vue CLI (vuejs.org)
✨參考及引用
https://zh.wikipedia.org/wiki/Node.js
https://zh.wikipedia.org/wiki/Npm
https://www.cnblogs.com/lgx5/p/10732016.html
https://zhuanlan.zhihu.com/p/105715224
https://github.com/vuejs/vue-cli/tree/v2#vue-cli--
⭐轉載請注明出處
本文作者：雙份濃縮馥芮白
原文連結：https://www.cnblogs.com/Flat-White/p/15043437.html
版權所有，如需轉載請注明出處。