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推薦的引入方式引入成功