vscode运行uniapp项目,vscode创建uniapp

　　Uni-app是一个使用Vue.js开发所有前端应用的框架。今天通过这篇文章，给大家分享一下用VSCode开发UNI-APP的配置教程，以及插件的建议和注意事项。感兴趣的朋友来看看吧。

写在前面

　　Uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到iOS、Android、H5，以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等平台。开发UNI-APP最好的工具是HbuilderX，但它不是一个巴掌拍不响的东西。为什么要用VsCode开发UNI-APP？官方称HBuilderX是专门为Vue设计的编辑器，那么非Vue呢？这个时候我们又要选择其他产品，那么为什么不把UNI-APP转到其他产品上去开发呢？所以从统一编辑器的角度来说，最近选择了VsCode。

　　HBuildex可能是开发UNI-APP最好的工具，但不是最全面的工具。

　　在使用vscode开发uni-app之前，建议先阅读一下UNI-APP遇到VS Code时的官方指南。当然，后面我会再次强调一些重要的步骤。以及官方教程vue-cli开发uni-app教程。

注意事项

　　VsCode开发的UNI-APP只能充当编辑器，程序调试必须在相应的环境下进行。比如微信小程序，只能在微信开发者工具里调试(这个和HX一样)。

　　在VsCode中，可以使用npm命令运行打包，但是不能直接调用真机模拟器，也不能使用APP打包等功能。如果需要这样，只能在VSCode环境下编辑代码，通过HX打包。

开发环境搭建

　　1.全局安装Vue-cli 3.x(如果已安装，请跳过)

　　npm安装-g @vue/cli

　　建议使用cnpm安装淘宝镜像。

　　cnpm安装-g @vue/cli

　　2.通过CLI创建uni-app项目

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

　　3.用VsCode打开项目

　　4.安装Vue语法提示插件。

　　在Vscode插件市场安装语法提示插件。下面是一些实用的插件。

　　Vetvue语法提示插件

　　Vue-helper是另一个Vue语法插件，与Vetur结合使用。

　　自动关闭标签标签自动关闭插件在使用外部组件时非常有用。

　　当您需要更改标签名称时，自动重命名标签标签重命名插件非常有用。

　　突出显示匹配的标签突出显示选定的标签，并快速定位标签的开始和结束位置。

　　Todhighlight突出显示代码中的待办事项

　　将待办事项树与待办事项高亮相结合，构建体验更完美的待办事项管理系统。

　　KoroFileHeader快速生成头注释和代码注释。

　　5.安装UNI-APP的语法提示

　　npm i @dcloudio/uni-helper-json

　　6.导入HX自定义代码块

　　从github下载uni-app代码块，并把它放在。项目目录下的vscode目录与HBuilderX具有相同的代码块。

　　如果没有. vscode，请在项目的根目录中创建它。

　　同时，您可以定制您的公共代码块。

　　7.运行发布项目。

　　使用运行发布项目，可以通过VSCode左侧的资源管理器/NPM脚本快速启动该命令。

　　运行项目

　　npm运行开发：%PLATFORM%

　　发布项目

　　npm运行版本：%PLATFORM%

　　%PLATFORM%的值如下：

　　价值

　　平台

　　MP-支付宝

　　支付宝小程序

　　MP-百度

　　百度小程序

　　MP-微信

　　微信迷你程序

　　MP-头条

　　标题小程序

　　mp-qq qq

　　小程序；迷你程序

　　要发布APP，只能通过HX操作。

开发配置注意事项

　　1.通常，当在HX创建新页面时，它会自动在pages.json中注册相同的页面。在VsCode中，页面路由需要自注册。

　　pages: [

　　{

　　路径:页面/主页/主页

　　}

　　]

　　发布注意事项：在HX发布时提供了可视化的配置界面，VSCode中的发布配置需要在manifest.json中配置，微信小程序appid的配置和H5打包路径的配置如下图。

　　//manifest.json需要以JSONC格式打开。

　　 Mp-weixin: {/*微信小程序唯一且相关*/

　　Appid: your_wx_apid ，/*微信appid */

　　正在设置:{

　　 UrlCheck: false /*检查安全域名和TLS版本*/

　　 UsingComponents: true /*是否要启动自定义组件模式*/

　　H5: {/* H5相关*/

　　路由器:{

　　base :/basePath//* item basePath */

　　Domain: your_domin ，/*域名*/

　　优化:{

　　摇树 :

　　 Enable: true /*是否要启动树优化*/

　　}

　　有关更多配置，请参见uni-app配置项目列表。

　　3.可以在APP.vue样式标签中引入全局CSS文件。SCSS文件只能引入uni.scss文件中，然后才能在其他页面中使用。

　　//APP.vue

　　样式lang=scss

　　/*每个页面的通用CSS */

　　@导入url(。/common/icon font . CSS )；

　　/风格

　　//uni.scss

　　@ import uview-ui/theme . scss ；

　　配置easycom规则

　　关于easycom的规则素养的文章见easycom模式，开发调用UNI-APP组件时必须掌握的实用技巧！

　　Easycom规则在pages.json文件中配置。自定义配置的示例如下

　　//pages.json

　　easycom :

　　我的-(。*): @/my-ui-components/my-$ 1 . vue

　　pages:[.]

　　描述：对所有人应用easycom规则。my-ui-components目录下前缀为my-的vue文件。(为了便于理解，您可以将$1看作一个占位符或通配符)

　　关于VSCode开发UNI-APP的配置教程和插件，本文到此结束。有关VSCode development UNI-APP的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录

写在前面

注意事项

开发环境搭建

开发配置注意事项

相关文章阅读