了解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.use(Vant);
new Vue({router,store,render: (h) => h(App),
}).$mount('#app');

2.在views 创建四个vue文件 (名字自己取)

//在router下面的index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Class from '../views/Class.vue';
import Cart from '../views/Cart.vue';
import My from '../views/My.vue';Vue.use(VueRouter);const routes = [{path: '/',name: 'Home',component: Home,},{path: '/Class',name: 'Class',component: Class,},{path: '/Cart',name: 'Cart',component: Cart,},{path: '/My',name: 'My',component: My,},
];const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes,
});export default router;

3.app.vue写tabbar

<template><div><router-view /><!-- active-color 点击图标后的颜色; inactive-color 图标颜色 --><!-- icon可在vant官网自己选择 --><van-tabbar route  active-color="#f60" inactive-color="#555"><van-tabbar-item replace to="/" icon="home-o" >首页</van-tabbar-item><van-tabbar-item replace to="/Class" icon="apps-o">分类</van-tabbar-item><van-tabbar-item replace to="/Cart" icon="cart-o">购物车</van-tabbar-item><van-tabbar-item replace to="/My" icon="user-o">我的</van-tabbar-item></van-tabbar></div>
</template><script>
export default {data() {return {}},
}
</script><style></style>

4.在终端运行该项目看效果

首页会在后面发出来,感谢大家的浏览

用vue+vant框架写手机端相关推荐

html5写手机端页面
众位大神,有没有使用html5,以Bootstrap框架为核心来写手机端页面的资料?希望得到大家帮助!!! 欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢 ...
原生遍历_前端原生写js代码还是用vue等框架写项目？
其实对于初入前端的同学来说,我个人推荐写原生.因为扎实的js基础是通过写原生代码逐步理解js的数据类型,语法,闭包,原型链,继承等知识,只有在项目中主动应用这些js的基本知识,才能逐步提高你的编码能力 ...
tp5框架判断手机端与pc端
参考网址http://www.php.cn/php-weizijiaocheng-405981.html 1.\application\index\view 中新建两个文件夹放置手机端网页跟pc端网 ...
vue慧招网手机端项目记录
2019独角兽企业重金招聘Python工程师标准>>> 1.全局安装node.js,检查是否安装成功 2.安装git 3.安装vue,检查是否安装成功 4.安装vue-cli,检查是 ...
基于SpringCloud+vue+element设计的手机端网络购物商城
一.项目背景 1.1 网上商店介绍随着5G时代的来临和智能手机的逐渐普及,掌上电子商务技术逐渐成熟,越来越多的电商企业开始重视手机和移动互联网,因此,电商应用开始逐步的出现在手机端,因为手机体积小巧 ...
mui框架手机端APP开发
最近项目繁忙一直没有时间回顾,此次梳理一下利用mui框架进行手机端app的开发的具体操作. 首先介绍一下我们需要用到的轻量级开发工具HBuilder,HBuilder最主要的优点就是快 ...
手机端召唤Debug
有时候我们在写手机端app或者微信端的业务,经常在调试或者测试的时候需要在手机端去操作,遇到问题如果是每次都需要alter出一个结果,那么每次的操作可能需要发布一次,这样需要花费大量的时间去收集信息. ...
在html中写响应式布局的代码,手机端自适应响应式框架，移动端响应式布局代码...
移动端自适应框架,响应式布局,如何实现移动端不同分辨率的手机?在本文能够详解,响应式布局是HTML5和css的结合是必然,但是很多朋友不知道怎么实现不同分辨率下的手机端,自适应框架在本站也有,但是具体 ...
html如何既能应用于pc端也能用于手机端_如何选择一个 vue ui 框架？
目录 1,比较流行的 UI 框架有哪些? 1.1 适用 PC 端 1.2 适用移动端 1.3 其它 2,vuetify 是什么,为什么选择它? 2.1 Vuetify给出的 vue ui 框架对比图 ...
手把手教你通过vue-cli搭建手机端框架
前言:欢迎前端的小伙伴们前来围观.学习借鉴,如果你是后端.测试和其他的小伙伴也没关系,如果自己也想玩一下前端,想搭建一个前端的框架,那么不妨静下心来看看这篇文章.如果你不是从事开发工作的人员,内容可能 ...

用vue+vant框架写手机端