初始化 uni-app项目用于微信小程序开发 git管理

墨蓝 2024-03-24 17:36 16阅读 0赞

### 新建项目 ###

*  项目名
 *  存放路径
 *  选择uni-ui项目  
    ![在这里插入图片描述][a94200c7553b41a9af3802faa23e52bd.png]
 *  新建成功  
    ![在这里插入图片描述][272be2b3aacd41149ac44ab4bfe82d96.png]

### 项目结构 ###

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

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

#### 1、填写自己的微信小程序的 AppID： ####

![在这里插入图片描述][318e215861fd4fb9a448d2496dda8460.png]

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

![在这里插入图片描述][834f91e7ccff4ada939861a53b5624d3.png]

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

![在这里插入图片描述][5c72ac8ee9b54bed9a39adc1bfa70d6c.png]

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

![在这里插入图片描述][187c6ecf382e4ddf823efdbaee46156e.png]

#### 5、初次运行成功之后的项目效果： ####

![在这里插入图片描述][a170688d92cd435eaaa1a95893e1b217.png]

### 使用Git管理项目代码 ###

#### 1、本地管理 ####

##### 1.1、忽略文件配置 #####

*  在项目根目录中新建 .gitignore 忽略文件，并配置如下：

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

![在这里插入图片描述][f8e78ef2f1dd480d878db7eb0c773049.png]

*  由于我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下， unpackage 目录不会被 Git 追踪。
 *  此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位。

![在这里插入图片描述][ec6aea39205b4d54be3c54b9d75f9687.png]

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

*  初始化项目

git init

*  提交所有代码到暂存区

git add .

*  提交到本地

git commit -m "init project"

*  查看状态

![在这里插入图片描述][5e7a8eb3a0a14bdea9f2c43de473d9e5.png]

#### 2、提交到远程仓库 ####

##### 2.1、新建仓库 #####

![在这里插入图片描述][6695138a64354821a6f70df84bf935bc.png]

##### 2.2、上传代码到远程仓库 #####

*  运行这两行代码  
    ![在这里插入图片描述][8be7cc5156d546aabca3ca7b98c222f0.png]![在这里插入图片描述][61bf1bb9833245c49bfd43f5b8f945b3.png]
 *  上传成功  
    ![在这里插入图片描述][52b3edc9161a49deb3eab158b4e4a108.png]

结束！

--------------------

积极的去做，至于结果再说。---罗翔老师

[a94200c7553b41a9af3802faa23e52bd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/38a078158cb746a2836d0464d29ef804.png
[272be2b3aacd41149ac44ab4bfe82d96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/28acbc8689d44edeb950b46ca4599475.png
[318e215861fd4fb9a448d2496dda8460.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/9068d03b236841d18c323a9098baa78e.png
[834f91e7ccff4ada939861a53b5624d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/a760f057d36d464c8ed13c0f5590224e.png
[5c72ac8ee9b54bed9a39adc1bfa70d6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/00842fe6e4544c9e9b7d42c0c567fddb.png
[187c6ecf382e4ddf823efdbaee46156e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/76bf01d6fb1f4896b902f1cb87d93f35.png
[a170688d92cd435eaaa1a95893e1b217.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e814e1d8ae704bf7a65a89de52f71077.png
[f8e78ef2f1dd480d878db7eb0c773049.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8dd1b95c1a0340aeb4187490f1fe9e4b.png
[ec6aea39205b4d54be3c54b9d75f9687.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/cd6461f92aaa418bb2aa0d1b206e8ad3.png
[5e7a8eb3a0a14bdea9f2c43de473d9e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e03e1c7aa55447aa9cbccdd803f79c74.png
[6695138a64354821a6f70df84bf935bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c375cde83adb4aa18d9b52c24ca6c473.png
[8be7cc5156d546aabca3ca7b98c222f0.png]: https://img-blog.csdnimg.cn/8be7cc5156d546aabca3ca7b98c222f0.png
[61bf1bb9833245c49bfd43f5b8f945b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/6e9e35fe52224b29b1047f42971e1548.png
[52b3edc9161a49deb3eab158b4e4a108.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/d94f1a4ce04844119ae55afc01e236a4.png