如何使用Vscode开发Uni-app项目以及注意事项详解

这篇具有很好参考价值的文章主要介绍了如何使用Vscode开发Uni-app项目以及注意事项详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

哟,大牛来了!!!
如何使用Vscode开发Uni-app项目以及注意事项详解

前言:想必大家敲代码用的编辑器大多数都是Vscode吧,随着技术的更新,uni-app成为了前端不可或缺的一项技术,但是呢,官方推荐使用的HBuilderX编辑器让习惯了使用Vscode的我们不太习惯,虽然HBuilderX编辑器对uni-app极度的友好,但还是让在座的各位大牛以及未来的大牛不适应,接下来就为大家讲解如何使用Vscode开发uniapp项目。

既然大家都搜索这个了,那创建uniapp项目这一步我就省略了,想知道怎么创建的小伙伴可以去这里查看点我去往属于uniapp的乐园(小tips: 需要注意的是uniapp创建项目需要vue-cli脚手架,要么就是用HBuilderX可视化创建,不过我们需要用的是vue-cli创建)

一、准备工具

    我们需要准备两个东西,第一个自然就是Vscode,第二个就是微信开发者工具点我去下载地址(小tips:选择稳定版然后选择你的系统就好了,如果你的项目需要什么最新特性的话就选择开发版,不过可能不稳定)

二、更改一下项目配置文件
    安装好了之后呢我们用Vscode打开uniapp的项目后接下来就是重点了。
    首先我们先把package.json文件夹中的启动方式和打包方式更改一下,像这样:
如何使用Vscode开发Uni-app项目以及注意事项详解
这个时候我相信大家开发过小程序应该都有小程序的测试号吧,没有的话得去申请一个(点我去申请测试号),拥有了测试号后我们在src目录下找到一个名为manifest.json的文件将里面的appid修改为你的测试号的Appid( 不知道自己测试号是啥的进这里 用微信扫码进去后就能看见你的测试号ID了,基本就是wx********什么什么的)

做完上面的事情后我们调出终端启动一下:
如何使用Vscode开发Uni-app项目以及注意事项详解

启动完毕后呢目录中会出现一个dist打包文件
如何使用Vscode开发Uni-app项目以及注意事项详解

三、渲染效果

打开微信开发者工具选择dist打包文件里面的mp-weixin文件给她导入进去

如何使用Vscode开发Uni-app项目以及注意事项详解
然后就能在微信开发者工具里面看见你的uniapp项目长啥样了

到了这一步你就可以在Vscode里面写你的uniapp项目了( 小tips:微信开发者工具的热重载得开启,不然Vscode代码保存了微信开发者工具还得手动编译才能获取最新页面)

按照以上的步骤来就能用Vscode开发你的uniapp小程序了,如果有什么问题可以在评论里面说一说。文章来源地址https://www.toymoban.com/news/detail-448155.html

到了这里,关于如何使用Vscode开发Uni-app项目以及注意事项详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序-uni-app:uni-app-base项目基础配置及使用/uni-app+vue3+ts+vite+vscode

    目前(20230605)uni-app最新版本(3.8.4.20230531) 一、官网文档 微信开放文档 uni-app官网 二、创建项目 项目目标:vue3+ts+vite+vscode 创建以 typescript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板) npx degit dcloudio/uni-preset-vue#vite-ts uniapp-base ​ 本文创建成功 ​ 为了验

    2024年02月15日
    浏览(31)
  • 小程序-uni-app:uni-app-base项目基础配置及使用 / uni-app+vue3+ts+vite+vscode

    目前(20230605)uni-app最新版本(3.8.4.20230531) 一、官网文档 微信开放文档 uni-app官网 二、创建项目 项目目标:vue3+ts+vite+vscode 创建以 typescript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板) npx degit dcloudio/uni-preset-vue#vite-ts uniapp-base ​ 本文创建成功 ​ 为了验

    2024年02月05日
    浏览(37)
  • 前端-vscode中开发uni-app

    node -v npm install @vue/ cli@4.5.15 -g 指定版本号:4.5.15 在自己电脑目录下创建项目: demo02是自己项目名字 在D/AllCode/vs_vue2_uniapp目录下执行一下命令: vue create -p dcloudio/uni-preset-vue demo02 要想在vscode执行npm命令 我们打开pages.json和manifest.json,发现会报红,这是因为在json中是不能写注

    2024年01月18日
    浏览(42)
  • 跨平台应用开发进阶(六十二):如何把 uni-app APP项目转换成小程序

    随着移动互联网的快速发展,移动应用已成为生活中不可或缺的一部分。与此同时,跨平台开发也得到越来越多的关注,因为它可以提高应用程序的效率并降低开发成本。 uni-app 是一种跨平台开发框架,基于 Vue.js ,并且可以在多个平台如微信小程序、支付宝小程序、H5等上运

    2024年02月15日
    浏览(26)
  • 学会用命令行创建uni-app项目并用vscode开放项目

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 创建 uni-app 项目 命令行创建 uni-app 项目 编译和运行 uni-app 项目: 用 VS Code 开发 uni-app 项目 (不必依赖 HBuilderX) vue3+ts版: npx degit dcloudio/uni-preset-vue#vite-ts 项目名称 官网

    2024年02月09日
    浏览(17)
  • 使用vue2开发uni-app项目--引入uview-ui

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、安装 1、安装uview-ui 2、安装scss支持 二、配置 1、在main.js中引入uView库 2、uni.scss文件中引入uView的全局SCSS主题文件  3、在APP.vue文件中引入uView基础样式 4、在pages.json中 配置easycom组件模式

    2024年02月04日
    浏览(32)
  • 这可能是最好、最详细的VSCode开发uni-app教程吧

    我们将使用VSCode写 uni-app ,不同于 Hbuilder X ,用VSCode是通过脚手架来创建项目,为什么我要用VSCode写呢?可能还是不太习惯 Hbuilder X 等等原因,还有就是不想换开发工具,觉得开发前端一个VSCode就够了,也不用去比较两者谁好谁坏,自己喜欢哪个用哪个,这里就不过多赘述了

    2024年02月02日
    浏览(24)
  • 【uni-app项目如何引入 uView组件库】

    uView官方文档 第一步: 在公司创建完成uniapp项目后引入uView 第二步: 您如果是使用HBuilder X创建的uniapp项目,使用uView组件库的话需要在HBuilder X下载插件库 下载 uni_modules ,(如果这个看不懂可以看官方文档) (1) HBuilder X插件库中下载 uni_modules 现在是已经将 uView导入到项目中了

    2024年02月05日
    浏览(23)
  • uni-app 配置 以及 使用微信云函数

    aiwendnagphonenumber.getPhoneNumber | 微信开放文档     获取手机号方法 云调用 | 微信开放文档   云调用教程文档 该博客只提供配置流程   不解释细节  其实我也不太明白 如果要使用云函数 必须满足一下条件 1. 在项目根目录中创建一个文件 用于存放 云函数文件(我这里创建了

    2024年02月09日
    浏览(19)
  • uni-app 开发调试自动打开手机屏幕大小界面(Aidex移动端开发项目)

    上效果: 下载Aidex的移动端项目并打开: 若依-ruoyi-AiDex-Uniapp: 若依-Ruoyi APP 移动解决方案,基于uniapp+uView封装的一套基础模版,开箱即用,免费开源,一份代码多终端适配,支持H5、支付宝小程序、微信小程序、APP,实现了与ruoyi-vue后台完美对接的移动解决方案,可直接开始

    2024年02月22日
    浏览(23)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包