小白发布懒猫应用攻略1：纯前端项目

本文记录一下自己开发和发布懒猫应用的过程，面向NAS新手玩家，需要ai较大帮助才能开发出一个应用的朋友们。

先从简单的情况开始，假设我们让ai写好了一套vue代码，在本地npm run dev可以运行起来了。接下来只需要**三步**就可以发布一个懒猫应用了。

# 操作流程
## 1.准备配置文件和icon
另外找一个空的目录创建一个懒猫helloworld应用
`
lzc-cli project create helloworld
`
从里面复制 lzc-build.yml 和 lzc-manifest.yml 两个文件，另外准备一个好看的icon，命名为lzc-icon.png，都到我们自己的代码目录下。

![image.png](https://dl.playground.lazycat.cloud/guidelines/585/d35046f7-bd17-4f60-966a-b44e2f59fcc2.png "image.png")

然后只需要在lzc-manifest.yml 文件里改个名字就好了


![image.png](https://dl.playground.lazycat.cloud/guidelines/585/f5e8dcb6-932a-4545-8e2a-9c9c991409f6.png "image.png")

## 2.编译lpk文件
在命令行里执行
`
lzc-cli project build -o release.lpk
`
这一步是将我们的前端代码编译成一个lpk文件，这个文件就是一个安装包，可以安装到任意一台懒猫微服里运行了。

## 3.发布应用&填写信息
（如果已经在[开发者中心](https://developer.lazycat.cloud/manage/#/apps)注册好账号）
可以选择命令行发布或者网页上传
- ### 命令行发布
`
lzc-cli appstore publish ./release.lpk
`
![appstore.png](https://dl.playground.lazycat.cloud/guidelines/585/aaff1b47-ff18-40c4-b415-fee398ae3c96.png "appstore.png")
- ### 网页上传

![19be33fd876192d87a6cd054163cba3.png](https://dl.playground.lazycat.cloud/guidelines/585/4447b1cb-99fe-42c5-a2fe-d895a8c84268.png "19be33fd876192d87a6cd054163cba3.png")

上传安装包之后补充一些应用相关的信息

![109f69ec81df91ce239781d65ee65e0.png](https://dl.playground.lazycat.cloud/guidelines/585/b97a7b6c-4cc6-4ea0-b5c4-74dd24bcb777.png "109f69ec81df91ce239781d65ee65e0.png")

确认提交审核就可以了

# 这个过程中都发生了什么？
- 在lzc-build.yml可以看到一个配置项，buildscript: npm run build，说明npm自己的编译过程还是要有的
- 编译好的东西怎么变成lpk文件，这就是懒猫系统内部的事情了
- 最后就是应用名称，域名相关的配置信息，确定了使用哪个路径可以访问到我们的应用。

# 基础概念
最后再总结一些基础概念。

## 前端 vs 前后端应用
简单的应用可能纯前端就可以完成，比如：
- 上传一个pdf、照片进行一些处理，返回给用户下载
- 网页版的棋类小游戏

如果项目具有一定的复杂度，就需要加上后端配合了，常见的情况如下：
- 存储用户数据，需要调用数据库（如果使用云数据库也可以不用）
- 业务逻辑复杂，用js实现不了，需要后端提供一个服务

## 什么时候用docker
需要用后端的项目才上docker。纯前端项目可以，但没必要。

因为前端项目只需要我们离线build一次，把打包好的东西放到浏览器里运行就好了。浏览器可以近似理解为每个人都一样的环境，不像后端每个项目都有不同的依赖环境，如果让docker每次都去build一次前端属于纯纯浪费资源。

# 祝大家开发应用顺利！