用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.pr