一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家:專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - node.js - node.js安裝及HbuilderX配置詳解

node.js安裝及HbuilderX配置詳解

2022-02-16 17:14小東子? node.js

這篇文章主要介紹了node.js安裝及HbuilderX配置的相關資料,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

npm安裝教程:

一.下載Node.js安裝包

官網:https://nodejs.org/en/

二.使用之前,我們先來掌握3個東西是用來干什么的。

webpack: 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發布的靜態資源做相應的準備,比如資源的合并和打包。

vue-cli: 用戶生成Vue工程模板。(幫你快速開始一個vue的項目,也就是給你一套vue的結構,包含基礎的依賴庫,只需要 npm install就可以安裝)

node.js安裝及HbuilderX配置詳解

如圖,現在下載的版本是14.16.0 LTS (推薦用戶現在使用):

node.js安裝及HbuilderX配置詳解

雙擊安裝

1.首先我們可以看到的是默認的為C盤路徑,這里就我們以D盤為例子進行安裝:d: ode.js

node.js安裝及HbuilderX配置詳解
node.js安裝及HbuilderX配置詳解

一路點Next

node.js安裝及HbuilderX配置詳解

點Finsh完成

node.js安裝及HbuilderX配置詳解

接下來 我們win+r快捷鍵

node.js安裝及HbuilderX配置詳解

我們輸入echo %PATH%

node.js安裝及HbuilderX配置詳解

我們輸入node -v 以及 npm -v

node.js安裝及HbuilderX配置詳解

我們看一下C:UsersAdministratorAppDataRoaming

node.js安裝及HbuilderX配置詳解

我們可以看到npm的本地倉庫跑在系統盤c盤的用戶目錄(沒見到npm-cache是因為沒有用過,一使用緩存目錄就生成了),我們試圖把這2個目錄移動回到D: odejs

先如下圖建立2個目錄

node.js安裝及HbuilderX配置詳解

然后運行以下2條命令

npm config set prefix “D: odejs ode_global”
npm config set cache "D: odejs ode_cache"

如下圖,我們再來關注一下npm的本地倉庫,輸入命令npm list -global

node.js安裝及HbuilderX配置詳解

輸入命令npm config set registry=http://registry.npm.taobao.org 配置鏡像站

node.js安裝及HbuilderX配置詳解

輸入命令npm config list 顯示所有配置信息,我們關注一個配置文件

node.js安裝及HbuilderX配置詳解

C:UsersAdministrator.npmrc

node.js安裝及HbuilderX配置詳解

使用txt文本或者是文本編輯器,我們可以看到剛才的配置信息:

node.js安裝及HbuilderX配置詳解

檢查一下鏡像站行不行命令1

npm config get registry

 

node.js安裝及HbuilderX配置詳解

檢查一下鏡像站行不行命令2
Npm info vue 看看能否獲得vue的信息

node.js安裝及HbuilderX配置詳解
node.js安裝及HbuilderX配置詳解
node.js安裝及HbuilderX配置詳解

注意,此時,默認的模塊D: odejs ode_modules 目錄
將會改變為D: odejs ode_global ode_modules 目錄,
如果直接運行npm install等命令會報錯的。
我們需要做1件事情:

1、增加環境變量NODE_PATH 內容是:D: odejs ode_global ode_modules

node.js安裝及HbuilderX配置詳解

(注意,一下操作需要重新打開CMD讓上面的環境變量生效)

一、測試NPM安裝vue.js

命令:npm install vue -g
這里的-g是指安裝到global全局目錄去

node.js安裝及HbuilderX配置詳解

我們看一下:D: odejs ode_global ode_modulesvue

node.js安裝及HbuilderX配置詳解

二、測試NPM安裝vue-router

命令:npm install vue-router -g

node.js安裝及HbuilderX配置詳解
node.js安裝及HbuilderX配置詳解

運行npm install vue-cli -g安裝vue腳手架

node.js安裝及HbuilderX配置詳解
node.js安裝及HbuilderX配置詳解
node.js安裝及HbuilderX配置詳解

對path環境變量添加D: odejs ode_global
win10以下版本的,橫向顯示PATH的,注意添加到最后時,不要有分號【;】

node.js安裝及HbuilderX配置詳解

重新打開CMD,并且測試vue是否使用正常

node.js安裝及HbuilderX配置詳解

注意,vue-cli工具是內置了模板包括 webpack 和 webpack-simple,前者是比較復雜專業的項目,
他的配置并不全放在根目錄下的 webpack.config.js 中。

初始化,安裝依賴:
安裝時 install vue-router? 是yes 其余的都是No

node.js安裝及HbuilderX配置詳解

運行npm install安裝依賴

node.js安裝及HbuilderX配置詳解

運行npm run dev
在dos命令中輸入 npm run dev

node.js安裝及HbuilderX配置詳解

根據提示的http://localhost:8080 在瀏覽器中打開。

node.js安裝及HbuilderX配置詳解

自動打開瀏覽器http://localhost:8080/#/

在dos命令中輸入:npm run build

生成靜態文件,打開dist文件夾下新生成的index.html文件

node.js安裝及HbuilderX配置詳解

接下來我們就以Hbuilderx工具進行對Node.js以及對npm 的配置

官方網:https://www.dcloud.io/hbuilderx.htmlHubilderX鏈接

node.js安裝及HbuilderX配置詳解

node.js安裝及HbuilderX配置詳解

node.js安裝及HbuilderX配置詳解

在終端輸入npm run dev 將項目運行

到此這篇關于node.js安裝及HbuilderX配置的文章就介紹到這了,更多相關node.js HbuilderX配置內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家!

原文鏈接:https://blog.csdn.net/weixin_50561839/article/details/114636389

延伸 · 閱讀

精彩推薦
  • node.jsNode.js 中如何收集和解析命令行參數

    Node.js 中如何收集和解析命令行參數

    這篇文章主要介紹了Node.js 中如何收集和解析命令行參數,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋...

    descire8802021-12-28
  • node.jslinux服務器快速卸載安裝node環境(簡單上手)

    linux服務器快速卸載安裝node環境(簡單上手)

    這篇文章主要介紹了linux服務器快速卸載安裝node環境(簡單上手),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需...

    mose-x8462022-01-22
  • node.jsrequire加載器實現原理的深入理解

    require加載器實現原理的深入理解

    這篇文章主要給大家介紹了關于require加載器實現原理的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需...

    隱冬8462022-03-03
  • node.js詳解node.js創建一個web服務器(Server)的詳細步驟

    詳解node.js創建一個web服務器(Server)的詳細步驟

    這篇文章主要介紹了詳解node.js創建一個web服務器(Server)的詳細步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,...

    王佳斌8952021-12-31
  • node.jsnodejs中使用worker_threads來創建新的線程的方法

    nodejs中使用worker_threads來創建新的線程的方法

    這篇文章主要介紹了nodejs中使用worker_threads來創建新的線程的方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友...

    flydean程序那些事8982022-01-06
  • node.js在瀏覽器中,把 Vite 跑起來了!

    在瀏覽器中,把 Vite 跑起來了!

    大家好,我是 ssh,前幾天在推上沖浪的時候,看到 Francois Valdy 宣布他制作了 browser-vite[1],成功把 Vite 成功在瀏覽器中運行起來了。這引起了我的興趣,如...

    前端從進階到入院9282022-01-11
  • node.jsNode.js ObjectWrap 的弱引用問題

    Node.js ObjectWrap 的弱引用問題

    最近在寫 Node.js Addon 的過程中,遇到了一個問題,然后發現是 ObjectWrap 弱引用導致的,本文介紹一下具體的問題和排查過程,以及 ObjectWrap 的使用問題。...

    編程雜技9852022-01-04
  • node.jsk8s node節點重新加入master集群的實現

    k8s node節點重新加入master集群的實現

    這篇文章主要介紹了k8s node節點重新加入master集群的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋...

    Scarborought13922022-01-22
主站蜘蛛池模板: 国产亚洲精品视频中文字幕 | 国产在线98福利播放视频免费 | 秋霞理论在一l级毛片 | 日本美女动态图片 | 四虎影视在线观看2413 | 精品在线99 | 国产精品久久久精品日日 | 亚洲av欧美在我 | np小说h| 精品国产在天天线在线麻豆 | 欧美一级高清片免费一级 | 国产成人盗摄精品 | 国产成人欧美视频在线 | 水多多凹凸福利视频导航 | 91视在线国内在线播放酒店 | 免费国产白棉袜踩踏区域 | 国产亚洲女在线线精品 | 日本视频中文字幕 | 幻女free性俄罗斯第一次摘花 | 国内视频一区二区三区 | 日本护士撒尿 | 91麻豆国产福利精品 | 无套白浆| 日本tube24xxxxx | 99网站在线观看 | 半挠脚心半黄的网站 | 99午夜高清在线视频在观看 | 日韩色在线观看 | 色综合久久日韩国产 | 成人免费公开视频 | www四虎| 欧美性高清另类videosex死尸 | 国产精品久久久久无毒 | 亚洲一区二区三区91 | 免费超级乱淫视频播放性 | 亚洲第一天堂网 | 毛片免费观看的视频 | 我的男友是消防员在线观看 | 深夜福利免费观看 | 调教人妖| 日本黄a |