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 解决！