uni | 您所在的位置:网站首页 › hbuilder创建vue的hello › uni |
1.HBuilderX下载与安装 2.新建 uni-app 项目并运行到微信开发者工具 3.uni-app项目结构说明 4.HBuilderX常用操作 1.HBuilderX下载与安装uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。 主要好处: 模板丰富 完善的智能提示 一键运行 当然,依然可以根据自己的喜好,选择使用 VS Code、Sublime、记事本… 等自己喜欢的编辑器! HBuilder下载: 进入官方首页:HBuilderX 的官网,点击首页的 DOWNLOAD 进行下载,下载完成后解压自定义安装即可,操作很简单这里不再重述. 源码视图下可以添加如下配置信息: { "editor.colorScheme": "Default", "editor.fontSize": 12, "editor.fontFamily": "Consolas", "editor.fontFmyCHS": "微软雅黑 Light", "editor.insertSpaces": true, "editor.lineHeight": "1.5", "editor.minimap.enabled": false, "editor.mouseWheelZoom": true, "editor.onlyHighlightWord": false, "editor.tabSize": 2, "editor.wordWrap": true, "explorer.iconTheme": "vs-seti", "editor.codeassist.px2rem.enabel": false, "editor.codeassist.px2upx.enabel": false } 2.新建 uni-app 项目并运行到微信开发者工具 HBuilderX中选择:文件—新建—项目—创建项目名,项目详情信息创建步骤参考下图: 项目目录结构: ┌─components uni-app组件目录 │ └─comp-a.vue 可复用的a组件 ├─pages 业务页面文件存放的目录 │ ├─index │ │ └─index.vue index页面 │ └─list │ └─list.vue list页面 ├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此 ├─main.js Vue初始化入口文件 ├─App.vue 应用配置,用来配置小程序的全局样式、生命周期函数等 ├─manifest.json 配置应用名称、appid、logo、版本等打包信息 ├─pages.json 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息 └─package.json 配置项目描述信息,作者信息App.vue中配置生命周期 常用的生命周期: onLaunch:初始化操作,项目启动只加载一次; onShow:项目启动或是从后台进入到前台; onHide:从前台进入到后台; 以上三个常用于export default进行导出声明.关于生命周期更多方法可以看下官方连接: https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle main.js 主要作用:初始化vue实例、导入常用的插件(如网络请求http)、存储全局变量. pages.json 常见的配置项如下: 项目中全局搜索关键字: Ctrl+alt+f全局搜索文件: Ctrl+p复制当前行到下一行: Ctrl+shift+r删除当前行: Ctrl+d将属性值添加单引号: 选中属性值之后按Ctrl+引号点击函数名跳转到函数实现代码: alt+鼠标左键注意:仅能对调用函数名以及函数实现代码在同一页面进行跳转.也支持导入文件跳转指定的页面. Hbuilder同时打开多个项目 选中项目,右键选择新窗口打开Hbuilder中所有的快捷键可以从配置中进行查找,查找路径:工具–自定义快捷键,可以直接根据关键词进行搜索并且可以根据自定义修改快捷键. 确认HBuilder X是关闭状态, 找到 HBuilder X 安装的根目录下 的reset.bat文件,点击运行。 提示 “ 确认清除HBuilder X的所有配置吗? 按任意键回车继续,或输入N回车退出… ”, 随便输入一个字母按回车,重置HBuilder X,可以解决代码不能自动补全的问题。 |
CopyRight 2018-2019 实验室设备网 版权所有 |