Vue項目在HBuilderx中快速搭建

来源:https://www.cnblogs.com/andjieran/archive/2022/05/10/16253117.html
-Advertisement-
Play Games

HBuilderx快速新建VUE項目 一、安裝HBuilderx開發工具 官網:HBuilderX HBuilderXH是HTML的第一個字母,Builder是builder,X是HBuilder的下一個版本。我們也被稱為HX。 HBuilderX是輕量級但功能強大的 IDE。 它的官網上介紹到HB ...


HBuilderx快速新建VUE項目

一、安裝HBuilderx開發工具

官網:HBuilderX

hbgwlo

HBuilderXH是HTML的第一個字母,Builder是builder,X是HBuilder的下一個版本。我們也被稱為HX

HBuilderX是輕量級但功能強大的 IDE。

它的官網上介紹到HBuilderx為極客、為懶人、為我們前端開發人員提供了代碼提示性非常強的一款編輯器

安裝步驟:

1.點擊下載安裝開發工具HBuilderx,這裡選擇自己電腦系統的壓縮包就行

hberx01

2.完成後,直接解壓到自己的文件夾下,我這裡就放在D盤

hb02

3.安裝完成後,打開把它的插件下載安裝OK>>【工具】>>【插件安裝】>>【安裝新插件】

hberx03

4.建議:裡面的插件都安裝上,或者根據自己的需求來安裝,安裝完成後需要重啟一下應用

hberx04(1652155599)

二、安裝node.js

Nodejs是個在伺服器動可以解析和執行JavaScript代碼的運行環境,也可以說是一個運行時平臺,仍然使用JavaScript作為開發語言,但是提偶了一些功能性的API,例如文件操作和網路通信API等。

Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。Node.js 的包管理器 npm,是全球最大的開源庫生態系統。

Node.js中文網:Node.js

安裝流程:

1.下載Windows版的,目前安裝的版本是16.15.0,大家安裝的時候安裝最新穩定版

nodehh5(1652155529)

2.點擊安裝,直接點下一步Next

node02

2.點擊安裝,直接點下一步√選,下一步

node03

3.選擇安裝路徑 ,也可以預設

node04

4.點擊下一步Next,預設安裝這幾個

node06

5.下一步

node07

6.點擊install安裝

node08

7.安裝完成

node10

8.測試安裝是否成功

電腦上的【win+R】鍵輸入cmd,輸入命令node -v,如果出現v.數字和小數點 說明安裝成功

npm 是自帶的我的版本號是8.5.5

ces001

9.Node.js環境變數的配置

在我們的目錄結構中新建node_cachenode_global文件夾

image-20220508203256377

新建完成後,打開【命令面板】cmd進去,輸入

npm config set prefix "D:\nodejs\node_global"

npm config set cache"D:\nodejs\node_cache"

:每輸入一個回車一下

  1. 打開【控制面板】>>【控制和安全】>>【系統】>>【高級系統設置】

    image-20220508202737009

  2. 查看系統變數,找到path編輯裡面

    image-20220508204924292

  3. 在系統變數path新建

    image-20220509152751033

  4. 點擊確認就可以了

三、新建初始化項目

HBuilderx 為我們開發人員提供了三種初始化的方式:

1.直接通過<script>標簽引入

2.新建2.0版本的cli

3.新建3.0版本的cli

1.新建一個空文件包,直接在編輯器打開,右鍵【新建】>>【項目】

image-20220509221158486

2.選擇【vue普通模式】

image-20220509220927548

3.新建成功的目錄結構

image-20220509221444671

新建vue-cli2.0

上面同樣的方式

image-20220509221658300

目錄結構,然後點擊運行到瀏覽器或者終端運行,這邊3.0的就不在演示,和上面的一樣的流程

image-20220509222021499


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,非常 ...
  • OpenHarmony電話子系統為 OS 提供了基礎的無線通信能力。支持 TD-LTE/FDD-LTE/TD-SCDMA/WCDMA/EVDO/CDMA1X/GSM 等網路制式的通信模塊,能夠提供高速的無線數據傳輸、互聯網接入等業務,具備語音、簡訊、彩信、SIM 卡等功能。 ...
  • 在直播、語聊房、K 歌房場景中,為增加趣味性和互動性,玩家可以通過變聲來搞怪,通過混響烘托氣氛,通過立體聲使聲音更具立體感。ZegoExpress SDK 提供了多種預設的變聲、混響、混響回聲、立體聲效果,開發者可以靈活設置自己想要的聲音,如果需要試聽,可以啟用耳返進行測試。 ...
  • 在 OpenHarmony 生態發展過程中,涌現了大批優秀的代碼貢獻者,本專題旨在表彰貢獻、分享經驗,文中內容來自嘉賓訪談,不代表 OpenHarmony 工作委員會觀點。 ...
  • 如今,身材管理已成為人們日常生活中重點關註的內容,除了運動之外,熱量的攝入也是重中之重,想要維持理想的身體健康和體重狀態,人們需要長期測量自己每日攝入食物的體量、熱量和營養價值,這需要實踐者有極強的耐心、執行力和知識儲備,從而成為了一部分身材管理道路上的攔路虎。 因此很多運動健康類App中支持食物識 ...
  • 今天內容挺多,因為想的是必須在一天內把這個vuex完成,說實話這裡面要記得東西還是蠻多的,主要是分為原生的和簡便方法兩種都是vue官方定義的,只不過看你要用哪種,vuex感覺要是用熟練了不得了,直接可以把vue起飛了,數據到處用,那種起飛的感覺,曾經體驗過,所以這個應該還是可以多練練的。 明天進入v ...
  • 8 個你應該立即停止使用的無效 HTML 元素 HTML 規範的開發是一個漸進的過程,有時會出現問題。隨著時間的推移,許多元素和屬性被添加到 HTML 中,直到後來 Web 社區集體意識到有更好的方法時才被刪除。由於已棄用和過時的元素和屬性已經存在於網路上,因此許多現代瀏覽器繼續支持它們的使用。儘管 ...
  • 前言 在我們日常代碼開發過程中,組件的使用是必不可少的,我們也會去封裝組件。但是大家寫組件的風格各式各樣,沒有一個統一的準則。而且也沒有遵循軟體開發的原則:高內聚、低耦合;因為我是給行業提供代碼的,行業給交付提供代碼。我們要儘量去減少大家的接入成本,降低接入成本的最好方案就是我們在設計組件的時候編寫 ...
一周排行
    -Advertisement-
    Play Games
  • # 通過圖片流來返回圖片 # 前言 之前寫了個圖片介面,然後做了個授權,但是光返回圖片地址雖然能適應大部分需求,但是考慮到有些人不想去處理返回值,也是做了個直接返回圖片流的介面。 # 介面展示 ## 返回指定寬度和高度圖片流 ![image](https://img2023.cnblogs.com/ ...
  • System.Speech是.NET框架的一部分,提供了語音識別和語音合成的功能。通過使用System.Speech命名空間中的類,開發人員可以在.NET應用程式中實現語音識別功能。 在本文中,我將演示如何使用 System.Speech.NET,這是開發語音應用程式比較牛逼的內庫。它適用於 .NE ...
  • 導航屬性 導航屬性是作為.NET ORM核心功能中的核心,在SqlSugar沒有支持導航屬性前,都說只是一個高級DbHelper, 經過3年的SqlSugar重構已經擁有了一套 非常成熟的導航屬性體系,本文不是重點講SqlSugar而是重點講導航屬性的作用,讓更多寫Sql人還未使用ORM的人瞭解到O ...
  • SM2是國家密碼管理局於2010年12月17日發佈的橢圓曲線公鑰密碼演算法。 產生背景: 隨著密碼技術和電腦技術的發展,目前常用的1024位RSA演算法面臨嚴重的安全威脅,我們國家密碼管理部門經過研究,決定採用SM2橢圓曲線演算法替換RSA演算法。 SM2演算法和RSA演算法都是公鑰密碼演算法,SM2演算法是一種 ...
  • # 使用c#實現23種常見的設計模式 設計模式通常分為三個主要類別: - 創建型模式 - 結構型模式 - 行為型模式。 這些模式是用於解決常見的對象導向設計問題的最佳實踐。 以下是23種常見的設計模式並且提供`c#代碼案例`: ## 創建型模式: ### 1. 單例模式(Singleton) ``` ...
  • ## 一:背景 ### 1. 講故事 在這麼多的案例分析中,往往會發現一些案例是卡死線上程的內核態棧上,但拿過來的dump都是用戶態模式下,所以無法看到內核態棧,這就比較麻煩,需要讓朋友通過其他方式生成一個藍屏的dump,這裡我們簡單彙總下。 ## 二:如何生成內核態dump ### 1. 案例代碼 ...
  • 有時候,我們為了方便,我們往往使用擴展函數的代碼方式創建很多GridView的操作功能,如在隨筆《在DevExpress中使用BandedGridView表格實現多行表頭的處理》中介紹過多行表頭的創建及綁定處理,在《基於DevExpress的GridControl實現的一些界面處理功能》也介紹了一些... ...
  • # 1、背景 在我們開發的過程中有這麼一種場景, `/projectA` 目錄是 `hadoopdeploy`用戶創建的,他對這個目錄有`wrx`許可權,同時這個目錄屬於`supergroup`,在這個組中的用戶也具有這個目錄的`wrx`許可權,對於其他人,不可訪問這個目錄。現在有這麼一個特殊的用戶`r ...
  • 基於java的倉庫管理系統設計與實現,可適用於出庫、入庫、庫存管理,基於java的出入庫管理,java出入庫管理系統,基於java的WMS倉庫管理系統,庫存物品管理系統。 ...
  • 清醒點[toc] # Java虛擬線程 > 翻譯自 screencapture-pradeesh-kumar-medium-an-era-of-virtual-threads-java ```mermaid flowchart LR introduction-->a(why thread)-->b( ...