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
  • 分組和樹形結構是不一樣的。 樹形結構是以遞歸形式存在。分組是以鍵值對存在的形式,類似於GroupBy這樣的形式。 舉個例子 ID NAME SEX Class 1 張三 男 1 2 李四 女 2 3 王二 男 1 當以Sex為分組依據時則是 Key Value 男 1 張三 男 1 3 王二 男 1 ...
  • NetCore中將SQLServer資料庫備份為Sql腳本 描述: 最近寫項目收到了一個需求, 就是將SQL Server資料庫備份為Sql腳本, 如果是My Sql之類的還好說, 但是在網上搜了一大堆, 全是教你怎麼操作SSMS的, 就很d疼! 解決方案: 通過各種查找資料, 還有一些老哥的幫助, ...
  • 我的Notion Clowd.Squirrel Squirrel.Windows 是一組工具和適用於.Net的庫,用於管理 Desktop Windows 應用程式的安裝和更新。 Squirrel.Windows 對 Windows 應用程式的實現語言沒有任何要求,甚至無需服務端即可完成增量更新。 ...
  • 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblog ...
  • 1. Netty源碼研究筆記(3)——Channel系列 依舊是通過先縱向再橫向的研究方法,在開篇中,我們發現不管是Sever還是Client,最終的啟動是通過調用channel的對應方法來完成的,而這個動作實際在channel綁定的eventLoop中執行。 接下來,我們繼續EchoSever、E ...
  • 大家好,今天給大家介紹一款輕量、快速、穩定可編排的組件式規則引擎框架LiteFlow。 一、LiteFlow的介紹 LiteFlow官方網站和代碼倉庫地址 官方網站:https://yomahub.com/liteflow Gitee托管倉庫:https://gitee.com/dromara/li ...
  • 我使用Spring AOP實現了用戶操作日誌功能 今天答辯完了,復盤了一下系統,發現還是有一些東西值得拿出來和大家分享一下。 需求分析 系統需要對用戶的操作進行記錄,方便未來溯源 首先想到的就是在每個方法中,去實現記錄的邏輯,但是這樣做肯定是不現實的,首先工作量大,其次違背了軟體工程設計原則(開閉原 ...
  • 《零基礎學Java》 繪製幾何圖形 Java可以分別使用 Graphics 和 Graphics2D 繪製圖形,Graphics類 使用不同的方法繪製不同的圖形(drawLine()方法可f以繪製線、drawRect()方法用於繪製矩形、drawOval()方法用於繪製橢圓形)。 Graphics類 ...
  • 本期教程人臉識別第三方平臺為虹軟科技,本文章講解的是人臉識別RGB活體追蹤技術,免費的功能很多可以自行搭配,希望在你看完本章課程有所收穫。 ...
  • 很多人都喜歡使用黑色的主題樣式,包括我自己,使用了差不多三年的黑色主題,但是個人覺得在進行視窗轉換的時候很廢眼睛。 比如IDEA是全黑的,然後需要看PDF或者WORD又變成白色的了,這樣來回切換導致眼睛很累,畢竟現在網頁以及大部分軟體的界面都是白色的。那麼還是老老實實的使用原來比較順眼的模式吧。 1 ...