使用 HBuilderX / 命令 创建 uni-app(微信小程序) 项目

前言

  • 有两种方式可以创建uni-app项目,分别是通过HBuilderX命令行 的方式创建;

一、通过 HBuilderX 创建项目

1.1 下载 HBuilderX

1.2 创建项目

  • 下载好软件之后,双击进入,会看到 新建项目 的选项;
  • 点击 新建项目 ,按照图片步骤进行操作;
  • 创建好之后的项目结构大概是这样:

1.3 安装必要插件 -- uni-app(Vue3)

  • 目前项目还是不可以在 微信开发者工具 中运行的,因为小程序的文件后缀为wxmlwxss,想要我们创建的项目在开发者工具中运行起来,还需要安装一个插件;
    • 因为当前项目是基于 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进行验证,随便输入信息看能否展示到小程序页面上;
相关推荐
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮3 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119403 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689976 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt