1. 程式人生 > 其它 >【Vue】npm安裝配置與vue初始化(Windows)

【Vue】npm安裝配置與vue初始化(Windows)

✨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.17.3-x64.msi

安裝完成


檢視是否安裝成功


配置

配置global倉庫

進入nodejs安裝目錄

新建資料夾 node_global、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

檢視配置資訊

如圖配置完成。


配置環境變數

新增 系統環境變數

NODE_PATH

內容:D:\nodejs\node_global\node_modules(配置的global倉庫下的node_modules)

修改 使用者環境變數


安裝vue

npm install vue -g

-g 安裝到global

!許可權不足則使用管理器許可權執行Terminal

安裝vue-router

中文官網:Vue Router (vuejs.org)

npm install vue -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

初始化完成。


✨參考及引用

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

版權所有,如需轉載請註明出處。