如何使用vscode来开发uni-app

已于 2022-05-24 19:11:16 修改
阅读量3.4k 收藏 1
点赞数 1
文章标签： vscode ide visual studio code
于 2022-01-08 19:28:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wuguidian1114/article/details/122384930
版权

其实总的来说还是无法完全脱离HBuilder X的，但是因为一直使用vs code开发习惯了 使用HBuilder X真的很不上手 所以我们可以使用这个方法

  1. 使用 HBuilder X 运行项目，将它运行到你想要的平台 
  2. 使用 VsCode 打开要开发的项目
  3. 在 VSCode 中安装插件：
    1. uni-helper
    2. uni-app-snippets
    3. uni-app-schemas
    4. uni-ui-snippets
  4. 最后只要在vscode中进行代码的开发就好了 保存文件后会自动运行

补充：使用cli创建项目就可以直接在vscode，不过最近开发了一段时间以后发现开发uniapp还是用hbuilder比较方便，这个各有各的看法，大家根据自己的喜好来就可

如何直接使用VSCode中开发Uni-app：`uniapp run`插件的使用教程 无需启动HBuilderX了!
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
04-08 405
于是，我就开始寻找替代方案，想着是不是能在我熟悉的VSCode里开发Uni-app。VSCode的插件多，功能强大，简直是我工作中必不可少的ide了. 可一转到Uni-app的开发，就得跳到HBuilderX，搞得我每天都得切换开发环境。如果你也像我一样，对HBuilderX不太感冒，或者你也想在熟悉的VSCode中开发Uni-app项目，不妨试试这个插件。当然，这个插件也不是完美无缺，偶尔也会遇到一些小问题，比如与HBuilderX或微信开发者工具的兼容性问题，但大多数时候，它都能很好地工作。
【VS Code】一文搞定！在VS Code等ide中开发运行UniApp项目的完整指南
VT_馒头的博客
02-10 9954
UniApp作为"一次开发，多端运行"的跨平台框架，配合微软的VS Code这个轻量级编辑器，堪称开发效率神器组合。相比HBuilderX，VS Code拥有更丰富的插件生态和自由的配置空间，特别适合已经熟悉前端开发的程序员。 同时，UniApp使用Vue相关的语法进行开发，这对于前端开发工程师来说，并不需要太多的学习成本，上手难度较低。但是如果还需要学习配套的HBuilderX工具来开发的话，那么就会产生较大的学习成本了。为了达到降本增效的目的，能够直接在VS Code中进行开发就显得尤为重要。
用vsCode写uniapp项目
iaz999的博客
05-27 5541
局部安装了vue2和vue3切换到安装目录下，打开powershell查看版本。
用 VS Code 开发 uni-app 项目
phi1111的博客
08-30 1265
这一步处理很关键，否则 TS 项目无法校验组件属性类型。
用VSCode开发uni-app项目
m0_63596578的博客
03-16 2501
用VSCode开发uni-app项目
使用VScode开发uni-app
2301_79232648的博客
01-22 2372
使用VScode开发uni-app
用 VS Code 和Hbuilder 开发 uni-app 项目
y516369的博客
08-02 1032
用 VS Code 和Hbuilder 开发 uni-app 项目
VSCode 配置uni-app的方法
10-15
总结一下，配置VSCode开发uni-app的关键步骤包括： 1. 全局安装Vue CLI。 2. 使用Vue CLI创建uni-app项目。 3. 在VSCode中安装相关插件，如Vetur和@dcloudio/uni-helper-json。 4. 安装和配置SCSS支持。 5. 运行和...
关于vscode开发uni-app中依赖@uni-helper/uni-app-types的配置 “vueCompilerOptions“不允许属性 nativeTags问题解决
qq_45937792的博客
05-29 6817
vscode开发uniapp+vue3+ts使用@uni-helper/uni-app-types时tsconfig.json中的 "vueCompilerOptions"属性配置问题
用vsCode开发uni-app(vue + ts)项目流程
阿超的博客
05-04 4179
如果我们需要创建一个uniapp的 vue3 + ts 项目可以使用HBuilder工具，但该工具不能识别ts的类型声明错误，所以我们用vsCode工具来创建项目。
uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新
wocwin的博客
05-16 7595
uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新；解决Vs Code 出现`类型“{ class: string; }”的参数不能赋给类型`错误
用VScode搭建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
ycmy2017的博客
03-21 1983
vscode，uni-app，微信小程序
uniapp项目实践第二章：使用vscode开发uniapp项目
jakelihua
08-16 4151
uniapp项目实践第二章：使用vscode开发uniapp项目
在vscode中创建并运行uni-app项目
m0_62023847的博客
06-16 2610
创建uni-app项目 如果您创建过程中出现以下错误： 那么请将克隆到你喜欢的文件夹下 ：uni-preset-vue 将改成你刚才下载的模板的绝对地址进行创建即可； 当您的项目出现上图时，那就已经可以创建了，根据你的条件创建项目即可，我选择的是默认模板； 只用了这几个，如果还有别的好用的话，欢迎推荐该文如果能帮到你，是我的荣幸...
vscode开发uniapp项目教程
前端很杂，故名前端杂货铺 —— coderkey
08-29 1678
vscode如何开发uniapp项目？搭梯子在创建或者连手机网络创建，按官方提示的下载模板也行。导入项目之后，再安装开发所需要的插件。在HB编辑器中安装vue3插件。
VSCode中如何开发uni-app？
weixin_49865737的博客
08-15 1万+
因为uni-app项目跟其他前端项目差异较大，我还是比较推荐为uni-app项目单独做个VSCode工作区。对于VSCode工作区概念VSCode工作区指南：回归轻量，打造全能编辑器。或者说，为每个项目单独做一个。...
使用vscode开发uniapp的的插件uni-create-view
preserveXing的博客
07-13 652
使用vscode开发uniapp的的插件uni-create-view对插件的使用和配置调整
vscode 开发 uni-app 微信小程序
最新发布
05-10
### 如何使用 VSCode 开发 Uni-app 微信小程序 #### 1. 环境准备 为了在 VSCode 中开发 Uni-app 微信小程序，需要先完成环境搭建。这包括安装 Node.js 和 npm 工具链以及初始化项目所需的依赖项。 确保已安装最新版本的 Node.js 和 npm 后，在终端执行以下命令以全局安装 `@vue/cli` 和 `@dcloudio/uni-cli` 插件： ```bash npm install -g @vue/cli @dcloudio/uni-cli ``` 接着创建一个新的 Uni-app 项目并切换至 Vue3+TS 技术栈[^2]: ```bash vue create my-uniapp-project --preset dcloudio/vue-cli-plugin-uni-preset cd my-uniapp-project ``` #### 2. 配置 VSCode 支持 由于官方推荐 HBuilderX 来开发 Uni-app 应用程序，但在 VSCode 上也可以实现完整的功能支持。为此需安装一些必要的扩展插件： - **Vetur**: 提供 Vue 文件语法高亮、智能感知等功能。 - **ESLint**: 如果项目中有 ESLint 配置，则可以用来检测代码质量。 - **Stylelint**: 对 SCSS 或 CSS 的样式文件进行静态分析。 - **Uni-helper (可选)**: 特定于 Uni-app 生态系统的辅助工具集。 进入 VSCode 扩展市场搜索以上关键词逐一安装这些插件。 #### 3. 修改构建脚本 默认情况下，HBuilderX 负责打包和预览工作流。如果改用 VSCode 则需要调整项目的 Webpack 构建流程或者采用 Vite 替代传统方式加快冷启动速度。对于后者来说可以直接修改 package.json 添加如下 script 字段[^2]: ```json { "scripts": { "dev:wx": "vite preview --target=mp-weixin" } } ``` 然后就可以通过运行下面这条指令让应用处于监听状态以便实时同步改动到目标平台上去: ```bash npm run dev:wx ``` #### 4. 整合微信开发者工具 最后一步就是把生成的内容加载进实际的小程序环境中去验证其表现是否正常。按照惯例我们仍旧需要用到微信官方提供的 IDE 并指定好对应的 AppID 号码还有其他基础设定选项等等[^3]。 当一切就绪之后便可以在本地服务器模式下保持持续连接关系使得任何源码上的改变都能迅速反映出来便于即时修正错误提高效率。 --- ### 注意事项 尽管 VSCode 是一款极其灵活强大的编辑器但它毕竟并非专为处理此类跨端框架所设计因此某些特定场景下的体验可能不及专用客户端那么流畅稳定所以建议视具体情况权衡利弊后再做决定。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值