vue脚手架搭建配置试调地址和端口号_基于 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，如果大家感兴趣的话可以去看下哈！