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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM