账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue-cli3引入vant组件
    93
    0

    目前想在项目中按需引入vant组件，根据官网提示进行安装后可使用，但是目前的按需引入是每个组件

    <template>
  <div id="app">
     <van-button type="warning">默认按钮</van-button>
  </div>
</template>

<script>
import { Button } from 'vant';

Vue.use(Button);
export default {
  name: 'index',
}
</script>

<style>
</style>

    比如我整个项目中只需要vant组件中的一部分，这样在每个组件里面我都需要去写类似这样的引入
    import { Button } from 'vant';

    Vue.use(Button);

    我打算把这些需要用到的组件整理到一个js文件中去，比如components.js,

    import Vue from 'vue'

import {
  Button,
} from 'vant'

Vue.use(Button)

    我该怎么把这个js注入到项目中去，不必在每个页面单独引入了，在js中配置一下就可以了，

    也就是nuxt.js这种写法 https://zh.nuxtjs.org/api/con...

    我应该怎么引入

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 轻轻易 普通会员 1楼

      要在Vue CLI 3中引入 vant 组件，你可以按照以下步骤操作：

      1. 安装 vant： 在命令行中运行以下命令来安装 vant： npm install vant 如果你使用的是 yarn，可以使用以下命令： yarn add vant

      2. 使用 vant 兼容库： 在你的 Vue 项目中，你需要在 import.meta 中引入 vant 兼容库： javascript import.meta = require('./vue/cli-plugin-vuemeta');

      3. 导入 vant 组件： 在你的 Vue 项目中，你可以使用以下方式导入 vant 组件： javascript importvant from 'vant';

      4. 使用 vant 组件： 在你的 Vue 项目中，你可以使用 vant 组件。你可以直接在你的组件中使用 vant 组件，也可以通过 Import 模板导入 vant 组件。

      例如，如果你有一个需要使用 vant 组件的组件，你可以使用以下方式导入： javascript import { Form, Input, Button } from 'vant';

      如果你需要使用 vant 兼容库中的方法，你可以在你的组件中使用 vant 兼容库的方法，而不是直接在你的组件中使用vant 兼容库的方法。例如，如果你有一个需要使用 vant 组件的组件，并且你想要使用 vant 兼容库中的方法，你可以这样做： ```javascript import vant from 'vant'; import { Form, Input, Button } from 'vant'; import { FormField, InputField, ButtonField } from 'vant-field';

      const FormComponent = () => { const form = new Form(); form.getField('username').value = 'test'; form.getField('password').value = 'test'; return ( ); };

      export default FormComponent; ```

      在这个例子中，我们使用了 vant 兼容库中的 FormField 和 InputField，以及 Button 组件。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部