详解如何搭建mpvue框架搭配vant组件库的小程序项目


Posted in Javascript onMay 16, 2019

1. vant 介绍

详解如何搭建mpvue框架搭配vant组件库的小程序项目

### 扫码体验

详解如何搭建mpvue框架搭配vant组件库的小程序项目

Vant - 轻量、可靠的移动端 Vue 小程序 组件库。由 有赞 公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网

2. 在普通小程序怎么使用 vant 组件

使用之前

使用 Vant Weapp 前,请确保你已经学习过微信官方的小程序简易教程 和自定义组件介绍

安装

方式一. 通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包,详见npm 支持

# npm
npm i vant-weapp -S --production

# yarn
yarn add vant-weapp --production

方式二. 下载代码

直接通过 git 下载 Vant Weapp 源代码,并将 distlib 目录拷贝到自己的项目中

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

使用组件

以按钮组件为例,只需要在 json 文件中引入按钮对应的自定义组件即可

某些小程序框架会要求关闭 ES6ES5 选项,可以引入 lib 目录内 es5 版本的组件

es6

"usingComponents": {
 "van-button": "/path/to/vant-weapp/dist/button/index"
}

es5

"usingComponents": {
 "van-button": "/path/to/vant-weapp/lib/button/index"
}

接着就可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

在开发者工具中预览示例小程序

# 安装项目依赖
npm install

# 执行组件编译
npm run dev

3. 使用 mpvue

详解如何搭建mpvue框架搭配vant组件库的小程序项目 

mpvue (github 地址请参见) 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心, mpvue 修改了 Vue.jsruntimecompiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

初始化一个 mpvue 项目

如果没有安装 vue-cli ,先安装 vue-cli

npm install --global vue-cli

创建一个基于 mpvue-quickstart 模板的新项目

vue init mpvue/mpvue-quickstart my-project

安装依赖

cd my-project

# npm
npm install
npm run dev

#yarn
yarn
yarn start

4. 在 mpvue 里使用 less

下载 less 到项目中

npm install less less-loader --save

导入 loader

webpack.base.conf.jsrules 里添加一条规则

{
  test: /.less$/,
  loader: "style-loader!css-loader!less-loader"
},

在 mpvue 里使用 axios

axios 介绍

详解如何搭建mpvue框架搭配vant组件库的小程序项目

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
模拟select的代码
Oct 19 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
Express框架之connect-flash详解
May 31 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
详解react-refetch的使用小例子
Feb 15 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 #Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 #Javascript
怎样在vue项目下添加ESLint的方法
May 16 #Javascript
eslint 的三大通用规则详解
May 16 #Javascript
webpack项目使用eslint建立代码规范实现
May 16 #Javascript
Vue项目中使用jquery的简单方法
May 16 #jQuery
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 #Javascript
You might like
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
业务主管岗位职责范本
2013/12/25 职场文书
医师定期考核实施方案
2014/05/07 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
对讲机知识
2022/04/07 无线电