vue2 + vant 搭建框架并成功引入vant移动端组件(一)

搭建vue框架
1、找到创建vue 的文件夹路径
vue2 + vant 搭建框架并成功引入vant移动端组件(一)_第1张图片
2、选择手工配置选项
vue2 + vant 搭建框架并成功引入vant移动端组件(一)_第2张图片

3、详细配置
vue2 + vant 搭建框架并成功引入vant移动端组件(一)_第3张图片
vue2 + vant 搭建框架并成功引入vant移动端组件(一)_第4张图片
4、vue2搭建成功
vue2 + vant 搭建框架并成功引入vant移动端组件(一)_第5张图片
5、安装vant依赖
在现有项目中使用 Vant 时,可以通过 npm 或 yarn 进行安装:

# Vue 3 项目,安装最新版 Vant:
npm i vant -S

# Vue 2 项目,安装 Vant 2:
npm i vant@latest-v2 -S

6、引入组件
方式一. 自动按需引入组件 (推荐)
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件
npm i babel-plugin-import -D

7、main.js全局引用样式

import 'vant/lib/button/style';

8、测试




9、测试成功
vue2 + vant 搭建框架并成功引入vant移动端组件(一)_第6张图片

你可能感兴趣的:(vue,vue.js,npm)