最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Vant的安装和配合引入Vue.js项目里的教程
时间：2022-06-25 15:27:21 编辑：袖梨 来源：一聚教程网
1.安装vant
npm i vant -S：这是简写形式。
npm install vant --save:这是完整写法。
如果你网络很慢的话，可以使用淘宝的源，但是不建议使用cnpm来进行安装。
npm install vant --save --registry=https://registry.npm.tao***bao.org
淘宝镜像，速度快，安装后查看package.json文件里看是否安装完成
2.1使用(推荐)
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
# 安装 babel-plugin-import 插件 npm i babel-plugin-import -D
2.2 文件.babelrc文件配置
"plugins":[
"transform-runtime",
["import",{
"libraryName":"vant",
"libraryDirectory":"es",
"style":true
}]
],
更新了vue版本后。重新配置上述文件
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import", [{ "libraryName": "vant","libraryDirectory":"es","style": true }]]
]
页面按需引入；
可以再main.js里写，也可以在引用的组件页面写，根据自己需求或喜好。我喜好第2种写法
1.main.js:
import { Button } from 'vant'
Vue.use(Button)
2.或者在引用的组件页面
主要按钮
官方文档参考：
相关文章
- 鸣潮尤诺命座和专武怎么抽 尤诺命座和专武抽取建议 09-19
- 不朽箴言中期刺客队怎么搭配 中期刺客队搭配推荐 09-19
- 不朽箴言资源怎么使用 资源使用推荐 09-19
- 不朽箴言心愿单怎么设置 心愿单设置推荐 09-19
- 原神蟹沙皇怎么打-蟹沙皇打法攻略 09-19
- 新三国志曹操传法正之影怎么过 法正之影过关攻略 09-19