HBuilder X的下载与安装及Vue的安装与部署

时间:2024-05-22 21:50:06

HBuilder X的下载与安装

下载
Step1:打开HBuilder X下载的官网,地址http://www.dcloud.io/hbuilderx.html
Step2:
进入下面的界面,点击DOWNLOAD
HBuilder X的下载与安装及Vue的安装与部署
之后选择要下载的版本,这里选择Windows-开发版,因为标准版有些插件没有安装好。见下图:
HBuilder X的下载与安装及Vue的安装与部署
然后开始下载,网速ok的话应该很快下载好了。

安装
找到下载好的压缩包->解压缩->找到HBuilder X.exe即可运行应用->创建桌面快捷方式
HBuilder X的下载与安装及Vue的安装与部署
解压后找到HBuilder X.exe双击
HBuilder X的下载与安装及Vue的安装与部署
创建桌面快捷方式
HBuilder X的下载与安装及Vue的安装与部署

Vue的安装与部署

安装Vue.js
Step1:进入Vue官网,地址:https://cn.vuejs.org/v2/guide/installation.html
Step2:安装开发版本
HBuilder X的下载与安装及Vue的安装与部署
下载完成后,在下载目录下可以看到vue.js
HBuilder X的下载与安装及Vue的安装与部署
如何在 HBuilder X中使用vue.js
Step1:创建一个文件夹,我这里创建了一个名为vuedemo的文件夹
Step2:将此文件夹拖到HBuilder X,会看到如下界面
HBuilder X的下载与安装及Vue的安装与部署
Step3:复制下载好的vue.js,粘贴到vuedemo文件下面
HBuilder X的下载与安装及Vue的安装与部署
step4:创建一个vue项目
文件->新建->vue文件,同时新建一个html文件
HBuilder X的下载与安装及Vue的安装与部署
如何引入vue?
通过script标签的方式引入。通过引入vue呢,其实这样vue已经部署完了。
HBuilder X的下载与安装及Vue的安装与部署
我们可以点击右上角的预览,来验证一下vue部署是否成功。注意:预览前要先保存。
HBuilder X的下载与安装及Vue的安装与部署

看到上图‘2’区域所示的两条信息,就说明vue部署成功了。

下面我会接着分享vue下面的教程,敬请期待!