VSCode开发UNI-APP配置教程及插件flutter uniapp 哪个好
⽬录
写在前⾯
注意事项
开发环境搭建
开发配置注意事项
写在前⾯
uni-app 是⼀个使⽤ Vue.js 开发所有前端应⽤的框架，开发者编写⼀套代码，可发布到iOS、Android、H5、以及各种⼩程序（/⽀付宝/百度/头条/QQ/钉钉/淘宝）、快应⽤等多个平台。开发UNI-APP最好的⼯具是HbuilderX，但这并不打脸为什么要在VsCode中开发UNI-APP，⽤官⽅的话来说HBuilderX是专为Vue打造的编辑器，那么⾮Vue⼜该怎么办呢？这时就不得不对选择其它产品，那么为什么不将UNI-APP也转移到其它产品上开发呢？因此从统⼀编辑器的⾓度出发，最近选择了VsCode。
HBuildex 或许是开发UNI-APP最好的⼯具，但却不是最全⾯的⼯具。
在使⽤VS Code开发UNI-APP之前，墙裂建议先阅读官⽅的指南当uni-app 遇见 vscode当然后⽂我会对⼀些重要的步骤再次强调。以及官⽅教程vue-cli 开发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⾃定义代码块
从下载 uni-app 代码块，放到项⽬⽬录下的 .vscode ⽬录即可拥有和 HBuilderX ⼀样的代码块。
若没有.vscode则⾃⾏在项⽬根⽬录下新建
同时可以⾃定义⾃⼰常⽤的代码块
7. 运⾏&发布项⽬
运⾏与发布项⽬可通过VSCode 左侧资源管理器/ NPM脚本快速启动命令
运⾏项⽬
npm run dev:%PLATFORM%发布项⽬
npm run build:%PLATFORM% %PLATFORM% 可取值如下：
值平台
h5H5
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  /* 是否启动摇树优化 */
}
}
}
其它更多配置请参见
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规则在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 内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。