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>

也可以在main.js全局引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

import { Button } from 'vant';  // 按钮组
import { NavBar, } from 'vant';  // 头部导航
import { Tabbar, TabbarItem } from 'vant'  // 底部导航
import { Swipe, SwipeItem } from 'vant';  // 轮播
import { Lazyload } from 'vant';  // 懒加载
import { Grid, GridItem } from 'vant';  //Grid 宫格
import { Icon } from 'vant';  // icon
import { Cell, CellGroup } from 'vant'; // cell 单元格
import { Image } from 'vant';   // image
import { Field } from 'vant';  // 输入框
import { Search } from 'vant';  // 搜索
import { Sticky } from 'vant';  // 吸附
import { List } from 'vant';  // 列表
import { Tab, Tabs } from 'vant';  // 选项卡
import { Circle } from 'vant';  // 圆形进度条
import { Loading } from 'vant';  // loading
import { Popup } from 'vant';  // 弹出层
import { Divider } from 'vant';  // 分割线
import { RadioGroup, Radio } from 'vant'; // 单选
import { Checkbox, CheckboxGroup } from 'vant'; // 多选
import { Tag } from 'vant';  // tag标记
import { CountDown } from 'vant'; // 倒计时
import { Dialog } from 'vant'; // 对话框
import { DropdownMenu, DropdownItem } from 'vant'; //下拉菜单


Vue.use(Button).use(NavBar).use(Tabbar).use(TabbarItem).use(Swipe).use(SwipeItem).use(Lazyload, { lazyComponent: true })
  .use(Grid).use(GridItem).use(Icon).use(Cell).use(CellGroup).use(Image).use(Field).use(Search).use(Sticky)
  .use(List).use(Tab).use(Tabs).use(Circle).use(Loading).use(Popup).use(Divider).use(RadioGroup).use(Radio)
  .use(Checkbox).use(CheckboxGroup).use(Tag).use(CountDown).use(Dialog).use(DropdownMenu).use(DropdownItem)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

注意：我安装完成后运行时提示有依赖没有安装，这时候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