vue项目中引入vant

我就是我 2024-03-16 15:48 59阅读 0赞

## vue项目中引入vant ##

本文讲解再vue项目里面如何引入vant，我推荐再vue项目里面引入vant，不推荐创建vant项目，因为会出现很多奇怪的格式错误。

### 详情 ###

首先是如何创建vue项目，看这篇文章：[vue安装教程][vue]

按照官网进行配置：[vant官网][vant]  
![在这里插入图片描述][d3f2e0e7c0a74a1cb15944703f921c4c.png]

在对应的文件夹下面打开终端输入`npm i vant`

![在这里插入图片描述][2c8c832d7f5d46139b62007597e006ae.png]  
然后在main.js里面进行如下配置

import {
         createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import Vant from 'vant'
    import 'vant/lib/index.css'
    
    
    const app = createApp(App)
    
    app.use(router)
    app.use(store)
    app.use(Vant)
    app.mount('#app')

这就是vue引入vant的方法  
![在这里插入图片描述][098aec1ea84e41faa39a00a57ecfb0e8.png]  
把App.vue改成这样就可以运行了。  
![在这里插入图片描述][0fa86716f9494389acec61b96ae08eac.png]

[vue]: https://blog.csdn.net/qq_51447496/article/details/131003860
[vant]: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
[d3f2e0e7c0a74a1cb15944703f921c4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8399809edd5f4bf1994a1ba6346fcfaa.png
[2c8c832d7f5d46139b62007597e006ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/e029a7dc86ab4e63bd69e1e5aede2990.png
[098aec1ea84e41faa39a00a57ecfb0e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c899eb8a71ae45b9aea4aaaf5461e307.png
[0fa86716f9494389acec61b96ae08eac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/fb2281b4a08c4fbd8b38fa85b520f5c3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，59人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目中引入vant

vue项目中引入vant 本文讲解再vue项目里面如何引入vant，我推荐再vue项目里面引入vant，不推荐创建vant项目，因为会出现很多奇怪的格式错误。详情

我就是我/ 2024年03月16日 15:48/ 0 赞/ 60 阅读

相关 Vue项目导入Vant

Vue项目导入Vant 本文讲解Vue项目如何导入Vant 参考文章：[Vant3][] 创建vue参考这篇文章：[用命令窗口的方式创建Vue项目 ][Vue

青旅半醒/ 2024年03月16日 12:32/ 0 赞/ 60 阅读

相关 vue-cli项目下引入vant组件

前言 Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。

Myth丶恋晨/ 2023年08月17日 15:39/ 0 赞/ 159 阅读

相关 vue项目中使用vant

全局使用在main.js中全局引入vant import Vant from 'vant'; import 'vant/lib/index.css';

痛定思痛。/ 2022年12月22日 14:28/ 0 赞/ 218 阅读

相关 vue项目引入vant

vue项目引入vant npm i vant -S 在使用的page.vue中的直接按需引入 <script> import

叁歲伎倆/ 2022年12月08日 05:44/ 0 赞/ 239 阅读

相关 vue项目中引入element

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5

本是古典何须时尚/ 2022年09月10日 10:11/ 0 赞/ 282 阅读

相关 vue项目中引入echarts

关于如何搭建vue项目，引入vue-router和vuex。请移步 [vue项目中引入vue-router][vue_vue-router] [vue项目中引入vu

àì夳堔傛蜴生んèń/ 2022年09月10日 02:14/ 0 赞/ 382 阅读

相关 vue项目中引入vuex

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5

今天药忘吃喽~/ 2022年09月09日 15:49/ 0 赞/ 320 阅读

相关 vue项目中引入vue-router

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5

拼搏现实的明天。/ 2022年09月09日 14:51/ 0 赞/ 348 阅读

相关 vue-cli项目中使用axios/vant

1.下载安装执行下载命令：npm i axios -S / npm install axios --save-dev 查看是否安装成功：

青旅半醒/ 2021年09月13日 15:50/ 0 赞/ 563 阅读