使用vue-cli3的方式创建项目并引入vant

1.首先创建一个项目,CD到某个文件夹下输入'vue create 项目名'

2.根据手脚架询问选择要预先安装的插件,空格选择,上下键切换,回车确定

完成等待后提示

3.安装ui框架vant  https://vant-contrib.gitee.io/vant/#/zh-CN/button

进入到项目中文件中,根据官网提示通过npm形式安装vant

组件的引入推荐使用下面的方式,但首先要安装babel-plugin-import

在项目控制台中输入npm i babel-plugin-import -D来安装插件

 然后根据官网提供的代码babel代码,粘贴到项目根文件的babel.config.js中,我的文件最终是这样的:

 然后可以在main.js文件中引入常用的组件,就可以在其他页面中使用vant的样式,我们引入Button组件来试一下

 然后找到App.vue文件,写上vant提供的按钮写法

最后运行项目,在项目控制台处输入npm run serve然后根据提醒的地址进行打开查看项目

 

利用vant推荐的引入方式引入成功

 

原文地址:https://www.cnblogs.com/FTAH/p/13744560.html