vue 按需引入vant跟全局引入方式

目录
  • 一、按需引入
    • 1.下载插件
    • 2.自动按需引入组件 (推荐)
    • 3.创建src文件跟js
    • 4.全局main.js导入
    • 5.使用
  • 二、全局导入

一、按需引入

1.下载插件

第一步我们可以先打开vant的官网：vant

然后下载vant 用命令行下载 ：

根据所需去配置 ： 我配置的是vant2

  • Vue 2 项目，安装 Vant 2：
npm i vant -S
  • Vue 3 项目，安装 Vant 3：
npm i vant@next -S

下载好以后我们去vue里面的根目 package.json

里面去看一下下载好了吗

  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^2.6.5",
    "fastclick": "^1.0.6",
    "vant": "^2.12.20",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },

2.自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

安装插件

npm i babel-plugin-import -D

在根组件创建.babelrc

在根组件创建.babelrc

.babelrc里面写

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
    "plugins": [
      ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }]
    ]
  }

3.创建src文件跟js

然后在src下面创建文件夹跟js

vant.js里面写

  • 1.导入vue
  • 2.导入所用的vant组件
  • 3.vue导出
import Vue from 'vue'
import { Button } from 'vant';
import { ImagePreview } from 'vant';
import { Image as VanImage } from 'vant';
import { Swipe, SwipeItem } from 'vant';
import { Grid, GridItem } from 'vant';
import { Card } from 'vant';
import { Tag } from 'vant';
import { Icon } from 'vant';
Vue.use(Icon);
Vue.use(Tag);
Vue.use(Card);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(VanImage);
// 全局注册
Vue.use(ImagePreview);
Vue.use(Button)

4.全局main.js导入

import './vant/vant'

5.使用

在组件中使用

<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

效果为：

二、全局导入

直接在main.js中导入即可

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

在组件中使用

<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

效果为：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用babel-plugin-import 实现自动按需引入方式

    目录 babel-plugin-import 实现自动按需引入 babel-plugin-import 的组件按需加载原理 对比webpack懒加载 实现原理 babel-plugin-import 实现自动按需引入 Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法 babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式. 1.下载 npm i babel-plugin-import -

  • Vant的安装和配合引入Vue.js项目里的方法步骤

    1.安装vant npm i vant -S:这是简写形式. npm install vant --save:这是完整写法. 如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装. npm install vant --save --registry=https://registry.npm.taobao.org 淘宝镜像,速度快,安装后查看package.json文件里看是否安装完成 2.1使用babel-plugin-import(推荐) babel-plugin-impo

  • iview在vue-cli3如何按需加载的方法

    iview在官方文档上,对于使用脚手架vue-cli3的项目的使用只有一句话:"我们为最新的 Vue CLI 3 提供了相应的 iView 插件,如果你正在用 Vue CLI 3,可以直接在插件中搜索 iview,安装插件来使用." 老实说,第一次看到这说明,我是懵逼的--废话不多说,直接撩起袖子撸 vue-cli3有个命令vue ui打开添加插件搜索 vue-cli-plugin-iview,点击安装 按需加载安装后,vue-cli-plugin-iview会自动帮我们做好以下的配置

  • vue 按需引入vant跟全局引入方式

    目录 一.按需引入 1.下载插件 2.自动按需引入组件 (推荐) 3.创建src文件跟js 4.全局main.js导入 5.使用 二.全局导入 一.按需引入 1.下载插件 第一步我们可以先打开vant的官网:vant 然后下载vant 用命令行下载 : 根据所需去配置 : 我配置的是vant2 Vue 2 项目,安装 Vant 2: npm i vant -S Vue 3 项目,安装 Vant 3: npm i vant@next -S 下载好以后我们去vue里面的根目 package.json

  • 全局引入vant后使用Toast的问题及解决

    全局引入vant后使用Toast的问题及解决

    目录 全局引入vant后使用Toast问题 1.Toast 的使用(官方) 2.问题 3.解决 小程序中引入vant-weapp toast组件踩坑(Toast不显示) 全局引入vant后使用Toast问题 1.Toast 的使用(官方) 1.1 引入 import Vue from 'vue'; import { Toast } from 'vant'; Vue.use(Toast); 1.2 使用 Toast('提示内容') 2.问题 当全局引入 vant 时候,直接使用 Toast('提示

  • vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案

    目录 问题描述 原因分析 解决方案 总结 问题描述 近日尝试使用vite+vue3+vant开发项目过程中,参考vant官网开发指南->快速上手->引入组件 按照上述配置好后,运行vite环境报错:Failed to resolve import 原因分析 根据报错信息,发现是vant的样式引入路径不对. 程序解析为:项目路径/node_modules/vant/lib/vant/es/组件/style 实际应该是:项目路径/node_modules/vant/lib/ vant/es/组件/

  • vue按需引入element Transfer 穿梭框

    Transfer 穿梭框 按需引入Transfer 编辑main.js import { ... Transfer } from 'element-ui'; const components = [ ... Transfer ]; components.map(component => { Vue.component(component.name, component); }); 安装transform-vue-jsx 插件 编辑 .babelrc文件 { "presets":

  • 详解Vue 全局引入bass.scss 处理方案

    为解决在Vue组件中全局引入 scss 变量及 mixins ,装载了一个名为 "sass-resources-loader" 解析器. 安装 $ > cnpm i -D sass-resources-loader 配置 配置的话是在 vue 的 loader 解析器中配置,即在 vue-cli 脚手架方式构建出来的文件中是以 build/utils.js,在该文件中定义了 cssLoaders() 方法,该方法定义了诸如 css.less的解析方式,具体如下. // build

  • vue全局引入scss(mixin)

    vue全局引入scss(mixin)

    目录 1.mixin.scss 2.单文件使用 3.全局挂载 3.1 导入依赖 3.2 重启项目 我们在写VUE的时候,会使用scss,也会做一些通用样式,方便使用,在写好的通用样式的时候,每次都要单文件导入,刚开始写的时候,感觉还好,后面工程量大了后,就显得麻烦,那么本文就全局导入scss样式! 1.mixin.scss // 颜色定义规范 $color-background : #FFFFFF; $color-background-d : rgba(0, 0, 0, 0.3); $color

  • vue项目中实现全局引入jquery

    vue项目中实现全局引入jquery

    目录 vue项目全局引入jquery vue引入jquery遇到的坑 引入 使用jquery 遇到的坑 解决办法 vue项目全局引入jquery 说明:在index.html直接用<script>标签引入,不会生效的,正确引入姿势如下: 1:打开package.json文件,手动在dependencies中加入如下代码: 2:运行cnpm install,这样就会引入版本为2.1.1的jquery作为依赖: 3:打开webpack.base.conf.js文件,对该文件进行两处修改,如下图:

  • mpvue全局引入sass文件的方法步骤

    mpvue工程初始化的时候,使用sass的步骤 1.安装依赖: npm install sass-loader node-sass --save-dev 2.在.vue文件中的style节点加上lang="scss",这样就可以愉快地使用sass进行开发了,无需再webpack.base.config.js中配置loader,webpack会自动识别.scss文件以及.vue中的scss代码. 在使用sass开发的时候,我们经常需要在各个页面使用统一的变量,还有一些方法,这种公共的资源

  • 微信小程序引入Vant框架的全过程记录

    微信小程序引入Vant框架的全过程记录

    前言 有时候会觉得微信小程序原生的ui差了那么一点点感觉,那么能不能引入三方框架呢?本文以引入Vant来进行举例,共包含8个步骤.不管是不是云开发项目都一样使用. 实现步骤 1. 打开微信小程序的开发工具,进入项目.在项目的根目录文件上点击右键.选择在终端中打开.(注意是根目录) 2. 在命令窗口中键入npm init.然后所有配置都按默认配置进行,只需点击回车键即可. 3. 在命令窗口中键入npm install进行构建,成功之后会在根目录下生成 package.json 和 package-

  • 微信小程序引入VANT组件的方法步骤

    1.右键项目名称->在终端中打开 2.在终端输入 npm init 用来初始化,然后一直回车默认就Ok. 之后项目中会出现 project.config.json 内容为当前项目的配置信息以及依赖包的管理. 3.安装vant依赖包(在终端输入) npm i vant-weapp -S --production 4.进入小程序开发工具,选择左上角 工具->构建npm 完成之后项目里会多出依赖包 5.点击右上角详情并勾选使用npm模块. 6.选择要在哪个pages里使用该组件 这里以pages下的

随机推荐