vue+mpvue+vant-weapp搭建小程序开发环境，以及打包发布小程序

vue+mpvue+vant-weapp搭建小程序开发环境，以及打包发布小程序

背景

最近因为工作的原因，需要用到小程序。由于本人使用vue较多，so,花了半天时间调研”以vue方式开发小程序的环境搭建“才有了这篇文章。废话不多说，下面上干货

vue环境搭建

1. 安装node：进入node官网下载与系统匹配的安装包完成安装
2. 安装vue：查看官网教程完成安装

mpvue项目的创建

1. 查看mpvue官方文档教程完成项目的创建

2. 成功创建后，项目目录结构如下
   src为编码文件夹，正式我们工作的地方。
   static为资源文件夹。

3. 在项目根目录下运行命令”npm run dev“，会生成一个dist目录
   
   dist目录下有个wx文件夹，目录结构既是微信小程序目录结构。项目跑起来的情况下，修改src文件夹下的文件，程序会同步更新此目录下的文件。如果新增界面，则需重启项目
   

安装微信开发者工具

到微信开发者工具下载界面选择稳定版下载并安装此工具

启动微信开发者工具并导入项目

1. 启动微信开发者工具，微信扫二维码登录完成工具的启动。
   
2. 导入项目。可以看到右侧界面有个大大的加号图标，点击它，进入如下界面
3. 选择导入项目。填入名称、选择目录（此目录即为”mpvue项目的创建“创建的根目录）以及填入appID

appID是小程序账号里的appID。到微信公众平台登录自己的小程序账号，进入后台，点击左侧设置菜单，进入基本设置界面可找到此appID

4. 点击导入按钮导入，看到如下界面即成功完成项目的导入。修改代码，界面会实时更新，方便调试
   

5. 打开开发者工具右上角的下拉展开详情菜单，选择本地设置，勾选ES6转ES5,完成工具的配置
   
   

安装Vant Weapp并引用

1. 运行以下命令克隆项目

 git clone https://github.com/youzan/vant-weapp.git

2. 把克隆下来的文件根目录下的dist文件夹拷贝到mpvue项目根目录下的static文件夹下，并改名为vant-weapp
   
   

3. 引入Vant Weapp组件。以引入按钮为例，参照Vant Weapp官网，mpvue项目根目录下打开src文件夹下的app.json，添加按钮引入代码
   

4. 组件的使用。打开\src\pages\index.vue文件，添加按钮代码,至此成功引入组件。其它组件雷同
   
   

打包发布

当小程序开发完毕后，我们需要把程序发布上去。

1. 点击上传按钮，按提示操作，填入版本及描述，完成上次
   
   
2. 登录小程序账号，查看版本管理，可以看到我们提交的版本。