Vue和Vant使用

1.先创建vue项目，我准备把项目放在e盘下：E:\VueElement-ui

命令行进入这个目录：cd E:\VueElement-ui

创建一个基于 webpack 模板的新项目

（1）vue init webpack register(项目名)

（2）需要yes按Enter健就可以了，不需要输入n,然后按Enter健。

（3）创建完成：在目录中可看到

（4）运行：命令行进入到刚创建好的目录：cd register

（5）运行：npm run dev

（6）成功：在浏览器输入：http://localhost:8080/  

出现这个界面说明vue项目创建成功：

现在vue引入Vant

1.打开cmd，进入到当前刚创建的vue项目目录

2.在当前目录中运行：

npm i vant -S：这是简写形式。

npm install vant --save:这是完整写法。

3.接下来我们还需要安装一个插件，方便我们之后优雅的使用vant,在控制台输入npm i babel-plugin-import -D 或者npm install babel-plugin-import --save-dev

4.接下来我们去.babelrc中配置一下

.babelrc代码：

{

  "presets": [

    ["env", {

      "modules": false,

      "targets": {

        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

      }

    }],

    "stage-2"

  ],

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

  "env": {

    "test": {

      "presets": ["env", "stage-2"],

      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]

    }

  }

}

引入组件

在main.js里导入所有组件：

importVantfrom'vant'

import'vant/lib/vant-css/index.css'

Vue.use(Vant);

接下来我们就可以在我们的页里面大摇大摆地使用Vant了。我们可以做个测试，比如我们在HelloWorld.vue里添加一下button

<van-button type="default">默认按钮</van-button>

<van-button type="primary">主要按钮</van-button>

<van-button type="danger">危险按钮</van-button>

效果就出来了