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

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

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
主站蜘蛛池模板: 色小孩导航 | 欧美一级特黄刺激大片视频 | 日本高清全集免费观看 | 国产精品边做边接电话在线观看 | 男人影院在线观看 | 色臀网站| 久久一本综合 | gay男男白袜chinese | sxx免费看观看美女 sss亚洲国产欧美一区二区 | 偷偷操不一样 | 午夜伦理:伦理片 | 国色天香社区在线视频免费观看 | 四虎最新免费网址 | 久久精品国产色蜜蜜麻豆国语版 | 奇米影视4444 | 日韩精品免费一区二区 | 久久se视频精品视频在线 | 女海盗斯蒂内塔的复仇2免费观看 | 国产高清免费午夜在线视频 | 亚洲h片| avtt在线观看 | 4s4s4s4s色大众影视 | 亚洲AV蜜桃永久无码精品红樱桃 | 久久久无码精品无码国产人妻丝瓜 | 草免费视频 | 春意影院午夜爽爽爽免费 | 亚洲国产情侣一区二区三区 | 青青草色 | 赤坂丽女医bd无删减在线观看 | 国产欧美日韩专区 | 97视频久久久 | 韩国女主播一区二区视频 | 国产偷啪视频一区 | 久久re视频这里精品一本到99 | 国产成人精品一区二区阿娇陈冠希 | 国产精品中文字幕 | 图片专区小说专区卡通动漫 | 精品综合久久久久久88小说 | 青青精品| 日本高清动作片www欧美 | 欧美性色老妇人 |