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
  • 概述:這個WPF項目通過XAML繪製汽車動態速度表盤,實現了0-300的速度刻度,包括數字、指針,並通過定時器模擬速度變化,展示了動態效果。詳細實現包括界面設計、刻度繪製、指針角度計算等,通過C#代碼與XAML文件結合完成。 新建 WPF 項目: 在 Visual Studio 中創建一個新的 WP ...
  • 概述:在WPF中使用`WpfAnimatedGif`庫展示GIF動畫,首先確保全裝了該庫。通過XAML設置Image控制項,指定GIF路徑,然後在代碼中使用庫提供的方法實現動畫控制。這簡化了在WPF應用中處理GIF圖的過程,提供了方便的介面來管理動畫播放和暫停。 當使用 WpfAnimatedGif  ...
  • 您是否曾經訪問過一個網站,它需要很長時間載入,最終你敲擊 F5 重新載入頁面。 即使用戶刷新了瀏覽器取消了原始請求,而對於伺服器來說,API也不會知道它正在計算的值將在結束時被丟棄,刷新五次,伺服器將觸發 5 個請求。 為瞭解決這個問題,ASP.NET Core 為 Web 伺服器提供了一種機制,就 ...
  • 本章將和大家分享如何通過 Elasticsearch 實現自動補全查詢功能。 一、自動補全-安裝拼音分詞器 1、自動補全需求說明 當用戶在搜索框輸入字元時,我們應該提示出與該字元有關的搜索項,如圖: 2、使用拼音分詞 要實現根據字母做補全,就必須對文檔按照拼音分詞。在 GitHub 上恰好有 Ela ...
  • using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Windows.Forms; namespace OOP { pub ...
  • 概述:以上內容詳細介紹了在C#中如何從另一個線程更新GUI,包括基礎功能和高級功能。對於WinForms,使用`Control.Invoke`;對於WPF,使用`Dispatcher.Invoke`。高級功能使用`SynchronizationContext`實現線程間通信,確保清晰、可讀性高的代碼 ...
  • Nuget包 Microsoft.Extensions.Telemetry.Abstractions 包含的新的日誌記錄source generator,它支持使用[LogProperties]將整個對象作為State與日誌一起記錄。 我將展示一種方法來控制如何使用[LogProperties]對象 ...
  • 支持.Net/.Net Core/.Net Framework,可以部署在Docker, Windows, Linux, Mac。 常見的ORM技術(比如:Entity Framework,Dapper,SqlSugar,NHibernate,等…),它們不是在做Sql語句的程式化變種,就是在做Sq ...
  • 一、引言 在現代應用程式開發中,尤其是在涉及I/O操作(如網路請求、文件讀寫等)時,非同步編程成為了提高性能和用戶體驗的關鍵技術。C#作為.NET框架下的主流開發語言,提供了強大的非同步編程支持,通過async/await關鍵字,可以讓開發者以同步的方式編寫非同步代碼,極大地簡化了非同步編程的複雜性。本文將 ...
  • 一、引言 在.NET開發中,操作Office文檔(特別是Excel和Word)是一項常見的需求。然而,在伺服器端或無Microsoft Office環境的場景下,直接使用Office Interop可能會面臨挑戰。為瞭解決這個問題,開源庫NPOI應運而生,它提供了無需安裝Office即可創建、讀取和 ...