Vant快速上手

时间：2020-04-21
教程：
1.Vue.js
2.vant 轻量、可靠的移动端Vue组件库

前言：
以前是使用webpack来创建项目的，根据vant教程上说明：在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/)创建项目所以这次使用vue cli来创建项目

准备工作：

1.安装node.js 和 npm

教程：安装Node.js和npm

$npm -v       //npm 版本
$node -v     //Node 版本

image.png

2.根据vant 说明创建新项目

$npm install -g @vue/cli     //安装 Vue Cli
$vue create helloworld        //创建一个项目（helloword是我项目的名称）
$vue ui                               //创建完成后，通过命令打开图形化界面，在这里添加依赖

2-1： vue cli 安装成功

$npm vue -V     //检查是否安装成功

image.png

2-2：创建新项目（f:/vueDownloads/helloworld）

image.png

$F:    //跳转到F盘 ， 大写F
$ cd vueDownloads   //打开vueDownloads这个文件夹（向下走）

image.png

image.png

2-3： 图形化界面

image.png

image.png

image.png

根据步骤安装依赖

3.安装webpack

$npm install webpack --save-dev    //安装webpack
$webpack -v    //检查安装版本

image.png

image.png

4.成果

image.png

5.引入组件（方式三，导入所有组件）

配置按需引入后，将不允许直接导入所有组件

因为我也不知道后期项目里面需要用到哪些组件，我决定导入所有组件。

image.png

//main.js
import Vue from 'vue'
import App from './App.vue'
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.config.productionTip = false
Vue.use(Vant)
new Vue({
  render: h => h(App),
}).$mount('#app')
//引入vant所有组件以及样式

6.效果

在App.vue中添加日历组件

//这个平铺默认显示当天日期

image.png

7.引入组件（方式一， 自动按需引入组件）

7-1，安装插件

npm i babel-plugin-import -D

image.png

7-2 配置

//报错
 error  'Button' is defined but never used  no-unused-vars

image.png

//babel.config.js
plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
//main.js
import Vue from 'vue'
//使用什么组件就引用什么组件的
import { Button  } from 'vant'
Vue.use(Button)

image.png