新建Vue脚手架并引入Vue组件库 Vant

1.新建一个文件夹，点击目录并输入命令：cmd（项目将在文件夹内）

2.新建脚手架
（1）输入命令：vue init webpack xx(创建项目 xx是名字)
（2）前三项直接回车，第四行standalone，第五行yes，六-九NO(安装成功)

3.打开项目
（1）打开编辑器，打开文件夹，点击终端，新建终端

（2）输入命令：npm run dev 然后回车

如果运行报错“不是内部或外部命令，也不是可运行的程序”，可以尝试

1.先将自己项目中的“node_modules”文件删除掉。 （注：博主并没有进行这一步操作）

2.cmd进入项目目录文件夹，依次输入命令：npm install、npm run build，最后运行npm run dev后项目成功运行。 无法运行就自行百度，博主遇到这个报错是用这个方法解决的。
（如果没有成功可以试一下从第一步开始）

（3）跑完后打开该链接即可在浏览器查看

<------------------分割线-------------------------------->
引入VUE组件库VANT框架
1.创建VUE项目之后进入项目目录运行安装命令：：npm i vant -S
2.安装 babel-plugin-import 插件，babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式：npm i babel-plugin-import -D
3.在.babelrc文件中配置plugins（插件）

"plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import", [{ "libraryName": "vant", "style": true }]]
  ],

4.按需要引入vant组件，比如我们要在HelloWord.vue组件中使用 Loading 组件，我们可以先 在组件中引入

<script>
import {Card } from 'vant';
Vue.use(Card);
</script>

5.然后在页面中加入组件代码

<template>
<van-card
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
    />
</template>

效果图