今天给大家分享一些如何使用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是通过函数式创建项目。
// Vue2
new Vue({
render: h => h(App)
}).$mount('#app')
// Vue3
import { createApp } from 'vue'
createApp(App).mount('#app')vue-router3.x和vue-router4.x路由区别。
// Vue-Router 3.x
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
// 路由配置不变
]
})
// 使用
export default {
methods: {
goToHome() {
this.$router.push('Home')
}
}
}
// Vue-Router 4.x
import { 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')
// 使用
<template>
<div>我是十四</div>
<van-button type="primary" size="large">大号按钮</van-button>
</template>以上就是基于 Vue3.0 + Vant3.0 + Vue-Router4.0 搭建示例项目的一些简单分享。
源代码已经开源到github仓库。
# 仓库地址
https://github.com/newbee-ltd/vue3-examplesok，如果大家感兴趣的话可以去看下哈！