VSCode中怎么开发uni-app

这篇文章主要介绍“VSCode中怎么开发uni-app”,在日常操作中,相信很多人在VSCode中怎么开发uni-app问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”VSCode中怎么开发uni-app”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

清河网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联建站于2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站

初始化项目

我们使用 vue2 创建工程作为示例,uni-app中Vue2版的组件库和插件也比较多,稳定、问题少,可以先参考下官方文档:工程化

既然是使用vue脚手架,那肯定要全局安装@vue/cli,已安装的可以跳过。

注意:Vue2创建的项目,脚手架版本要用@4的版本,用@5的版本运行项目会报错,这里推荐 @4.5.15

npm install -g @vue/cli

创建项目,后面是你的项目名字。

vue create -p dcloudio/uni-preset-vue uni_vue2_cli

这里我们选择默认模板

在VSCode打开这个项目,可以看看整个项目项目结构,src下项目结构跟HbuilderX创建的根目录基本一样,说明两种项目转换还是比较方便的。

提示:既然是Vue2项目,有scss文件,那肯定要装vetursass这两个插件吧,不会有人还没有装吧。

tsconfig.json报错问题

创建tsconfig.json配置文件时,VSCode会自动检测当前项目当中是否有ts文件,若没有则报错,提示用户需要创建一个ts文件后,再去使用typescript。其实即使报红,但运行项目是没有问题的,但有强迫症的人肯定受不了,不可能一直看着报错吧。

解决方案很简单,就是在项目根目录下,随便建一个ts文件,不用写任何东西,然后在tsconfig.json配置 files 这个就好了。

我们在项目根目录下新建一个puppet.ts,puppet:傀儡的意思,哈哈,这里名字可以自己随便起。

tsconfig.json

{
  "compilerOptions": {
    "types": ["@dcloudio/types", "miniprogram-api-typings", "mini-types"]
  },
  "files": ["puppet.ts"]
}

增强pages.json和manifest.json开发体验

json文件写注释

我们打开pages.jsonmanifest.json,发现会报红,这是因为在json中是不能写注释的,而在jsonc是可以写注释的。

解决方案:我们把pages.jsonmanifest.json这两个文件关联到jsonc中,然后就以写注释了。在设置中打开settings.json,添加:

千万不要把所有json文件都关联到jsonc中,你感觉在json中都能写注释了,觉得更好用了,其实不然,json就是json,jsonc就是jsonc,这两个是不一样的,例如,你在package.json写注释VSCode是不报错了,但编译的时候还是会报错的,因为package.json就是不能写注释的。

语法提示

很多人刚开始使用VSCodeuni-app时,因为pages.json没有任何语法提示,直接被劝退了,当初我也差点被劝退了,不过经过我的不懈努力,终于解决了。

其实现在VSCode已经有第三方插件提供语法提示和简单的校验了,体验也是相当的不错。

而且鼠标悬浮还有提示,相当的贴心了。

颜色块显示

VSCode在json文件是不显示像css中一样的颜色块,但有个插件可以帮我们做到。

当然,我们要对这个插件进行相关的配置,以便更好的使用。

"color-highlight.enable": true, // 开启插件
// 颜色块的样式,这里我选择了跟VSCode中css差不多样子的颜色块,自己选择喜欢的就行
"color-highlight.markerType": "dot-before", 
// 这个插件起效果的语言,这里设置只在jsonc起作用
"color-highlight.languages": ["jsonc"],
// 是否在旁边的滚条显示颜色,个人觉得不好看,关了
"color-highlight.markRuler": false,
// 是否匹配单词,如white,black
"color-highlight.matchWords": false,

一键创建页面、组件、分包

然后就是怎么快速创建页面、组件、分包,那就要推荐以下这款插件了,支持一键创建,并且添加到paegs,json中。

条件编译注释高亮

Hubilder X条件注释是有高亮的,以便区分开普通注释,在VSCode也有对应的插件可以实现,不得不说,VSCode的生态真的太好了,要啥插件都有。

这个插件可以定制化我们的注释,比如颜色加粗斜体,怎么好看怎么来。

"better-comments.tags":[
  {
    "tag": "#",
    "color": "#18b566",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": true,
    "italic": false
   },
]

API,组件,uni.scss语法提示

API语法提示

用Vue2创建的uni-app的cli项目默认是已经安装对应的Api语法提示,并且默认已经在tscongfig.json配置好了,有三个:

  • @dcloudio/typesuni语法提示

  • miniprogram-api-typings,微信小程序wx语法提示

  • mini-types,支付宝小程序my语法提示

组件提示

接下来就是组件语法提示,如