1.1 开发工具
uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：
- 模板丰富
- 完善的智能提示
- 一键运行
当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、
记事本... 等自己喜欢的编辑器！
1.1.1 下载 HBuilderX
- 访问 HBuilderX 的官网首页 www.dcloud.io/hbuilderx.h…
- 点击首页的
DOWNLOAD按钮
1.1.2 安装 HBuilderX
- 将下载的
zip包进行解压缩 - 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
- 双击
HBuilderX.exe即可启动 HBuilderX
1.1.3 安装 scss/sass 编译
为了方便编写样式（例如：<style lang="scss"></style>），建议安装 scss/sass 编译 插件。插件下载地址：
进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：
1.2 新建 uni-app 项目
-
文件 -> 新建 -> 项目
-
填写项目基本信息
-
项目创建成功
1.3 目录结构
一个 uni-app 项目，默认包含如下目录及文件：
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
复制代码1.4 把项目运行到微信开发者工具
-
填写自己的微信小程序的 AppID：
-
在 HBuilderX 中，配置“微信开发者工具”的安装路径：
-
在微信开发者工具中，通过
设置 -> 安全设置面板，开启“微信开发者工具”的服务端口：
-
在 HBuilderX 中，点击菜单栏中的
运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试： -
初次运行成功之后的项目效果：
- 未能成功加载source map
- shift+鼠标右键
添加到git
# 创建本地仓库
git init
#查看更改的文件信息
git status
# 将文件添加到暂存区
git add 文件
# 提交历史记录
git commit "提交日志"
# 第一次使用git需要配置会提示配置用户，配置用户一下两行代码，（只需要配置一次）,username是你的git账号,email是你的git邮箱
git config --global user.name 'username'
git config --global user.email 'email'
# 添加远端仓库地址
git remote add origin 你的远程仓库地址
# 推送提交
git push -u origin master
复制代码
复制代码这里直接在码云里同步
如果之后项目代码有了变动需要提交：
#查看更改的文件信息
git status
添加文件到缓存区（会覆盖之前的项目文件）
git add .
# 提交历史记录和描述信息
git commit -m '描述信息'
# 推到git上
git push
复制代码开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情