HBuilderX 之初始化uni-app项目、项目目录结构介绍及前提配置

本篇是接着上一篇HBuilder X和scss/sass的下载安装及HBuilder X的个性化配置_水w的博客-CSDN博客

目录

一、新建uni-app项目

二、项目目录结构介绍

三、配置 

3.1 把项目运行到微信开发者工具

3.2 使用Git管理项目

3.2.1 本地管理 

3.2.2 把项目托管到码云

---

一、新建uni-app项目

（1）新建一个uni-app项目，

 （2）点击“项目”之后，输入信息，

（3）点击“创建”之后，我们会发现左侧多了一栏，而且右下角会有一个提示“创建成功”。

二、项目目录结构介绍

一个 uni-app 项目，默认包含如下目录及文件：

┌─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 等页面类信息

三、配置 

3.1 把项目运行到微信开发者工具

（1）填写自己的微信小程序的 AppID，

 （2）在 HBuilderX 中，配置“微信开发者工具”的安装路径，

此处的“微信开发者路径”填写时，应该根据自己的安装路径，

 粘贴到此处，

 粘贴完成之后，关掉Settings.json文件。

（3）在微信开发者工具中，通过 设置-->安全设置 面板，开启“微信开发者工具”的服务端口，

 先打开微信开发者工具，点击“设置-->安全设置”，

 在弹出的界面里，打开“服务端口”，

 打开之后，关闭界面。

（4）在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：

底部就打开了一个东西，显示正在编译，

 等待编译完成。

 当编译完成之后，会自动地把编译结果运行到微信开发者工具，

 会自动弹出当前项目的微信开发者工具的界面。

 之后，我们就可以修改HBuilderX里面的代码，当代码修改之后，只要保存了之后就会自动编译，就能够在微信开发者工具查看最新的代码。

因此，通过HBuilderx就可以一键运行到微信开发者工具去看运行效果。

3.2 使用Git管理项目

前提：已经安装了Git。未安装的可以看这篇

 Git介绍、基本操作以及项目搭建_水w的博客-CSDN博客

3.2.1 本地管理 

（1）右击项目，新建一个自定义文件，文件名为“.gitignore”，

 （2）在“.gitignore”忽略文件下编写两个对应的忽略路径，保存。

# 忽略 node_modules 目录
/node_modules
/unpackage/dist

（3）创建一个叫做 .gitkeep 的文件进行占位，

注意：由于我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下， unpackage 目录不会被 Git 追踪。

此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位。

 创建最终的结构为

 （4）右击项目，点击“在外部资源管理器中打开”，

就会打开文件所在位置，

右击，用“Git Bash Here”打开， 

 （5）打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库，

git init

并将所有文件都加入到暂存区，

git add .

命令执行结果如下： 

（6）查看状态，可以看到还没有提交，

git status

命令执行结果如下： 

 （7）本地提交更新

git commit -m "init uni-proj1"

 命令执行结果如下： 

（8）最后，查看状态，可以看到当前处于master分支，全部文件已经提交成功，并且工作目录已经为空。

git status

命令执行结果如下： 

 到此为止，我们就成功地将uni-proj1项目，使用Git进行管理。

 3.2.2 把项目托管到码云

（1）注册并激活码云账号（ 注册页面地址：https://gitee.com/signup ）

（2）生成并配置 SSH 公钥

（3）创建空白的码云仓库

（4）把本地项目上传到码云对应的空白仓库中