客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
写在前面uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 开发UNI-APP最好的工具是HbuilderX,但这并不打脸为什么要在VsCode中开发UNI-APP，用官方的话来说HBuilderX是专为Vue打造的编辑器，那么非Vue又该怎么办呢？这时就不得不对选择其它产品，那么为什么不将UNI-APP也转移到其它产品上开发呢？因此从统一编辑器的角度出发，最近选择了VsCode。
注意事项
开发环境搭建1. 全局安装Vue-cli 3.x (如已安装请跳过)
安装了淘宝镜像的推荐使用cnpm安装
2. 通过 CLI 创建 uni-app 项目
3. 使用VsCode 打开项目 4. 安装Vue 语法提示插件 在Vscode 插件市场安装语法提示插件，这里推荐几个实用插件
5. 安装UNI-APP语法提示
6. 导入HX自定义代码块 从github 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。
同时可以自定义自己常用的代码块 7. 运行&发布项目 运行项目
发布项目
%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 内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！
请发表评论