用vue+vant框架写手机端

了解vue+vant

1.什么是vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.什么是vant

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

安装+创建

如何安装vue/cli(脚手架)

可以使用下列任一命令安装这个新的包：

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

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确：

vue --version

创建一个项目

运行以下命令来创建一个新项目：

vue create vue-vant

vue-vant 是创建的项目名称
你会被提示选取一个 preset。这里我们选择手动选择。(按键盘上下键进行选择,回车)手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

我们手动选择安装插件,空格键确认或取消选择。如下:
回车,如下:

插件

axios

你可以通过 vue ui 命令使用 GUI 安装和管理插件或者可以使用 vue add 命令:

vue ui
#OR
vue add axios

vant

通过 npm 安装
在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

#Vue 2 项目，安装 Vant 2：
npm i vant -S

#Vue 3 项目，安装 Vant 3：
npm i vant@next -S

开始写页面

tabbar

1.先全局引用vant

//在main.js写入
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.config.productionTip = false;
Vue