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 只能充当编辑器作用，程序调试必须在对应的环境中调试，比如微信小程序则只能在微信开发者工具中调试（这点和HX相同）
  • VsCode 中可以使用npm命令运行和打包，但是无法直接调用真机模拟器，也无法使用APP打包等功能，若有这方面的需求只能在VSCode 环境下编辑代码，然后通过HX打包。

开发环境搭建

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

npm install -g @vue/cli

安装了淘宝镜像的推荐使用cnpm安装

cnpm install -g @vue/cli

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

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

3. 使用VsCode 打开项目

4. 安装Vue 语法提示插件

在Vscode 插件市场安装语法提示插件，这里推荐几个实用插件

  • Vetur Vue语法提示插件
  • vue-helper 又一款Vue语法插件，和Vetur 结合使用
  • Auto Close Tag 标签自闭合插件，在使用外部组件的时候非常有用
  • Auto Rename Tag 标签重命名插件，当需要更改标签名称的时候非常有用
  • Highlight Matching Tag 高亮选中的标签，快速定位标签的首尾位置
  • TODO Highlight 高亮代码中的待办
  • Todo Tree 和 TODO Highlight 结合，构建体验更完美todo管理系统
  • koroFileHeader 快速生成头部注释和代码注释

5. 安装UNI-APP语法提示

npm i @dcloudio/uni-helper-json

6. 导入HX自定义代码块

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

若没有.vscode 则自行在项目根目录下新建

同时可以自定义自己常用的代码块

7. 运行&发布项目
运行与发布项目可通过VSCode 左侧资源管理器/ NPM脚本快速启动命令

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

值 平台
h5 H5
mp-alipay 支付宝小程序
mp-baidu 百度小程序
mp-weixin 微信小程序
mp-toutiao 头条小程序
mp-qq qq 小程序

若要发布APP则只能通过HX操作

开发配置注意事项

1.通常在HX中新建页面，会自动在pages.json中自动注册同明，同路由页面。在VsCode中页面路由需要自行注册

"pages": [
		{
			"path": "pages/home/home"
		}
	]

发行配置说明：在HX中发行时提供了可视化的配置界面，在VSCode中发行配置需自行在manifest.json中配置。下面以配置微信小程序appid 和配置H5打包路径为例说明

// manifest.json  需通过JSONC 格式打开
	"mp-weixin": { /* 微信小程序特有相关 */
		"appid": " your_wx_apid ",   /* 微信appid */
		"setting": {
			"urlCheck": false   /* 是否检查安全域名和 TLS 版本 */
		},
		"usingComponents": true  /* 是否启动自定义组件模式 */
	},

 	"h5" : {   /* H5相关 */
			"router" : {
					"base" : "/basePath/"  /* 项目basePath */
			},
			"domain" : " your_domin ",  /* 域名 */
			"optimization" : {
					"treeShaking" : {
							"enable" : true  /* 是否启动摇树优化 */
					}
			}
		}

其它更多配置请参见uni-app配置项列表

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

// APP.vue
<style lang="scss">
	/*每个页面公共css */
	@import url("./common/iconfont.css");
</style>
// uni.scss
@import 'uview-ui/theme.scss';

配置 easycom 规则

easycom 规则扫盲文章参见easycom模式，UNI-APP组件开发调用必须掌握的实用技巧！

easycom规则 在pages.json文件中配置，自定义配置实例如下

// pages.json
	"easycom": {
		"my-(.*)":"@/my-ui-components/my-$1.vue"
	},
	"pages":[...]

配置说明： 对目录my-ui-components下的所有前缀my-的.vue 文件应用easycom 规则。（因此为方便理解你可以将$1看作占位符或者通配符）

到此这篇关于VSCode开发UNI-APP 配置教程及插件的文章就介绍到这了,更多相关VSCode开发UNI-APP 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • uni-app微信小程序登录授权的实现

    微信小程序授权是非常简单和常用的功能,但为了方便,还是在此记录一下要点: 首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接口写到该事件里面去 <button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx&q

  • VSCode 配置uni-app的方法

    CLI工程全局安装vue-cli npm install -g @vue/cli 通过cli创建uni-app项目 vue create -p dcloudio/uni-preset-vue uni-app 选择项目模板,可自由选择如下图:

  • uni-app 自定义底部导航栏的实现

    这是我目前发现较好的uni-app 自定义底部导航栏方法,其他方法的缺点主要是在切换时,要么会闪烁,要么会每点击一下,都会请求一次数据.如果有其他更好的方法,欢迎评论留言,最近才开始用uni-app写项目,之前只是看了下文档. 1. tabbar 组件 <template> <view class="tabbar-container"> <view :style="{ color: currentIndex == index ? '#007EFF

  • uni-app使用countdown插件实现倒计时

    本文实例为大家分享了使用countdown插件实现倒计时的具体代码,供大家参考,具体内容如下 实现的效果如下: 这里实现的是一个活动倒计时,获取当前时间和活动开始时间,相减得出的时间差就是我们需要的倒计时.使用插件很方便. 首先新建一个项目,选择uni-app,模板选择hello-uniapp,里面有官网的组件可以直接使用.创建之后将components整个文件夹复制到自己的项目中. 在需要使用倒计时的页面引入组件 <script> import uniCountdown from '@/co

  • VSCode开发UNI-APP 配置教程及插件

    VSCode开发UNI-APP 配置教程及插件

    目录 写在前面 注意事项 开发环境搭建 开发配置注意事项 写在前面 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝).快应用等多个平台. 开发UNI-APP最好的工具是HbuilderX,但这并不打脸为什么要在VsCode中开发UNI-APP,用官方的话来说HBuilderX是专为Vue打造的编辑器,那么非Vue又该怎么办呢?这时就不得不对选择其它产品,那么为什

  • 在VsCode中搭建Go开发环境的配置教程

    现在Go1.14都已经发布好些日子了,之前发的Go环境搭建教程早已过时,只是因为时间问题一直没来得及更新 这次怀着愧疚的心情,在凌晨四点时,将这教程进行一个更新 注意:本教程最大的好处是不需要梯子. 直接在墙内可进行一切操作,文章写给纯小白的,部分Linux常识解释的过多,熟悉的人请略过 Go的安装 安装基本还是之前的老样子,不过现在的安装早已省事不少,不再需要配置环境变量.直接去官网,下载了安装包后直接安装即可 在Go中文网进行Go最新版安装包的下载(或者复制网址浏览器打开https://st

  • 使用注解开发SpringMVC详细配置教程

    1.使用注解开发SpringMVC 1.新建一个普通的maven项目,添加web支持 2.在pom.xml中导入相关依赖 SpringMVC相关 <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.2.8.RELEASE</version> </dependency&

  • 使用vscode 开发uniapp的方法

    使用vscode 开发uniapp的方法

    因为之前一直都是使用vscode开发前端项目,现在有一些小程序或者h5项目采用uniapp开发,在体验了一段时间hbuiler之后,还是觉得vscode香,以下分享我使用vscode开发的一些配置.其中包括uniapp组件语法提示,uniapp代码提示,代码自动格式化. 参考文档: https://ask.dcloud.net.cn/article/id-36286__page-2 1. 安装vetur 首先我们需要安装vscode基本的vue插件vetur,在vscode扩展程序中即可安装 2

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

    VSCode配置Rust开发环境 在商店中输入rls,选择rust,点击Quick start中的下载链接.这个Rust插件你也要记得下. 跳转后来到下载界面,点击下载. 运行下载好的exe文件,命令行输入1按下回车即可. 安装完毕后在命令行输入rustc --version,如果能输出版本号则表示安装成功. 选择一个文件夹来存放我们的hello world程序(好吧,简直是一句废话...) 记得把Formatter设成rust的. 在资源管理器那一栏,右键创建文件Cargo.toml.我们简单

  • VSCode中ESLint插件修复以及配置教程

    目录 vscode+eslint插件+配置教程 如果不好用 排查1: 如果出现后面回车符问题 排查2: 保存时好了但是一瞬间代码又回来了 排查3: 右下角是否开启eslint服务 排查4: 如果保存还是变回去了 排查5: ESLint不生效 排查6: 如果都用心走了一遍, 还不行 总结 vscode+eslint插件+配置教程 1.打开项目, 必须让Vscode左侧工作区根目录是项目文件夹, 确保根目录下(第一级)有eslintrc.js / package.json中有eslint相关配置.

  • VS Code配置Go语言开发环境的详细教程

    VS Code是微软开源的一款编辑器,插件系统十分的丰富.本文就介绍了如何使用VS Code搭建Go语言开发环境. VS Code配置Go语言开发环境 说在前面的话,Go语言是采用UTF8编码的,理论上使用任何文本编辑器都能做Go语言开发.大家可以根据自己的喜好自行选择.编辑器/IDE没有最好只有最适合. 下载与安装 VS Code官方下载地址:https://code.visualstudio.com/Download 三大主流平台都支持,请根据自己的电脑平台选择对应的安装包. 双击下载好的安

  • 使用VS Code的开发环境配置教程图文详解

    1. 下载Build Tools 打开这个页面 微软的C++生成工具下载 点下载生成工具 滚动到页面下方,找到Visual Studio 2019工具 下载Visual Studio 2019生成工具,这个工具看似和VisualStudio的安装包一样,但是不强制安装VisualStudio的编辑器 2. 安装Build Tools 还要在单个组件标签里勾选一个.NET Framework 4.8 SDK BuildTools安装完毕 3. 下载并安装VSCode VS Code的官网下载 4.

  • 最新VScode C/C++ 环境配置的详细教程

    前言 一次在VScode上配置C/C++环境的记录. 一.VScode下载及安装 VScode官网下载链接:https://code.visualstudio.com/Download 1.安装路径自行选择,例如我的安装路径为D:\Program Files\Microsoft VS Code: 2.安装完成进入VScode后按照步骤install中文插件完成汉化(此处我已完成汉化,故插件包显示"卸载",未安装情况下此处应显示"install"): 3.以同样的步骤

  • create-react-app开发常用配置教程

    目录 引言 设置代理 模块热替换(HMR) css局部化 支持装饰器写法 打包后路径问题导致页面空白 配置简化路径 按需引用antd-mobile(antd同) 打包构建分析 生产环境去掉map文件 配置less 配置不同环境变量 引言 注: 如未找到配置文件请使用npm run eject弹出配置文件 当前对应版本react 16.2 设置代理 在开发中往往是跨域请求的,配置一下请求代理可以解决这个问题 // package.json 文件 "proxy": "http:/

随机推荐