DCloud_HB_WKP
DCloud_HB_WKP
  • 发布:2018-08-01 16:29
  • 更新:2019-09-07 23:54
  • 阅读:91001

HBuilder X对vue的支持有多强?

分类:HBuilder
Vue

HBuilderX中使用vue,如果是打开vue文件,会自动挂载vue语法库。
如果是HTML文件里引用vue框架,需要点右下角的语法提示库,选择vue语法库。
我们更推荐开发者使用vue单文件规范,直接打开vue文件。
注意:如果文件不在项目下,而是单独的文件,无法挂载语法库,请在左侧项目管理器建个项目,打开项目里的文件进行体验。

1.语法高亮

除了vue的普通语法高亮支持,HBuilderX还支持各种表达式语法,以及script和style支持的其他语言如less、scss、stylus、typescript等高亮,无需安装插件。

2.代码提示

  • API提示及帮助
    提示不止是要全,而且要准。不能把所有词都猜一遍列出来,该有什么就有什么,清晰可信赖。
    既要写的快,又要写不错。
    除了完善的提示,在代码助手右侧还能看到清晰的帮助描述,对api进行说明,还有vue官网的api链接,点击即可直达vue官网指定页面。非常适合学习参考。

  • this的精准识别

  • 模板语法提示


  • 指令提示

  • 自定义组件提示
    HBuilderX的组件语法提示比其他工具都要强大,组件的标签、属性都可以直接被提示出来。

  • vue doc
    HBuilderX支持强大的vue doc,是vue组件开发者的利器,通过类jsdoc的写法,可让你的组件实现全面的代码提示和帮助。详见https://ask.dcloud.net.cn/article/35814

  • 兼容vscode vetur插件中的vue规范
    一些vue的组件库,已经按照vetur规范制作语法提示库,比如Element UI、Onsen UI、Bootstrap Vue等框架。
    这些框架npm安装或在HBuilderX新建模板中选择安装,可以直接实现代码提示。如下图

  • 常用代码块/自定义代码块
    敲v,在拉出的代码助手列表里可以看到大量vue代码块。
    你也可以在工具-代码块设置-vue代码块里自己添加更多代码块。

  • 其他

另外其他开发工具常见的emmet、d.ts,HBuilderX也均良好支持。

3.帮助文档

光标放到api处,按下F1,可直接在右侧打开对应的帮助文档,不用切屏,边看文档边改代码,见下图:

4.转到定义

按下alt+鼠标单击,即可对各种变量、样式、方法的引用溯源,在template、script、style中来回跳转。非常强大而灵活。
按下ctrl+alt+单击,还可在旁边以分栏方式打开定义处,方便并排查看。

5.重构或选择相同语法词

如果你想看某个变量在哪里被引用,或者选中所有变量进行改名,那么点右键->选择相同变量(ctrl+shift+e)。
如下图可见,“list”在文中出现很多相同单词,但只有那几个准确的变量被选中:


详情参考:https://ask.dcloud.net.cn/article/35732

6.语法校验

首先需要在插件管理中安装eslint-plugin-vue,然后点工具-验证本文档语法,或在vue文档保存时也会自动验证。
插件的管理设置如配置快捷键、是否在保存时自动触发,在工具-外部命令-eslint-plugin-vue里的插件配置里,详见http://ask.dcloud.net.cn/article/19599
如果要修改eslint的校验规则,在工具-外部命令-eslint-plugin-vue里的.eslintrc.js。

7. 大纲

选择视图菜单-显示文档结构图,或右键菜单里选择,即可在左侧出现大纲。点击左侧即可快读跳转右侧。

8. 免命令行使用vue

如果你不喜欢配置复杂的node环境,这并不影响你快速进入vue世界。
HBuilderX内置了终端插件和node环境。
在新建界面,可以可视化新建vue项目,而不需要配cli。

在运行菜单里,可以可视化的运行和build。

在引入插件时也无需安装node模块,uni-app插件市场可以可视化的导入插件(仅适用于uni-app),详见uni-app插件市场

17 关注 分享
Trust yetsung@163.com 钊有 GeneS 232675861@qq.com 313400763@qq.com 553455177@qq.com 也好 2501987804@qq.com DCloud_HB_WDL 309185846@qq.com 简单点好 2059780321@qq.com laravel_code@163.com xxc3303@163.com dlamliu@qq.com 18720675970@163.com

要回复文章请先登录注册

1780982620@qq.com

1780982620@qq.com

为什么我按alt单机没用呢
2019-09-07 23:54
行走的youhu

行走的youhu

然而HBuilder如何调试vue项目呢
2019-08-29 17:25
wangOfPeng

wangOfPeng

不知道 支持 iview 的提示怎么弄
2019-08-27 09:41
somecore@foxmail.com

somecore@foxmail.com

回复 fancy1i@sina.com:
vue文件是渲染模板文件,得编译成html才能用
2019-08-12 11:03
1830943131@qq.com

1830943131@qq.com

回复 简单点好:
你有点皮,居然看到你
2019-08-12 09:58
mrerror@qq.com

mrerror@qq.com

厉害了
2019-08-12 09:56
简单点好

简单点好

66666666666
2019-08-11 09:47
594358828@qq.com

594358828@qq.com

good
2019-07-23 22:30
fancy1i@sina.com

fancy1i@sina.com

我怎么用chrome打开vue文件时,会自动跳转到下载该文件,别的浏览器可以正常打开页面
2019-07-23 21:01
DCloud_heavensoft

DCloud_heavensoft

回复 error.do@qq.com:
HBuilderX支持App真机运行,保存后手机上自动刷界面。点HBuilderX的运行菜单
2019-07-12 07:52
jeason少

jeason少

回复 jeason少:
在node_modules @vue》cli-service>lib>commands>serve.js下。。。
2019-06-26 13:50
jeason少

jeason少

新建vue项目,没有config目录??在哪里找
2019-06-26 11:24
411982247@qq.com

411982247@qq.com

eslint如何使用呢?就是像VSC保存自动排版检测
2019-06-03 17:18
error.do@qq.com

error.do@qq.com

能不能npm run serve开发, 然后一边修改代码 一边在手机上查看app的运行结果,
现在的操作是: 修改代码 -> 打包vue, 然后才能在手机上看到修改后app的效果
2019-05-22 09:00
952011193@qq.com

952011193@qq.com

vue的扩展代码块没用的?"beforerouteenter":{"prefix":"bfor", "body":["beforeRouteEnter:(to,from,next)=>{}"],"triggerAssist":false,"description": "Log output to console twice"}
2019-05-14 17:58
1138659665@qq.com

1138659665@qq.com

使用stylus 代码没有css样式的提示
2019-04-30 09:51
liuxmoo

liuxmoo

7. 大纲
选择视图菜单-显示文档结构图,或右键菜单里选择,即可在左侧出现大纲。点击左侧即可快读跳转右侧。

这个大纲每个文件都要单独开启很麻烦,
2019-04-16 16:57
liuxmoo

liuxmoo

3.文档系统支持
光标放到api处,按下F1,可直接在右侧打开对应的帮助文档,不用切屏,边看文档边改代码,见下图: 这个并不支持


常用代码块/自定义代码块
敲v,在拉出的代码助手列表里可以看到大量vue代码块。你也可以在工具-代码块设置-vue代码块里自己添加更多代码块。 这个 vda 也不支持
2019-04-16 16:48
619033043@qq.com

619033043@qq.com

我用hbuilderX创建的vue项目找不到项目的配置文件,比如我要配置json-server 服务 无法配置
2019-04-03 14:19
2303232652@qq.com

2303232652@qq.com

回复 2303232652@qq.com:
其实创建vue项目之后缺少一些包比如node_modules之类的
2019-03-15 14:16
2303232652@qq.com

2303232652@qq.com

对vue的支持还需要改进,我vue环境装好之后,在创建vue项目npm run dev 运行不了
2019-03-15 14:15
芦苇

芦苇

没有stylus提示我要死了……自己敲完所有代码
2018-12-28 08:58
DCloud_heavensoft

DCloud_heavensoft

回复 cowmax@qq.com:
支持
2018-12-06 00:21
cowmax@qq.com

cowmax@qq.com

回复 DCloud_heavensoft:
请问scss呢?element-ui的样式是scss写的;另外,如果我开启显示文档结构时(便于template-style之间切换),文档结构会经常刷新,刷新会占用cpu,有没有什么好的办法减少刷新频率呢?
2018-12-05 21:46
DCloud_heavensoft

DCloud_heavensoft

回复 cowmax@qq.com:
less支持
2018-12-05 07:17
cowmax@qq.com

cowmax@qq.com

回复 DCloud_heavensoft:
囧,那我只有硬写css了;那less这些支持提示不呢?
2018-12-04 23:52
DCloud_heavensoft

DCloud_heavensoft

回复 cowmax@qq.com:
stylus目前不支持提示
2018-12-04 01:14
cowmax@qq.com

cowmax@qq.com

我在vue文件里设置了<style scoped lang="stylus">,但是后面写的代码没有css样式的提示呢?需要怎么设置吗?
2018-12-03 21:50
你猜猜我是谁

你猜猜我是谁

啥时候支持react
2018-11-23 13:46
DCloud_heavensoft

DCloud_heavensoft

回复 Jonny515688:
HBuilderX中使用vue,如果是打开vue文件,会自动挂载vue语法库。
如果是HTML文件里引用vue框架,需要点右下角的语法提示库,选择vue语法库。
2018-10-22 09:20
eachann

eachann

回复 DCloud_heavensoft:
文档写的不够详细呀 :class @xxx :xxxx 这些能不能做个支持呀 vue最常用的就是这个了
2018-10-19 09:47
284488480@qq.com

284488480@qq.com

回复 2414887550@qq.com:
''替换成``
2018-09-30 11:07
2414887550@qq.com

2414887550@qq.com

我发现有个bug,就是template:'<div><div>{{msg}}</div><button @click = 'changerHanlder'>改变</button></div>', template单引号里面的内容如果换行的话就会报错:Uncaught SyntaxError: Invalid or unexpected token
2018-09-28 17:27