Vuecli3加Vant创建项目

详情：Vuecli3  https://cli.vuejs.org/zh/guide/installation.html

1、安装Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2、创建项目

vue create my-demo   // my-demo是项目名称

3、项目创建完成后，进入项目目录

cd my-demo

4、运行项目，看项目是否创建成功

npm run serve
# OR
yarn serve

5、安装Vant

npm i vant -S
# OR
yarn add vant

6、自动按需引入组件(推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

安装 babel-plugin-import 插件

npm i babel-plugin-import -D

 在.babelrc 中添加配置 

// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

对于使用 babel7 的用户，可以在 babel.config.js 中配置

 

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

然后在组建中按需引入组件，并且注册组件

<template>
  <div class="home">
    <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>
  </div>
</template>

<script>
import { Button } from 'vant';

export default {
  components: {
    [Button.name]: Button
  }
}
</script>

注意：我安装完成后运行时提示有依赖没有安装，这时候npm install，然后在重新运行就可以了

 

7、手动按需引入

在不使用插件的情况下，可以手动引入需要的组件

template>
  <div class="home">
    <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>
  </div>
</template>

<script>
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
export default {
  components: {
    [Button.name]: Button
  }
}
</script>

8、导入所有组件

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

注意：配置 babel-plugin-import 插件后，不允许导入所有组件

运行项目：

npm run serve