微信小程序开发进阶篇（mpvue）

1、开发须知

开发工具：

微信开发者工具最新版本：https://developers.weixin.qq/miniprogram/dev/devtools/stable.html

微信开发者工具1.05.2111300版本：

https://developers.weixin.qq/community/minihome/doc/0004c0333b05e8c1112db61535b401

知识储备：

  • 对微信小程序的基础（原生）开发有一定的基础
  • 对vue框架开发有一定的基础

2、初始化项目

要创建一个基于mpvue框架的微信小程序项目，大致需要以下几步：

1）检查NodeJS和vue-cli等是否已在本地安装

2）创建一个mpvue项目

注意：我们安装的vue cli 3是不支持vue init功能，需要以下操作
Vue CLl >= 3和旧版使用了相同的 vue命令，所以Vue cLl 2 ( vue-cli )被覆盖了。如果你仍然需要使用旧版本的vue init功能，你可以全局安装一个桥接工具:

npm install -g @vue/cli-init

vue init的运行效果将会跟 vue-cli@2.x 相同（vue init webpack my-project）

3）重新执行创建mpvue项目的命令

vue init mpvue/mpvue-quickstart 项目名称

4）进入项目路径，安装依赖

5）启动项目

  • 1 终端启动 npm start ，启动成功之后会有一个打包好的dist文件夹
  • 2 用微信开发者工具打开项目，会看到效果
  • 推荐使用IDEA进行开发，用微信开发者工具查看开发效果

3、拓展知识

Vant Weapp小程序 UI 组件库的使用步骤：

  • 第一步，需要有node.js开发环境

  • 第二步，项目本地设置中勾选 使用npm模块（点击 详情 <---> 本地设置 <---> 使用npm模块）

  • 第三步，使用vant时，小程序第一步新创建的时候没有package.json，所以需要先在终端执行 npm init

  • 第四步，在终端接着执行其官网的操作命令 npm i @vant/weapp -S --production

  • 第五步，点击 工具 <---> 构建 npm

微信小程序开发中一些不常用的依赖：

npm install stylus@0.54.7 stylus-loader@3.0.2

npm install koa@2.10.0 koa-router@7.4.0

npm install nodemon@1.19.3

# 启动  nodemon server.js

更多推荐

微信小程序开发进阶篇（mpvue）