uniapp 引入 Vant 从零开始
uniapp引入 Vant从零一步一步开始
·
第一步
1、这里创建uniapp的项目 本人选择的是
Vue2
的
第二步
点击上面的
微信小程序版本
进入这个界面后 点击
快速上手
这里是使用npm安装的
使用
cmd
打开创建文件的路径
将
npm
的命令复制进去执行 :
npm i @vant/weapp -S --production
文件目录多了一个
node_modules
文件
第三步 也是最重要的一步
将
vant
引入 uniapp也是最重要的一步
,本人查了一天的uniapp引入vant 结果文章基本都一个样的 各种报错
3.1、新创建个文件夹这里随意命名 本人命名是
wxcomponents
随着网上的来了
3.2、这里 打开
node_modules/@vant/weapp
将weapp
里的dist
文件复制到wxcomponents
这个文件里面最终的结果为
:
打开
App.vue
引入:
@import "/wxcomponents/dist/common/index.wxss";
最后打开
pages.json
根目录的pages,json
别打开错了将这段话输入进去
:
"usingComponents": {
//这里是引入的组件 我是全局引入的 不想全局引入则在pages的路由下引入
//这是引入的按钮
"van-button": "wxcomponents/dist/button/index"
}
最终结果
别一直看 要记得保存哦!检查好要运行的项目
然后运行看结果
大功告成!
如果还出错则可以去我得
GitHub
进行拉去:https://github.com/ZoeyMoney/uniapp-vant
更多推荐
已为社区贡献1条内容
所有评论(0)