HBuilderX的Vue环境搭建

整体感觉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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey阅读 6,264评论 2 36
  • 前言 注:适用于windows系统本文讲述要点: vue-cli项目搭建基本环境配置; 常用插件描述及分享; 项目...
    流眸Tel阅读 3,979评论 0 10
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,971评论 1 4
  • Vue在Windows系统下本地项目的安装与部署 转自CSDN的:AI吕小布:https://blog.csdn....
    罗海桂阅读 7,238评论 0 0
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,103评论 0 2