Vue項目啟動過程全記錄(node.js運行環境搭建)

一、安裝node.js并配置環境變量

1、安裝node.js

從Node.js官網下載安裝包并安裝。然后在安裝后的目錄(如果是下載的壓縮文件,則是解壓縮的目錄)下新建node_global和node_cache這兩個文件夾。

node_global:npm全局安裝位置
node_cache:npm緩存路徑

在這里插入圖片描述

2、配置環境變量

  1. 在系統變量里添加一個變量NODE_HOME,值為node.js的安裝路徑如:D:\Program Files\nodejs
    在這里插入圖片描述
  2. 在Path中添加兩個變量:

%NODE_HOME%
%NODE_HOME%\node_global

在這里插入圖片描述

  1. 環境變量配置好后,打開cmd,輸入node -v和npm -v,若顯示出版本號,說明安裝配置成功。

node -v
npm -v

在這里插入圖片描述

3、配置npm全局模塊路徑和cache默認安裝位置

在此步驟中所有npm命令最好以管理員身份運行的cmd中執行并且都要切換到node.js的安裝目錄下執行,不然可能導致無法識別。
說明:這一步是將前面安裝之后新建的兩個文件夾node_global(npm全局安裝位置)和node_cache(npm緩存路徑)與npm聯系起來
打開cmd,將執行目錄切換到node.js的安裝目錄,分別執行以下命令,

npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache “D:\Program Files\nodejs\node_cache”

在這里插入圖片描述
注意,路徑用的引號是英文狀態下的雙引號,不是單引號,也不是中文的雙引號。

4、修改npm鏡像并安裝cnpm

使用npm的官網鏡像下載依賴包速度太慢,為了提高速度,這里我們使用npmmirror鏡像,同樣是在cmd中,將執行目錄切換到node.js的安裝目錄,執行以下命令

npm install -g cnpm --registry=https://registry.npmmirror.com

在這里插入圖片描述

5、安裝vue-cli腳手架

以上都設置好后,重新打開cmd,執行以下命令,然后等待安裝完成就行。

npm install -g @vue/cli

在這里插入圖片描述
只要執行結果中沒有出現 ERR! 都算執行成功了

二、啟動Vue項目

說明:能正常運行的Vue項目的目錄里都有一個名為node_modules的文件夾,里面存放了運行這個vue項目需要的所有依賴包,一般來講,從網上直接clone來的別人的項目目錄里是不會包含node_modules文件夾的,因為占得內存太大。所以要想運行別人的項目,必須先重新給它下載依賴包。

  1. 在Vue項目目錄下打開cmd,執行cnpm install命令,等待npm安裝完成(因為前面已經設置好了cnpm,所以這里可以直接用cnpm替換npm進行安裝)

cnpm install

npm安裝完成后,項目目錄下就會出現node_modules文件夾了

  1. 然后執行cnpm run dev,運行vue項目

cnpm run dev

出現以上就代表項目成功運行,在瀏覽器中輸入http://localhost:8088即可看到項目主界面(本項目因為端口號是8088,因此此端口為8088,這里的端口按項目實際端口號而定)。

注意:在執行命令時可能存在以下報錯問題,可通過以下鏈接解決
創建vue項目時, 無法加載文件 D:\Program Files\nodejs\node_global\cnpm.ps1,因為在此系統上禁止運行腳本,解決方法。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/696279.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/696279.shtml
英文地址,請注明出處:http://en.pswp.cn/news/696279.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Golang 中 NATS JetStream 的高級特性有哪些?

NATS JetStream 是 NATS 消息系統的一個高級功能模塊,提供了許多高級特性,使得它在處理消息時更加靈活、可靠和高效。以下是 NATS JetStream 的一些高級特性: 持久化消息存儲:NATS JetStream 使用持久化存儲引擎,可以確…

代碼隨想錄三刷day06

提示:文章寫完后,目錄可以自動生成,如何生成可參考右邊的幫助文檔 文章目錄 前言一、力扣203. 移除鏈表元素二、力扣707. 設計鏈表三、力扣 前言 遞歸法相對抽象一些,但是其實和雙指針法是一樣的邏輯,同樣是當cur為空的…

機器學習面試:邏輯回歸與樸素貝葉斯區別

邏輯回歸與樸素貝葉斯區別有以下幾個方面: (1)邏輯回歸是判別模型,樸素貝葉斯是生成模型,所以生成和判別的所有區別它們都有。 (2)樸素貝葉斯屬于貝葉斯,邏輯回歸是最大似然,兩種概率哲學間的區別。 (3)樸素貝葉斯需要條件獨立假設…

【刷題】牛客 JZ64 求1+2+3+...+n

刷題 題目描述思路一 (暴力遞歸版)思路二 (妙用內存版)思路三 (快速乘法版)思路四 (構造巧解版)Thanks?(・ω・)ノ謝謝閱讀!&#xff01…

力扣49.字母異位詞分組

題目描述: 49. 字母異位詞分組 難度 中等 給你一個字符串數組,請你將 字母異位詞 組合在一起。可以按任意順序返回結果列表。 字母異位詞 是由重新排列源單詞的所有字母得到的一個新單詞。 示例 1: 輸入: strs ["eat", "tea"…

在Linux中查找大文件

在Linux中查找大文件,你可以使用find命令結合其他工具(如sort和du)來實現。以下是一些常見的方法: 1. 使用find命令查找大文件 你可以使用find命令來查找特定大小以上的文件。例如,要查找當前目錄及其子目錄中大小超…

高盛:日本這輪通脹是否可持續,關鍵看房租

租金在日本CPI中的權重高達20%,高盛預計短期內租金將繼續拖累通脹至1.7%或以下,長期有望溫和上行,使通脹穩在2%的水平。 日本正在轉向“去通縮”,房租能否支撐通脹態勢? 在日股今年一路高歌、有望“收復失地”時&…

redis的AOF機制

Redis AOF(Append Only File)機制是為了記錄每一次redis命令的操作并用于恢復數據。 AOF按順序記錄每一步操作,例如: set k 3, set k 5, set k 10 ,當服務器重啟后依次執行命令恢復k 10。 日志寫入有三種方式: Always&#x…

【【深入淺出的了解從算法到RTL的基本流程】】

深入淺出的了解從算法到RTL的基本流程 首先 明確需求 ,明確題目 接下來是第一輪建模-------目的是 驗證算法的正確性 這個階段分為以下兩個方面 一方面是 : 通過一些算法仿真工具來對 這個設計進行建模 — 算法原理建模 第二方面是 : 是 算…

hbase最新版本配置屬性

1. 說明 hbase的配置屬性大全 hbase版本基于 hbase-3.0.0-alpha-4 <?xml version"1.0"?> <?xml-stylesheet type"text/xsl" href"configuration.xsl"?> <!-- /*** Licensed to the Apache Software Foundation (ASF) under…

unity-firebase-Analytics分析庫對接后數據不顯示原因,及最終解決方法

自己記錄一下unity對接了 FirebaseAnalytics.unitypackage&#xff08;基于 firebase_unity_sdk_10.3.0 版本&#xff09; 庫后&#xff0c;數據不顯示的原因及最終顯示解決方法&#xff1a; 1. 代碼問題&#xff08;有可能是代碼寫的問題&#xff0c;正確的代碼如下&#xff…

OpenTiny Vue 組件庫適配微前端可能遇到的4個問題

本文由體驗技術團隊 TinyVue 項目成員岑灌銘同學創作。 前言 微前端是一種多個團隊通過獨立發布功能的方式來共同構建現代化 web 應用的技術手段及方法策略&#xff0c;每個應用可以選擇不同的技術棧&#xff0c;獨立開發、獨立部署。 TinyVue組件庫的跨技術棧能力與微前端十…

springboot207基于springboot的實習管理系統

實習管理系統的設計與實現 摘要 近年來&#xff0c;信息化管理行業的不斷興起&#xff0c;使得人們的日常生活越來越離不開計算機和互聯網技術。首先&#xff0c;根據收集到的用戶需求分析&#xff0c;對設計系統有一個初步的認識與了解&#xff0c;確定實習管理系統的總體功…

H5星空漸變效果引導頁源碼

H5星空漸變效果引導頁源碼 源碼介紹&#xff1a;H5星空漸變效果引導頁源碼是一款帶有星空漸變效果的源碼&#xff0c;內含3個可跳轉旗下站點按鈕。 下載地址&#xff1a; https://www.changyouzuhao.cn/8344.html

【海賊王的數據航海:利用數據結構成為數據海洋的霸主】時間復雜度 | 空間復雜度

目錄 1 -> 算法效率 1.1 -> 如何衡量一個算法的好壞&#xff1f; 1.2 -> 算法的復雜度 2 -> 時間復雜度 2.1 -> 時間復雜度的概念 2.2 -> 大O的漸進表示法 2.3 -> 常見時間復雜度計算 3 -> 空間復雜度 4 -> 常見復雜度對比 1 -> 算法效…

nginx前綴匹配

nginx location ^~ /task/ { # 這樣&#xff0c;當您訪問 http://hostname:port/task/test 時&#xff0c;# 請求會被轉發到 proxy_pass /test&#xff0c;注意 /task/ 前綴在轉發時被去掉了。proxy_pass http://192.168.86.199:8805/; proxy_set_header Host $host; proxy…

SQL注入漏洞解析

什么是SQL注入 原理&#xff1a; SQL注入即是指web應用程序對用戶輸入數據的合法性沒有判斷或過濾不嚴&#xff0c;攻擊者可以在web應用程序中事先定義好的查詢語句的結尾上添加額外的SQL語句&#xff0c;在管理員不知情的情況下實現非法操作&#xff0c;以此來實現欺騙數據庫服…

Ps下載安裝(專業圖像處理軟件Ps安裝包下載2024【Windows版】)

Adobe全家桶下載方式 將持續更新~ 文章目錄 Adobe全家桶下載方式Ps下載方式【點我獲取下載鏈接】我們的網站一、Ps簡介聲明 Ps下載方式【點我獲取下載鏈接】 迅雷網盤下載&#xff1a;迅雷網盤下載方式百度網盤下載&#xff1a;百度網盤下載方式夸克網盤下載&#xff1a;夸克…

【Vuforia+Unity】AR01實現單張多張圖片識別產生對應數字內容

1.官網注冊 Home | Engine Developer Portal 2.下載插件SDK&#xff0c;導入Unity 3.官網創建數據庫上傳圖片&#xff0c;官網處理成數據 下載好導入Unity&#xff01; 下載好導入Unity&#xff01; 下載好導入Unity&#xff01; 下載好導入Unity&#xff01; 4.在Unity設…

圖——最小生成樹實現(Kruskal算法,prime算法)

目錄 預備知識&#xff1a; 最小生成樹概念&#xff1a; Kruskal算法&#xff1a; 代碼實現如下&#xff1a; 測試&#xff1a; Prime算法 &#xff1a; 代碼實現如下&#xff1a; 測試&#xff1a; 結語&#xff1a; 預備知識&#xff1a; 連通圖&#xff1a;在無向圖…