前言
- 有两种方式可以创建
uni-app项目，分别是通过HBuilderX和命令行的方式创建；
一、通过 HBuilderX 创建项目
1.1 下载 HBuilderX
- uni-app官网地址；
- 选择
HBuilderX进行下载；
1.2 创建项目
- 下载好软件之后，双击进入，会看到 新建项目 的选项；
- 点击 新建项目 ，按照图片步骤进行操作；
- 创建好之后的项目结构大概是这样：
1.3 安装必要插件 -- uni-app(Vue3)
- 目前项目还是不可以在 微信开发者工具 中运行的，因为小程序的文件后缀为
wxml、wxss，想要我们创建的项目在开发者工具中运行起来，还需要安装一个插件；- 因为当前项目是基于
Vue3的，所以需要安装uni-app（Vue3）编译器，如果项目的技术栈是Vue2，安装uni-app（Vue2）编译器即可；
1.4 运行项目及注意事项
1.4.1 运行项目
- 安装完成之后，就可以运行在开发者工具中了；
- 如果编译器没有顶部的工具栏，可以这样操作：
1.4.2 注意事项
- 点击运行之后，可能会出现一个这样的弹窗，我们只需要选择微信开发者工具的安装路径即可；
- 注意：
- 如果微信开发者工具没有启动起来（编译器的控制台会报错的），可能是因为微信开发者工具的服务端口没有开启；
- ✅
- 关闭微信开发者工具，重新运行即可；
1.4.3小技巧
- 为了后续开发方便，可以将窗口进行分离；
二、通过 命令行 创建项目
- 完整流程如下所示：
- 第一种创建项目的方式必须依赖于
HBuilderX这个工具，但是通过命令行 创建的项目不必依赖于该工具；- 可以选择自己喜欢的编译器进行开发；
2.1 创建项目的命令
- 关于创建项目的命令大家可以自行去官网上面查看，有很多，这里只演示其中的一条：
- 创建以 TypeScript 开发的工程（Vue3/Vite版）：
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project- 命令解释：
npx：安装node的时候自带的工具；degit：一个第三方包，可以让我们在gitHub上快速拉取代码；dcloudio/uni-preset-vue：gitHub的一个仓库地址；#vite-ts： 仓库的某个分支；my-vue3-project： 项目目录（自已选择，将代码下载到这个目录下）；
- 可能会收到网络的影响导致下载失败，大家可以去gitee上面进行下载；
2.2 准备工作
- 下载好之后：
- 在
manifest.json中添加微信小程序APPID； - 安装依赖；
- 启动项目（查看
package.json文件，找到具体的启动命令）；pnpm dev:np-weixin（可自行选择包管理工具运行）；
2.3 运行项目
- 启动之后根据提示，将项目跑在微信开发者工具上面；
- 选择需要导入的
mp-weixin路径； - 若忘记修改项目名称，也可以到小程序的配置文件进行修改；
- 运行完毕之后，可以找到
src/pages/index/index.vue进行验证，随便输入信息看能否展示到小程序页面上；