微信小程序mpvue+vant

一、构建mpvue项目

1.初始化项目:

vue init mpvue/mpvue-quickstart my-project

2.引入依赖

npm install

3.打包一下(不打包会报找不到app.json)

npm run build

4.将整个项目导入微信小程序开发者工具

微信小程序mpvue+vant_第1张图片

5.在vscode打开修改代码,然后npm run dev即可边修改代码边查看效果

二.在mpvue中引入vantWeapp

1)这种打包完就没了,还得重新构建

1.在dist wx右键选择在终端打开

微信小程序mpvue+vant_第2张图片

 

2.安装vant

npm i vant-weapp -S --production

3.构建npm:工具 -->构建npm

4.配置使用npm模块:工具-->项目详情

微信小程序mpvue+vant_第3张图片

5.即可在main.json或main.js中配置使用

微信小程序mpvue+vant_第4张图片

注:引入的地址是你引入依赖的文件夹的名称,有时引入的vant-weapp带版本号,注意修改

2)将项目引入的vant-weapp dist文件夹下的内容复制到static目录下

微信小程序mpvue+vant_第5张图片

路径配置:

微信小程序mpvue+vant_第6张图片

三、页面跳转:

跳转的路径要在app.json里注册

微信小程序mpvue+vant_第7张图片

微信小程序mpvue+vant_第8张图片

四、重置上方标题栏名称

  wx.setNavigationBarTitle({
    title: title
  })

 

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