- 微信小程序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中引入
在页面中如下使用