精华内容
下载资源
问答
  • 安装vant 组件库

    2021-05-31 11:22:06
    安装vant 组件库 第一步 安装命令 npm install vant@next --save (因为使用的是vue3.x 所以要安装vant的针对vue3的版本 vant@next) 第二部 vant的进阶使用 通过 npm install postcss postcss-pxtorem --save...

    创建项目

    • vue create yxsc_project

    安装vant 组件库

    第一步

    安装命令 npm install vant@next --save (因为使用的是vue3.x 所以要安装vant的针对vue3的版本 vant@next)

    第二部

    vant的进阶使用 通过 npm install postcss postcss-pxtorem --save-dev (用来将px尺寸转化为rem尺寸)
    配置rem的根元素字体大小 安装lib-flexiable 安装命令 npm i amfe-flexible --save
    注意
    这里会报错 postCss 需要8的版本
    所以这里建议对postcss-pxtorem进行降级

    降级命令 npm install postcss-pxtorem@5.1.1 --save

    使用vant组件库

    • 在main.js中引入vant组件库
        import vant from 'vant'
        createApp(App).use(vant).$mount('#app')
    
    • 在main.js中导入配置根节点字体大小的方法
        import 'amfe-flexible'
    
    • 接下来在项目根目录中新建一个postcss.config.js 写入以下代码
    // postcss.config.js
    module.exports = {
        plugins: {
            // postcss-pxtorem 插件的版本需要 >= 5.0.0
            'postcss-pxtorem': {
                rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
                // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
                    return file.indexOf('vant') !== -1 ? 37.5 : 75;
                },
                // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
                propList: ['*'],
            },
        },
    };
    
    展开全文
  • Vue2.x 安装Vant

    千次阅读 2019-04-10 11:05:58
    关于Vue3.x安装Vant,直接参考Vant官方引入文档。 以下是Vue2.x安装Vant步骤: 1. npm安装vant npm install vant --save --registry=https://registry.npm.taobao.org 2.安装babel-plugin-import npm i babel...

    关于Vue3.x安装Vant,直接参考Vant官方引入文档。

    以下是Vue2.x安装Vant步骤:

    1. npm安装vant

    npm install vant --save --registry=https://registry.npm.taobao.org 

    2. 安装babel-plugin-import

    npm i babel-plugin-import -D

    3.在babelrc文件配置plugins

      "plugins": ["transform-vue-jsx", "transform-runtime",
        ["import", [{ "libraryName": "vant", "style": true }]]
      ]

    4. 优雅的引入Vant

    import {Button,Cell, CellGroup} from 'vant'
    
    Vue.use(Button).use(Cell).use(CellGroup)

    5.页面验证效果

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

    安装以上步骤,即可安装成功。

    注意: 如果npm安装失败,可以尝试cnpm安装。

    展开全文
  • vue3.0安装vant-ui

    2021-03-10 14:17:09
    1、安装vant-ui npm i vant@next -S 2、main.js引入,这里只展示导入所有组件。 import Vant from 'vant'; import 'vant/lib/index.css'; createApp(App).use(Vant).mount('#app') vant-ui3.0官方地址 rem适配...

    1、安装vant-ui

    npm i vant@next -S
    

    2、main.js引入,这里只展示导入所有组件。

    import Vant from 'vant';
    import 'vant/lib/index.css';
    createApp(App).use(Vant).mount('#app')
    

    vant-ui3.0官方地址
    rem适配参考我的另一篇文章

    展开全文
  • 微信小程序安装Vant Weapp1.打开微信开发者工具,找到app.js,右键在终端打开。2.在终端运行如下代码3.上一步运行完成后,初始化4.找到工具,构建npm,在本地设置npm模块。5.测试是否成功 1.打开微信开发者工具,找到...

    1.打开微信开发者工具,找到app.js,右键在终端打开。

    在这里插入图片描述
    如图,打开了项目的根目录。

    2.在终端运行如下代码

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

    3.上一步运行完成后,初始化

    这一步很重要,如果没有初始化是构建不了npm的。

    npm init
    

    运行命令后一直按回车即可。

    4.找到工具,构建npm,在本地设置npm模块。

    在这里插入图片描述
    在这里插入图片描述

    5.步骤四 修改 app.json

    将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。

    6.测试是否成功

    wxml

    <van-rate value="{{ value }}" bind:change="onChange" />
    

    json

    "usingComponents": {
      "van-rate": "@vant/weapp/rate/index"
    }
    

    js

    Page({
      data: {
        value: 3,
      },
    
      onChange(event) {
        this.setData({
          value: event.detail,
        });
      },
    });
    

    测试结果:
    在这里插入图片描述
    成功!

    展开全文
  • 四、安装vant weapp npm i @vant/weapp -S --production 五、构建npm模块 六、使用 在index.json中 { "usingComponents": { "van-button": "@vant/weapp/button/index" } } 在index.wxml中 <van-b.
  • 正确安装步骤: 1. 小程序根目录执行 npm ...2. 安装vantnpm i @vant/weapp -S --production 3. 点击小程序菜单 工具 ->构建npm 4.勾选使用 npm模块 4. 执行构建后生成的目录就是官网上对应的路径 ...
  • npm安装vant(有赞UI)框架 - cmd篇

    千次阅读 2019-02-19 11:46:57
    npm安装vant(有赞UI)框架 - cmd篇 cmd命令: npm i vant -S 执行如下截图: 附 · vant官方 (有赞UI官方) segmentfault.com官网上的gif动画表演 官方文档 以上就是关于“ npm安装vant(有赞UI)框架 - ...
  • 小程序安装vant weapp 1,认识vant weapp 轻量,可靠的小程序UI组件库 Vant 是有赞前端团队开源的移动端组件库,于 2016 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是...
  • 使用npm安装vant组件,输入命令npm i @vant/weapp -S --production 菜单栏--工具---构建npm 小程序详情---本地设置---使用npm模块 附: 1、vant组件库地址https://youzan.git...
  • VUE 安装 vant

    2019-08-16 09:16:26
    npm i vant -S 2、第二步: 安装 babel-plugin-import 插件,babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 npm i babel-plugin-import -D 3、第三步:在....
  • 微信小程序项目使用npm安装vant-weapp的正确步骤及错误处理方法 1,搭建小程序 1.1 项目 - 新建项目 - 如下图所示: 1.2点击图中“新建”即可创建成功小程序项目。 2,安装vant- weapp库 2.0 - 在安装vant- weapp...
  • 如果出现 微信小程序json: [“usingComponents“][“van-button“] 未找到 就删除项目 重新按照下面的方法启动 一、创建一个新文件夹,在根目录下启动命令行 二、在命令行输入(npm init)初始化 ...四、安装vant官.
  • 如何安装Vant(基于Vue的UI框架)

    千次阅读 2018-08-09 15:32:03
    1.运行vue项目(参考文档:... 2.由于使用Vant,所以,安装步骤有一些区别,先根据步骤一安装好node.js 3.安装Vant的脚手架(参考文档:https://youzan.github.io/vant/#/zh-CN/quickstart) vue init y...
  • 创建Vue项目Vue-CLI创建项目命令拉取旧的模板安装中出现的警告运行项目安装vant模块 Vue-CLI 使用vue脚手架,需要先全局安装vue脚手架 npm install -g @vue/cli 创建项目命令 vue create [options] <app-name>...
  • 微信小程序项目使用npm安装vant-weapp的正确步骤 1、在当前小程序项目目录 npm init -y npm i @vant/weapp -S --production 2、将 app.json 中的 “style”: “v2” 去除,, 小程序的新版基础组件强行加上了许多样式...
  • 安装vant-weapp 组件

    千次阅读 2019-08-23 17:31:39
    可以查看官方文档: https://youzan.github.io/vant-weapp/#/quickstart 一、打开cmd 如果执行npm i vant-weapp -S --production 报错了: ...接着就可以执行:npm i vant-weapp -S --produ...
  • 小程序安装vant weapp

    2021-04-11 14:40:16
    第三步 下载npm i @vant/weapp -S --production 第四步修改project.config.js 第五步修改 详情 勾选使用npm模块 建议勾选es6转es5 第六步点击工具 npm 构建 第七步导入 组件 全局也好 局部也可以 路径请注意 建议...
  • 小程序是最新版的,安装van...# 通过 npm 安装 npm i vant-weapp -S --production # 通过 yarn 安装 yarn add vant-weapp --production 然后在小程序中工具中`构建npm` 在文件.json 中引入 { "usingCo...
  • 微信小程序项目使用npm安装vant-weapp的正确步骤 1、在当前小程序项目目录 npm init -y 构建npm项目 2、运行命令 npm install vant-weapp -S --production 安装完 发现在当前小程序目录下新增node_modules目录 下面...
  • 小程序安装Vant-ui框架

    2020-05-06 18:27:35
    如果已经之前安装vant-weapp的,就直接到工具栏中选中构建npm就可以了,如果没有就安装好再选中构建npm。 我以为这样就可以使用vant-weapp框架了,然后刷新项目,问题来了。。。 错误1 大概意思-找不到组件 明明...
  • 第一步:安装node.js(node安装包括npm)…(安装node的就不说了)             安装成功如上图cmd打印有版本号 . . 第二步:右键“在终端打开” cmd窗口中输入 npm init -y         出现...
  • 步骤一 通过 npm 安装 1.新建小程序,选择目录 2.使用npm构建vant,使用powershell(windows直接使用任务栏搜索框搜索就可以)打开小程序目录如: cd "D:\coding\weixinapp\vantdemo001" npm init -y npm ...
  • 安装过程中报错如下: 解决方法: 把miniprogram_npm/vant-weapp里的组件文件夹都删除, 之后再https://github.com/youzan/vant-weapp下载一份vant, 将dist文件夹(vant-weapp-dev\vant-weapp-dev\dist)中的...
  • } } 配置安装 vant npm i vant -S 引入 - 自动按需引入组件 (推荐) 下载babel-plugin-import插件,负责在编译过程中将 import 的写法自动转换为按需引入的方式 npm i babel-plugin-import -D 在 babel.config.js 中...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,235
精华内容 494
关键字:

安装vant