用vsCode写uniapp项目

iaz999

已于 2023-05-29 17:50:05 修改

阅读量5.5k

点赞数 2

分类专栏：开发文章标签： uni-app

于 2023-05-27 17:45:10 首次发布

本文链接：https://blog.youkuaiyun.com/iaz999/article/details/130902138

版权

本文详细介绍了如何在VSCode中设置和优化uni-app项目开发环境，包括创建uniapp项目、安装插件实现语法提示、路径提示、组件提示，以及解决scss兼容问题。此外，还讲解了一键创建页面、使用uni-ui和运行发布项目的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

局部安装了vue2和vue3

切换到安装目录下，打开powershell查看版本

 .\node_modules\.bin\vue -V

1、创建uniapp项目

vue create -p dcloudio/uni-preset-vue v2-uniapp

page.json和manifest.json关联到jsonc

"files.associations": { //   文件关联
    "*.art": "html",
	"pages.json": "jsonc",
	"manifest.json": "jsonc"
},

2、语法提示

安装uni-app-schemas插件

3、路径提示

安装path-intellisense插件

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iaz999

关注关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

如何直接使用VSCode中开发Uni-app：`uniapp run`插件的使用教程无需启动HBuilderX了!

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

04-08

334

于是，我就开始寻找替代方案，想着是不是能在我熟悉的VSCode里开发Uni-app。VSCode的插件多，功能强大，简直是我工作中必不可少的ide了. 可一转到Uni-app的开发，就得跳到HBuilderX，搞得我每天都得切换开发环境。如果你也像我一样，对HBuilderX不太感冒，或者你也想在熟悉的VSCode中开发Uni-app项目，不妨试试这个插件。当然，这个插件也不是完美无缺，偶尔也会遇到一些小问题，比如与HBuilderX或微信开发者工具的兼容性问题，但大多数时候，它都能很好地工作。

使用vscode开发uniapp的的插件uni-create-view

preserveXing的博客

07-13

645

使用vscode开发uniapp的的插件uni-create-view对插件的使用和配置调整

2 条评论您还未登录，请先登录后发表或查看评论

如何搭建一个适配微信小程序，h5，app的uni-app项目

热门推荐

黑客与画家

05-26

3万+

cli工程全局安装vue-cli npm install -g @vue/cli 通过cli创建uni-app项目 vue create -p dcloudio/uni-preset-vue uni-app 选择项目模板，可自由选择如下图：创建uni-项目使用vscode打开创建的项目安装vue语法提示插件 cli工程自带uni-app&5+app语法提示安装组件语法提示 npm i @dcloudio/uni-helper-json 从 git 下载 uni-app 代码块

使用VScode开发uni-app

2301_79232648的博客

01-22

2367

使用VScode开发uni-app

vscode构建uniapp引入uView

skdjbd的博客

09-20

856

这两行需要添加在 import Vue 之后。

【JavaScript源代码】使用vscode 开发uniapp的方法.docx

12-29

在使用Visual Studio Code (VSCode) 开发UniApp项目时，有一些关键的步骤和配置能够提升开发效率。首先，UniApp是一个基于Vue.js的多端开发框架，它允许开发者编写一次代码，部署到多个平台，如H5、微信小程序、...

VSCode 配置uni-app的方法

11-20

用VSCode打开刚刚创建的uni-app项目。 4. 安装Vue语法提示插件：在VSCode中，可以通过市场搜索并安装Vue相关的语法提示插件，以增强代码补全和提示功能。 5. 安装uni-app组件语法提示：在项目根目录下，执行...

用 VS Code 和Hbuilder 开发 uni-app 项目

y516369的博客

08-02

1025

用 VS Code 和Hbuilder 开发 uni-app 项目

vscode开发uniapp项目教程

前端很杂，故名前端杂货铺 —— coderkey

08-29

1670

vscode如何开发uniapp项目？搭梯子在创建或者连手机网络创建，按官方提示的下载模板也行。导入项目之后，再安装开发所需要的插件。在HB编辑器中安装vue3插件。

uniapp项目实践第二章：使用vscode开发uniapp项目

jakelihua

08-16

4149

uniapp项目实践第二章：使用vscode开发uniapp项目

用VSCode开发uni-app项目

m0_63596578的博客

03-16

2497

用VSCode开发uni-app项目

vscode 创建 uniapp 项目

MRD

08-13

2938

vscode 创建 uniapp 项目

【VS Code】一文搞定！在VS Code等ide中开发运行UniApp项目的完整指南

VT_馒头的博客

02-10

9653

UniApp作为"一次开发，多端运行"的跨平台框架，配合微软的VS Code这个轻量级编辑器，堪称开发效率神器组合。相比HBuilderX，VS Code拥有更丰富的插件生态和自由的配置空间，特别适合已经熟悉前端开发的程序员。同时，UniApp使用Vue相关的语法进行开发，这对于前端开发工程师来说，并不需要太多的学习成本，上手难度较低。但是如果还需要学习配套的HBuilderX工具来开发的话，那么就会产生较大的学习成本了。为了达到降本增效的目的，能够直接在VS Code中进行开发就显得尤为重要。

如何使用 vscode 开发 uniapp

weixin_42178050的博客

12-09

3647

如何使用vscode 开发 uniapp 项目

Vscode 构建 uniapp vue3 + ts 微信小程序项目

qq_38074398的博客

12-11

2943

为什么要使用 Vscode 来开发构建 uniapp 项目？从个人角度来讲，仅是想要 Vscode 丰富的插件生态，以及最重要的优秀的 TtypeScript 类型检查支持，因为本人是 TS 重度使用者。如果你可以更习惯使用 js 进行开发，使用 HBuilderX 要比 Vscode 更加方便。注：后面的操作，皆以微信小程序为例。

vscode创建uniapp项目

01-09

### 如何在 VSCode 中创建 UniApp 项目为了在 Visual Studio Code (VSCode) 中创建并运行 UniApp 项目，可以遵循以下方法： #### 使用 Vue CLI 创建 UniApp 项目通过全局安装 `@vue/cli` 和特定预设来初始化新项目是一个常见做法。 ```bash npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue my-uni-app ``` 这段命令会基于 DCloud 的官方模板建立一个新的 UniApp 应用程序[^4]。 #### 配置开发环境确保已经安装了必要的依赖项如 Node.js 及其包管理器 NPM 或 Yarn。对于后者，可以通过如下指令完成全局安装： ```bash npm install -g yarn ``` 验证安装是否成功的办法是在终端输入 `yarn -v` 来查看版本号。 #### 扩展功能支持考虑到 VSCode 是一款高度可定制化的编辑器，在处理 UniApp 工程时建议添加一些插件增强体验，比如 Vetur 提供语法高亮等功能；另外也可以考虑集成 uni-helper 插件辅助调试[^3]。 #### 构建与运行应用当一切准备就绪后，进入项目的根文件夹并通过下面的命令启动本地服务器进行测试： ```bash cd my-uni-app npm run serve ``` 这将会编译源码并且开启一个热重载的服务端口用于即时预览更改效果[^1]。