美文网首页实用小工具
HBuilderX的Vue环境搭建

HBuilderX的Vue环境搭建

作者: 飞扬code | 来源:发表于2019-06-18 08:18 被阅读333次

整体感觉HBuilderX下的Vue要比vscode的配置要简单不少,初学者可以使用这个软件进行学习。

下载地址:http://www.dcloud.io/hbuilderx.html

image.png

绿色版不需要安装即可使用
打开软件新建一个项目


image.png

选择vue


image.png

生成的项目列表结构


image.png

node安装

vue需要node的支持,所以需要安装下node
下载地址:https://nodejs.org/en/download/

image.png image.png image.png image.png image.png image.png

HBuilder关于node配置


image.png

命令行检查node及其npm版本


image.png

工程中开始npm安装


image.png

如果第一次可能需要下载内置插件


image.png
image.png

再次npm installl


image.png

如果出现npm install安装卡住的情况,可以将node_modules删除重新install


image.png

完成后


image.png

编译


image.png
image.png

启动npm


image.png
image.png

访问本地地址:http://localhost:8080/

image.png

相关文章

  • HBuilderX的Vue环境搭建

    整体感觉HBuilderX下的Vue要比vscode的配置要简单不少,初学者可以使用这个软件进行学习。 下载地址:...

  • 前端环境搭建

    前端开发环境的搭建 vue环境搭建(node,vue-cli,vue) https://www.jianshu.c...

  • vue+ionic

    vue的环境搭建: npm install -g @vue/cli (若已搭建跳过)vue create i...

  • HBuilderX App开发环境搭建

    1. Nox 模拟器 1). 无脑式安装 2). 屏幕修改 点击右侧上方的设置按钮,在系统设置中选择手机版,点击保...

  • uni-app 创建

    创建 uni-app 有两种方式 快速搭建 uni-app 使用编译器HbuilderX 创建 使用 vue-cl...

  • Vue之ToDoList实战

    之前的文章windows下搭建vue开发环境,我们已经搭建好了vue的环境,并且写了Vue系列之WebPack与E...

  • Mac上搭建vue环境

    // 转发自:vue开发环境搭建Mac版 vue开发环境的搭建由于本人使用的是mac,所以环境是windows的下...

  • vue-vscode开发环境搭建

    vue-vscode环境搭建

  • Vue开发环境搭建与创建项目

    Vue开发环境的搭建,直接看大神写的教程吧:Vue环境搭建[https://blog.csdn.net/wu__d...

  • Vue(7)

    一、环境搭建 下面我们需要为后面要做的Vue项目搭建开发环境。 1、基本的运行环境 该项目使用node& vue在...

网友评论

    本文标题:HBuilderX的Vue环境搭建

    本文链接:https://www.haomeiwen.com/subject/koxxqctx.html