vant 项目_基于 vue3.x+vant3.x 搭建示例项目
今天给大家分享一些如何使用Vue3.0+Vant3搭建demo项目。
目前市面上有关vue3的项目并不多,vue3的UI组件库有ant-design-vue和vant-ui。
接下来讲解下使用vue3、vant、vue-router4.0手动搭建一个示例项目。
创建项目
需要先更新vue/cli脚手架到最新版
vue create hello-vue3# 选择vue3预设配置
创建成功后的项目目录如下。
vue2.x是通过初始化实例形式,而vue3.x是通过函数式创建项目。
// Vue2new Vue({ render: h => h(App)}).$mount('#app')// Vue3import { createApp } from 'vue'createApp(App).mount('#app')
vue-router3.x和vue-router4.x路由区别。
// Vue-Router 3.xconst router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes: [ // 路由配置不变 ]})// 使用export default { methods: { goToHome() { this.$router.push('Home') } }}// Vue-Router 4.ximport { createRouter, createWebHashHistory } from 'vue-router'const router = createRouter({ history: createWebHashHistory(), // hash模式:createWebHashHistory,history模式:createWebHistory routes: [ { path: '/', component: Home } ]})// 使用import { useRouter } from 'vue-router'export default { setup() { const router = useRouter() const goToHome = () => router.push('Home') return { goToHome } }}
Vant UI 3.0组件库
vant-ui已经推出了3.0版本。
https://vant-contrib.gitee.io/vant/next/
安装
$ npm i vant@next -S
使用组件
import { createApp } from 'vue'import { Button } from 'vant';import App from './App.vue'import router from './router'import 'vant/lib/index.css'; // 全局引入样式import './index.css'const app = createApp(App) // 创建实例app.use(Button) // 注册组件app.use(router)app.mount('#app')// 使用
我是十四
大号按钮
以上就是基于 Vue3.0 + Vant3.0 + Vue-Router4.0 搭建示例项目的一些简单分享。
源代码已经开源到github仓库。
# 仓库地址https://github.com/newbee-ltd/vue3-examples
ok,如果大家感兴趣的话可以去看下哈!
vant 项目_基于 vue3.x+vant3.x 搭建示例项目相关推荐
- python人脸识别项目_基于Python与命令行人脸识别项目(系列二)
在knowe_people文件夹中创建blur_faces_on_webcam.py文件并写入以下代码: import face_recognition import cv2 # This is a ...
- 基于阿里云服务器环境搭建到项目上线系列文章之三——安装git
基于阿里云服务器环境搭建到项目上线系列 前言:最近购买了域名和一台阿里云服务器准备做点东西放上去,所以准备把环境搭建到项目上线的过程记录下来,计划一个系列6篇文章 基于阿里云服务器环境搭建到项目上线系 ...
- 基于阿里云服务器环境搭建到项目上线系列文章之六——项目部署
基于阿里云服务器环境搭建到项目上线系列 前言:最近购买了域名和一台阿里云服务器准备做点东西放上去,所以准备把环境搭建到项目上线的过程记录下来,计划一个系列6篇文章 基于阿里云服务器环境搭建到项目上线系 ...
- 基于阿里云服务器环境搭建到项目上线系列文章之四——安装composer
基于阿里云服务器环境搭建到项目上线系列 前言:最近购买了域名和一台阿里云服务器准备做点东西放上去,所以准备把环境搭建到项目上线的过程记录下来,计划一个系列6篇文章 基于阿里云服务器环境搭建到项目上线系 ...
- 基于阿里云服务器环境搭建到项目上线系列文章之一——putty使用秘钥登录远程服务器
基于阿里云服务器环境搭建到项目上线系列 前言:最近购买了域名和一台阿里云服务器准备做点东西放上去,所以准备把环境搭建到项目上线的过程记录下来,计划一个系列6篇文章 基于阿里云服务器环境搭建到项目上线系 ...
- 【最新最全】Java微服务实战项目【尚医疗】_智慧医疗管理项目_基于若依框架快速开发
尚医疗是专门为各大医院.门诊提供的一款医疗管理平台.系统包含:系统管理.药品进销存管理.看病就诊.收费管理.检查管理.数据统计等核心模块.通过尚医疗系统可以快速.方便的管理病人从挂号到门诊结束所涉及到 ...
- Java微服务_医疗管理项目_基于若依快速开发框架
一.项目简介 项目简介:尚医疗是专门为各大医院.门]诊提供的一款医疗管理平台.系统包含:系统 管理.药品进销存管理.看病就诊.收费管理.检查管理.数据统计等核心模块.通过尚医 疗系统可以快速方便的管理 ...
- 使用vue3 +vite + typeScript + elementPlus搭建一个项目脚手架
使用vue3 + vite + elementPlus搭建一个项目脚手架 这篇文章就教大家如何使用vue3+vite+ts+element-plus搭建一个项目,步骤详细,献给不爱看文档的诸位,希望这 ...
- java ee会员功能项目_基于jsp的会员系统-JavaEE实现会员系统 - java项目源码
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的会员系统, 该项目可用各类java课程设计大作业中, 会员系统的系统架构分为前后台两部分, 最终实现在线上进行会员 ...
最新文章
- “评IDC,送免费主机”活动,主机无任何限制,无广告
- MyBatis 环境搭建
- 基于vuejs的移动端分页代码
- HarmonyOS之深入解析线程间的通信
- 【Linux系统编程】线程基本操作
- GPU Gems1 - 11 阴影贴图反走样
- 在asp.net core2.1中添加中间件以扩展Swashbuckle.AspNetCore3.0支持简单的文档访问权限控制...
- django-模型类关系
- MFC开发IM-设置 static的背景色和字体色
- ini_set() 函数的使用 以及 post_max_size,upload_max_filesize的修改方法
- linux下ORACLE之RAW创建
- 年审是当月还是当天_汽车年检提前检车的日期是按原始的还是按检车当月的?...
- 卡巴斯基终于也免费了:功能太鸡肋
- 斐讯K2 V22.X.X.X 新版固件 刷机教程 (开telnet,安装SSH,adbyby,刷breed,华硕Padavan)
- 字节跳动实习生转正工资_【有效】字节跳动(头条/抖音)日常实习生内推
- Excel如何批量插入删除复选框
- iOS apple 登录
- 计算机教案三维目标,“三维目标”的三个问题 教学设计三维目标模板
- 螺旋传动设计系统lisp_螺旋传动设计
- 配置linux网络的坑之IPADDR 等出现Command not found
热门文章
- oracle 11g 及 plsqldeveloper 相关操作
- 三中好用的数组去重方式
- Python学习二:词典基础详解
- 《软件工程》总结——第一章
- 2012 金华现场赛 A题
- ‘MIX_INIT_MP3’ was not declared in this scope,这是什么情况?
- vue中this.$nextTick()的使用---SpringCloud Alibaba_若依微服务框架改造_ElementUI---工作笔记017
- Sharding-Sphere_分库分表小结和问题_Sharding-Sphere,Sharding-JDBC分布式_分库分表工作笔记005
- Elasticsearch--Docker安装ES---全文检索引擎ElasticSearch工作笔记002
- ES8新特性_ES8中对象方法的扩展---JavaScript_ECMAScript_ES6-ES11新特性工作笔记052