uniapp+vue3开发微信小程序（零）

前言

  注：观看本系列文章的同学需要有 vue3基础！

一些废话

  自从之前发过几篇关于react开发的文章之后就入职了滴滴，后面一直在忙忙碌碌，以及业务需求上更加偏向Vue，所以React这方面算是荒废了，后续看看有时间还是要重新捡起来。
  此次项目目的在于为 厦门大学广播电台 打造一个全新的微信小程序，由于之前的后端接口由php转向了java，因此之前的所有接口全部下线，然后也趁此机会重新打造一个更加完善的小程序

  顺便推广一下 厦门大学广播电台，欢迎大家来收听厦大的节目

为什么选择uniapp？

 经过考量，有以下几点原因

1. 目前个人的技术栈偏向vue3，且uniapp很好的支持了vue3，学习成本低
2. 方便为以后拓展其他平台小程序，甚至打造一个app做准备
3. 有丰富的插件市场，无需重复造轮子
4. 此前对uniapp接触的少，想借此机会深入了解一番uniapp

开干

开发环境准备

1. Node20.2.0
2. HBuilderX3.8.7
3. 微信开发者工具v1.06.2308102
4. macOS

创建uniapp项目

选择模板

  这里可以直接选择默认模板，如果你有其他需求，可以选择对应的模板进行快速开发。
  云开发这里可以暂时不选，咱们一切按最小化来创建

  输入项目名称，选择项目位置，点击创建即可

运行到微信开发者工具

  选择运行到微信开发者工具，因为我这边已经在运行了。。所以显示的是停止微信开发者工具
如果你是第一次运行，会提示你下载插件，下载完之后需要重新运行

这里会发现报错了，因为微信开发者工具的服务端口没有打开，所以无法连接过去

  按照提示，打开微信开发者工具的安全设置，打开服务端口即可

  再次运行到微信小程序，大功告成！
  观察一下目录结构，这不就是vue的目录结构吗，再观察一下unpackage目录下的文件，是不是和上面微信开发者工具里的东西一模一样

  不过这个跟vue3肯定还是会有一些区别的，下一篇，我们来了解一下uniapp的一些独特之处，这个对后续的开发非常的重要！！！