mpvue+微信小程序云开发搭建-蒲公英云

mpvue+微信小程序云开发搭建

写在前言：**本文需要你有一定的前端知识、小程序语法知识，电脑已经安装了Node.js 环境 **

开发工具： WebStorm + 微信开发者工具

1、通过npm命令搭建vue-cli脚手架：

参考： http://mpvue.com/mpvue/

（1）在指定的文件夹中打开 cmd 命令框输入相关命令创建vue项目：
#全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于  mpvue-quickstart   模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
在执行 vue init mpvue/mpvue-quickstart my-project 会有以下提示分别表示（新手可直接回车跳过）：

可以看到文件夹里有刚创建热乎的新项目：

全部命令执行完之后，用WebStorm打开项目，结构是：

通过右侧说明可知，mpvue 框架可打包出各种平台的小程序，我们这里以微信小程序举例，通过打包构建命令 npm run dev 可自动出现dist目录存放真正的微信小程序代码：

2、开始构建小程序云开发配置：

(1)在 src/main.js 文件中加入 云函数初始化 的代码：

注意：确保编译构建之后 dist/wx/app.js 文件里面也存在同样的代码块：

(3)在 dist/wx/ 文件夹中创建目录 functions (目录名可以随便起，位置只要在 dist/wx目录里面就行，但要记得位置)：

3、打开微信开发者工具，构建云函数：

（1）导入dist/wx目录，填入你的 appid：

导入之后的样子：

（2）同时在工具 WebStorm 和 微信开发者工具 中找到 project.config.json 文件新增字段 “cloudfunctionRoot“ 值为之前创建的 functions 目录位置：

保存之后，会发现 functions 图标变成原函数图标（如果没有生效则使用 npm run dev 命令重新构建一下）：

—————————>

在微信开发者工具中右击 functions 即可创建云函数了：

至此，一个完整的 mpvue+微信云开发项目的基础就创建完成，后续会加上引入 Vant-UI 或者 Mint-ui 进行开发……

4、使用工具 WebStorm 引入 Vant-UI ：

https://blog.csdn.net/weixin_33763244/article/details/92418629?utm_term=mpvue%E4%B8%AD%E4%BD%BF%E7%94%A8vant&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-1-92418629&spm=3001.4430