uni-app 开发准备工作(一次开发，多端部署)

目录

前言

安装 HBuilder X 开发工具

安装 scss/sass 编译插件

新建 uni-app 项目

uni-app 项目的目录结构

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

1.填写自己微信小程序的 AppID

2.在 HBuilder X 配置“微信开发者工具的安装路径”

3.打开微信开发者工具的服务端口

4.配置项目运行到微信开发者工具

使用 Git 管理项目

1.在项目根目录中新建 .gitignore 忽略文件

2.为 unpackage 文件夹创建一个占位文件

3.使用 Git 管理项目

把项目托管到码云

1.生成并配置 SSH 公钥

2.创建空白的码云仓库

3.把本地项目上传到码云对应的空白仓库中

---

前言

   uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

安装 HBuilder X 开发工具

        用 HBuilder X 开发工具来开发 uni-app 类型的项目比较方便

HBuilder X 官网 https://dcloud.io/hbuilderx.html 
 

安装 scss/sass 编译插件

插件市场https://ext.dcloud.net.cn/?cat1=1&cat2=11

在插件市场搜索 scss/sass 编译插件

点击插件，选择下载插件并导入 HBuilder X

新建 uni-app 项目

        点击左上角的文件，点击新建，选择新建项目

        选择模板和 vue 版本

uni-app 项目的目录结构

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

1.填写自己微信小程序的 AppID

• 点击 manifest.json 文件
• 选择微信小程序配置
• 输入微信小程序的 AppID

2.在 HBuilder X 配置“微信开发者工具的安装路径”

• 在 HBuilder X 工具上方选择工具，选择设置
• 选择运行配置
• 找到微信开发者工具路径的输入框，输入路径

3.打开微信开发者工具的服务端口

        点击设置 -> 安全设置 -> 将服务端口打开

4.配置项目运行到微信开发者工具

        选择运行 -> 运行到小程序模拟器 -> 微信开发者工具

        点击运行后就会自动启动“微信小程序开发者工具”运行 uni-app 项目

使用 Git 管理项目

        关于版本控制器 Git 的使用推荐看版本控制器 Git 的原理与使用

1.在项目根目录中新建 .gitignore 忽略文件

在 .gitignore忽略文件中的配置如下：

        /node_modules： 存储了项目中所有第三方的包，而第三方的包不需要 Git 进行管理，所以要忽略掉

        /unpackage/dist ：当将项目运行到微信小程序开发者工具上时就自动生成了 /unpackage/dist 目录，用于存放小程序运行时所用的代码文件

/node_modules
/unpackage/dist

2.为 unpackage 文件夹创建一个占位文件

        因为 unpackage 文件夹下只有一个 dist 文件，把 dist 文件忽略后，unpackage 文件夹下就没有文件了，Git 就不会追踪 unpackage 文件，所以我们需要在 unpackage 文件夹下创建一个  .gitkeep 文件进行占位，让 Git 继续追踪 unpackage 文件

3.使用 Git 管理项目

        右键项目根目录，选择在外部资源管理器打开，打开项目所在的文件夹

        在项目所在目录打开 git 控制台即可

        初始化本地 Git 仓库

git init

        将所有文件加入暂存区

git add .

        将暂存区中的文件提交到版本库

 git commit -m "创建雨林优购仓库"

把项目托管到码云

1.生成并配置 SSH 公钥

推荐看 https://blog.csdn.net/q322359/article/details/138962283?spm=1001.2014.3001.5501

2.创建空白的码云仓库

        输入仓库名称，介绍，直接点击创建即可，不要有其他选项

3.把本地项目上传到码云对应的空白仓库中

        创建项目后便可以看到已有仓库时如何让本地仓库和远程仓库建立联系，以及建立联系后如何推送数据