您的位置：首页 > 编程技术 > js  >  VSCode 配置uni-app的方法

VSCode 配置uni-app的方法

 更新时间：2020年7月11日 14:41  点击：3219

CＬＩ工程全局安装vue-cli

npm install -g @vue/cli

通过cli创建uni-app项目

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

选择项目模板，可自由选择如下图：👇

使用vscode打开创建的项目

安装vue语法提示插件👇

cli工程自带uni-app&5+app语法提示

安装组件语法提示

npm i @dcloudio/uni-helper-json

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

使用scss样式

#先安装node-sass
 npm install node-sass
 #然后安装sass-loader，这里安装7.3.1版本，版本可选择性更新，因为高版本可能会报错
#使用 cnpm 会快一些
 cnpm install sass-loader@7.3.1

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM% 可选值参见package.json中的scripts

HBuilderX 工程

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

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

安装uni-app语法提示

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

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

总结

到此这篇关于VSCode 配 uni-app的文章就介绍到这了,更多相关VSCode 配 uni-app内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • vscode安装git及项目开发过程

    这篇文章主要介绍了vscode安装git及项目开发过程,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-05-19

  • Vscode上使用SQL的方法

    这篇文章主要介绍了Vscode上使用SQL的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-26

  • vscode搭建STM32开发环境的详细过程

    这篇文章主要介绍了vscode搭建STM32开发环境的详细过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-05-02

  • VSCode 配置uni-app的方法

    这篇文章主要介绍了VSCode 配置uni-app的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11

  • VSCode C++多文件编译的简单使用方法

    这篇文章主要介绍了VSCode C++多文件编译的简单使用方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-29

  • VSCode配置C#运行环境的完整步骤

    这篇文章主要给大家介绍了关于VSCode配置C#运行环境的完整步骤，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-08

  • 浅谈Vue开发人员的7个最好的VSCode扩展

    这篇文章主要介绍了浅谈Vue开发人员的7个最好的VSCode扩展，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-20

  • uni-app从安装到卸载的入门教程

    这篇文章主要介绍了uni-app从安装到卸载的入门教程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-15

  • uniapp,微信小程序中使用 MQTT的问题

    这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11

  • vscode和cmake编译多个C++文件的实现方法

    这篇文章主要介绍了vscode和cmake编译多个C++文件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-10

  • Windows配置VSCode+CMake+Ninja+Boost.Test的C++开发环境(教程详解)

    这篇文章主要介绍了Windows配置VSCode+CMake+Ninja+Boost.Test的C++开发环境,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-05-12

  • 如何使用VSCode配置Rust开发环境(Rust新手教程)

    这篇文章主要介绍了如何使用VSCode配置Rust开发环境(Rust新手教程),本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-27

  • vscode通过Remote SSH远程连接及离线配置的方法

    这篇文章主要介绍了vscode通过Remote SSH远程连接及离线配置的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-16

  • 浅谈VUE uni-app 常用API

    这篇文章主要介绍了uni-app 常用API，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-10-20

  • VSCode搭建C/C++编译环境的详细教程

    Visual Studio Code是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，这篇文章主要介绍了VSCode搭建C/C++编译环境,需要的朋友可以参考下...2020-05-15

  • VSCode 云同步扩展设置Settings Sync插件

    这篇文章主要介绍了VSCode 云同步扩展设置Settings Sync插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-29

  • 关于VSCode格式化JS自动添加或去掉分号的问题

    这篇文章主要介绍了VSCode格式化JS自动添加或去掉分号的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-10-12

  • VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)

    这篇文章主要介绍了VSCode 添加自定义注释的方法(附带红色警戒经典注释风格),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-08-28

  • 解决 VSCode 编写 C++11 代码报红问题分析

    今天在写 C++ 代码的时候用上 C++11 的特性，然后发现 VSCode 虽然可以编译通过，但是会在相应位置报红，这是怎么回事呢？下面小编给大家带来了解决方法，一起看看吧...2021-09-27

  • VSCode自定义配色方案的实现

    这篇文章主要介绍了VSCode自定义配色方案的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-29