微信小程序开发进阶篇(mpvue)

微信小程序开发进阶篇(mpvue)

1、开发须知

开发工具:

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

微信开发者工具1.05.2111300版本:

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

知识储备:

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

2、初始化项目

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

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

微信小程序开发进阶篇(mpvue)_第1张图片

2)创建一个mpvue项目

微信小程序开发进阶篇(mpvue)_第2张图片

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

npm install -g @vue/cli-init

微信小程序开发进阶篇(mpvue)_第3张图片

vue init的运行效果将会跟 [email protected] 相同(vue init webpack my-project)

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

vue init mpvue/mpvue-quickstart 项目名称

微信小程序开发进阶篇(mpvue)_第4张图片

4)进入项目路径,安装依赖

微信小程序开发进阶篇(mpvue)_第5张图片

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 [email protected] [email protected]

npm install [email protected] [email protected]

npm install [email protected]

# 启动  nodemon server.js

你可能感兴趣的:(微信小程序开发,微信小程序)