vue引入vant踩坑總結

 使用插件安裝：

1.npm I vant -S
2.安裝babel-plugin-import插件 npm install babel-plugin-import --save-dev
3.babelrc文件下配置

"plugins":[ 

  "transform-vue-jsx",

  "transform-runtime",

  ["import", {

    "libraryName": "vant",

    "libraryDirectory": "es",

    "style": true

  }]

]

4.main.js文件下引入組件
import {Button} from 'vant';
Vue.use(Button);

5.helloworld.vue文件內按需引入
<van-button type="default">默認按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>

---

 

出現的bug：

npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR! D:\node.js\node_cache\_logs\2021-01-03T09_06_16_352Z-debug.log
PS C:\Users\Windows\Desktop\test>

一直無法出現 Your application is running here: http://localhost:8080

package.json 下面的script文件下也有dev，

 

 

發現是路徑的問題

npm ERR! D:\node.js\node_cache\_logs\2021-01-03T09_06_16_352Z-debug.log 

我是在桌面是又新建了個文件夾，vue init webpack demo這一步會自動生成一個文件夾，刪除文件夾，運行npm run dev 解決！