玩《绝区零》吗？由于在玩耍的过程中资料查的并不是太顺利，因此萌生了自己做一个小程序的念头，经过两个月的努力终于上线了，本专栏就是在做小程序到真实上线过程中遇到的一些问题，如实记录并分享给有需要的朋友。

欢迎水友加好友交流，博主QQ：752746873

欢迎关注，公众号/小程序同名，旋涡小助手

关于项目的一些演示效果可以看另外一片博客：1. 绝区零小程序效果演示

目录

1. 前言

2. 本文核心内容

3. 如何创建一个vue3+TS的uniapp项目

4. npm安装依赖、插件

4.1 简单介绍下npm

4.2 安装uview-plus

5. 小结

---

1. 前言

这是我们项目的起点。为了帮助不太熟悉的小伙伴入门，本文将详细介绍如何创建项目以及如何安装必要的项目依赖。

为了保证信息的准确性和实用性，本文主要参考了uni-app官方文档。您可以通过访问uni-app官方网站 获取更多详细信息和最新动态。

如果已经是一位成熟的小伙伴了，请直接跳过～

2. 本文核心内容

本文主要分为两块内容，旨在能够高效、顺利地启动uniapp项目。本文预计阅读时间为5~10分钟，我们将了解以下核心内容：

• 如何通过命令创建一个基于Vue3+Typescript的uniapp项目；

• 如何利用npm及其他工具为uniapp项目安装和集成第三方库。以流行的uView-plus为例，我们将演示完整的安装过程；

3. 如何创建一个vue3+TS的uniapp项目

在开始创建基于Vue 3 + TypeScript的uniapp项目之前，请先确认您的开发环境已经满足以下条件：

• Node.js 环境：现代前端开发的基础环境，请确保当前机器已正确安装Node.js。Node.js是运行JavaScript代码于服务器端的基础，对于uniapp项目的构建至关重要，由于我们是vue3的项目，推荐版本可以到node18。

• Vue CLI 工具：此外，还需安装Vue CLI，这是官方提供的命令行工具，能够简化Vue项目的创建和管理过程。Vue CLI不仅提供了快速搭建项目结构的能力，还集成了丰富的插件和模板，为开发者提供极大的便利。

考虑到网络状况可能影响依赖包的下载速度或成功率，建议使用cnpm等工具安装，安装命令很简单，在命令行工具如cmd，vscode的终端工具里执行以下命令即可开始安装

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

对应在官网的位置如下图所示：

将这条命令分解成四段，并简要解释它们的作用，这样可以更清晰地掌握这条命令，或许还能在未来的项目中更加灵活地运用。

1. npx：执行命令

npx 是自npm 5.2.0版本起内置的一个强大工具，它的作用在于 临时安装并执行指定的命令行工具。与npm run类似，但更为简洁和高效。通过npx，可以直接运行一个命令，且无需事先全局安装该工具，确保了环境的干净和命令的即时可用性。

2. degit：提取仓库命令

degit 是一款专为快速从Git仓库下载并提取文件设计的npm工具。它简化了从GitHub等平台获取模板或代码库的过程，使得初始化项目变得更加轻松快捷。使用degit，可以迅速获得所需文件，而不必经历完整的Git克隆流程，节省了时间和带宽。

换句话说，这个指令的作用就是从uniapp的官方仓库下载对应的基础项目。

3. dcloudio/uni-preset-vue#vite-ts：模版

这部分指定了我们想要使用的模板来源——dcloudio仓库下的uni-preset-vue#vite-ts分支。这个特定的模板为基于Vue 3和TypeScript的uniapp项目提供了优化的配置和结构，确保项目从一开始就站在最佳实践的基础上。

4. my-vue3-project：个性命名

最后，my-vue3-project是将要创建的项目的名称。这个名字完全由自己决定，可以根据项目的实际用途或个人喜好进行定制。

因此，那么这段命令连起来看就是，我们使用了npx执行了degit这个工具，让degit去git仓库里，找到位于dcloudio这个仓库下的uni-preset-vue#vite-ts这一个模板下载到本地，并且将这个模版重命名成my-vue3-project；当然，你也可以将这个项目改成zzzero，也可以改成abc等名字；

4. npm安装依赖、插件

关于package.json如果不了解这是啥，可以参考一下之前的博文 ，有兴趣的小伙伴可以简单参考一下：

• 第一篇：《《微信小程序-进阶篇》package.json版本说明及各类版本符号详解（一）》
• 第二篇：《《微信小程序-进阶篇》package.json必须掌握的字段知识（二）》

4.1 简单介绍下npm

由于我们是通过命令工具初始化的项目，项目天生就自带了package.json文件，有了这个文件，我们就可以开始安装第三方依赖了‘’

不过在此之前，必须 先了解一下安装命令，在npm中安装命令如下：

npm install packageName --save

同样，我们拆分一下这段命令

1. npm：安装工具

npm 代表Node Package Manager（节点包管理器），是JavaScript运行时环境Node.js的一部分。它是全球最大的软件库之一，提供了数以百万计的开源库和工具。

2. install：安装指令

install 是npm提供的一个内置关键词，用于指示npm执行安装操作。这个指令告诉npm去下载并配置指定的包。

3. packageName：目标明确

packageName 是一个变量，代表着想要安装的具体包名。这个名字是由官方维护的，确保了唯一性和准确性。例如，如您希望安装Lodash库，那么packageName就是lodash务。

4. --save：自动记录

--save 选项指示npm将所安装的包记录到package.json文件中的dependencies属性下。这意味着再次构建项目时，npm会根据package.json自动下载并安装这些依赖项，确保项目的一致性和可移植性。

到这里，我们就知道了，如果我们要安装lodash这个工具库进我们项目，那么需要执行的命令就是

// 安装lodash
npm install lodash --save

4.2 安装uview-plus

以uview-plus为例，如果要在我们的项目中安装uview-plus这个UI库，那么我们需要执行的命令是：

npm install uview-plus --save

安装完成后，我们可以在package.json中的dependencies属性下找到该依赖的记录信息：

这样，我们就安装成功了。

5. 小结

本文详细介绍如何通过简洁的命令行操作，快速创建一个基于最新前端技术栈——Vue 3与TypeScript的uniapp项目。然后，我们还演示了如何利用 npm install 安装流行的UI库 uView-plus。

如果已经阅读到这里，非常感谢您的关注与支持！如果觉得内容有所帮助，点个关注吧，这将是对我最大的鼓励。无论有任何问题或想法，都欢迎随时联系我进行交流和探讨，尤其是玩绝区零的小伙伴。我也是一名新人，非常乐意与大家一起学习、共同成长。再次感谢您的支持与理解！