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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...