首页 >开发工具 >VSCode > 正文

vscode能用uni-app吗

原创2021-09-29 17:16:010982

vscode能用uni-app,具体方法:1、安装vue语法提示插件vetur;2、执行“npm i @dcloudio/uni-helper-json”命令安装组件语法提示;3、下载并导入HBuilderX自带的uni-app代码即可。

本教程操作环境:windows7系统、Visual Studio Code1.45.1.0版,DELL G3电脑。

uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架,官方推荐的开发工具为 HBuilderX,使用起来有很好的开发体验。

不过,由于 HBuilderX 没有 Linux 版以及很多前端之前已经习惯了 vscode,不想更换编辑器。直接使用 vscode 开发 uni-app,其体验并不是很好。

其实 uni-app 和 vscode 也可以很搭,接下来为大伙带来 vscode 中 uni-app 的正确打开姿势。

CLI 工程

全局安装 vue-cli 3.x(如已安装请跳过此步骤)

npm install -g @vue/cli

通过 CLI 创建 uni-app 项目

vue create -p dcloudio/uni-preset-vue my-project

此时,会提示选择项目模板,初次体验建议选择 hello uni-app 项目模板,如下所示:

1.png

在vscode中打开项目

2.png

安装vue语法提示插件vetur

3.png

CLI 工程默认带了uni-app语法提示和5+App语法提示

4.png

5.png

安装组件语法提示

组件语法提示是uni-app的亮点,其他框架很少能提供。

npm i @dcloudio/uni-helper-json

6.png

7.png

导入 HBuilderX 自带的代码块

从 github 下载 uni-app 代码块,放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。

8.png

9.png

10.png

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM% 可取值如下:

平台
h5H5
mp-alipay支付宝小程序
mp-baidu百度小程序
mp-weixin微信小程序
mp-toutiao头条小程序
mp-qqqq 小程序

CLI 方式参考文档

HBuilderX 工程

HBuilderX 创建的工程默认不带 types 语法提示,在 vscode 中编辑的时候,可以自行安装

初始化npm(如已初始化跳过此步骤)

npm init -y

安装 uni-app 语法提示

npm i @types/uni-app @types/html5plus -D

另外,uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。

11.png

关于uni-app插件市场的插件,vscode一样可以使用。

  • 如果这些插件有npm使用方式(如uni-ui),可以用npm
  • 如果作者没提供npm方式,那么下载zip包解压也是可以用的

12.png

13.png

14.png

15.png

16.png

【相关推荐:《uniapp教程》、《vscode教程》】

以上就是vscode能用uni-app吗的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:vscode uni-app
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php怎么分割数组为几部分657
    php怎么删除指定下标的数组值824
    php怎么获取当前方法的参数值729
    推荐视频教程
  • Uniapp简爱读书项目开发--第一季Uniapp简爱读书项目开发--第一季
  • vscode其实很简单vscode其实很简单
  • Uniapp简爱读书项目开发--第二季Uniapp简爱读书项目开发--第二季
  • PHP Web开发的成长之路PHP Web开发的成长之路
  • PHP开发APP接口项目实战PHP开发APP接口项目实战
  • 搭建web网站开发环境搭建web网站开发环境
  • 视频教程分类