微信小程序mpvue入坑(2)之初始化及引入vant-weappUI——新增源码地址

• 微信小程序mpvue入坑(1)之技术对比选型
• 微信小程序mpvue入坑(3)之Promise封装wx.request及整合Api
• 微信小程序mpvue入坑(4)之vuex使用
• 微信小程序mpvue入坑(5)之组件封装

初始化项目

• 首先先构建一个项目

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart dh-scm-wx

# 安装依赖
$ cd dh-scm-wx
$ npm install
# 启动构建
$ npm run dev

• 更多详情可以自己去 Mpvue官网 查看

• 安装完依赖并启动好了之后目录结构是酱紫的：
  

• 点开微信开发者工具，新建项目，目录选择 dist

引入vant-weapp UI框架

• 安装依赖

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

• 在webpack.base.conf.js中如下配置vant-weapp（意思就是把此UI下的所有组件复制到dist/wx/components/vant-weapp/dist目录下）

  

• 使用

先在app.json中引入

在页面中如下使用

源码地址

gitHub地址

码云地址