推薦一下本人近期維護的開源項目：
Spring Boot 開源電商項目（含商城端和后台管理系統）：https://github.com/newbee-ltd/newbee-mall
Spring Boot + Vue3 前后端分離商城項目：https://github.com/newbee-ltd/newbee-mall-vue3-app
Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 開發的后台管理系統：https://github.com/newbee-ltd/vue3-admin
最近在用 Vue3 寫一個開源的商城項目，開源后讓大家也可以用現成的 Vue3 大型商城項目源碼來練練手，目前處於開發階段，過程中用到了 Vant3.0，於是就整理了這篇文章來講一下如何使用 Vue3.0 + Vant 3.0 搭建種子項目。
前文回顧：《Vue3 來了，Vue3 開源商城項目重構計划正式啟動！》
眾所周知，Vue 3.0 發布已經有小一個月的時間了，但是市面上能作出快速相應的 Vue UI 組件庫並不多，就我目前所知的有 Ant Design of Vue、Vant，這倆組件庫遷移的是比較完善的，可能會有一些小遺漏，但是不影響大局，你可以去他們的 Github 倉庫提 Issue。
接下來我將帶大家手動搭建一個帶有組件庫 Vant、最新路由 Vue-Router 4.0、最新狀態管理插件 Vuex 4.0 的一個 Vue 3.0 種子項目。
創建項目
創建項目有三種形式
- Vue-Cli
- Vite
- Webpack
本文將采用 Vite 創建項目，畢竟人家尤大辛辛苦苦寫的一個打包工具，在非生產環境下，我們盡量去把玩最新的東西（不學是不可能的）。
我們按照官方文檔給的教程來初始化項目，這里安利一個國內加速版的中文文檔，官方給的中文版網址貌似是部署在國外的服務器，國內打開非常非常慢，十分影響學習。
使用 NPM：
$ npm init vite-app vant-v3
$ cd vant-v3
$ npm install
$ npm run dev
使用 yarn：
$ yarn create vite-app vant-v3
$ cd vant-v3
$ yarn
$ yarn dev
個人比較喜歡使用 yarn，因為比較快，喜歡 npm 的同學，建議添加淘寶鏡像，用 cnpm 安裝，同樣也很快。
完成上述操作的過程中，我個人感覺就是非常快。
初始化項目目錄如下所示：
細心和不細心的同學，都會發現入口文件好像變了。
沒錯，確實變了，V2 是初始化實例的形式，而 V3 是通過函數式風格。
// Vue2.0
new Vue({
render: h => h(App)
}).$mount('#app')
// Vue3.0
import { createApp } from 'vue'
createApp(App).mount('#app')
添加路由 Vue-Router 4.0
尤大在發布正式版 Vue 3.0 后說過，周邊插件還沒有很好的適配更新。
確實，截止目前為止 Vue-Router 4.0 還是 beta.13，也就是說盡量不要在生產環境下使用 beta 版本的插件，或多或少還存在一些未知的小問題沒有解決。
但是咱們平時玩耍自己的項目完全可以先睹為快，接下來我們安裝一下路由插件。
yarn add vue-router@next
和 V2 一樣，我們同樣需要在 src 目錄下新建 router 文件夾，添加 index.js 文件。
代碼如下：
// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
// createRouter 創建路由實例
const router = createRouter({
history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
routes: [
{
path: '/',
component: Home
}
]
})
// 拋出路由實例, 在 main.js 中引用
export default router
我們再新建一個 src/views/Home.vue 讓 / 路徑能渲染出內容：
<template>
<div>我是十四</div>
</template>
<script>
export default {
}
</script>
緊接着在 App.vue 文件下添加 router-view 組件，渲染路由匹配到的頁面組件：
<template>
<!-- 和 vue-router3 一樣，展示路由的組件的地方 -->
<router-view />
</template>
<script>
export default {
name: 'App'
}
</script>
這里給大家解釋一下 Vue-Router 3.x 和 Vue-Router 4.0 不一樣的地方。
首先是聲明路由實例的形式：
// Vue-Router 3.x
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
// 路由配置不變
]
})
// Vue-Router 4.0
const router = createRouter({
history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
routes: [
{
path: '/',
component: Home
}
]
})
其次是如何使用它：
// Vue-Router 3.x
export default {
methods: {
goToHome() {
this.$router.push('Home')
}
}
}
// Vue-Router 4.0
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
const goToHome = () => router.push('Home')
return { goToHome }
}
}
運行 yarn dev 打開瀏覽器如下圖所示：
添加 Vant UI 組件庫
Vant 已經推出 3.0 版本，我們去官網可以看到如何安裝。
不會沒事，我教你呀。
第一步肯定是安裝啦，代碼如下：
yarn add vant@next -S
添加之后，我們再添加按需引入的插件（推薦使用按需引入，減少代碼提及）：
yarn add babel-plugin-import -D
在項目根目錄添加 babel.config.js 如下所示：
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
在 main.js 內引入一個組件，代碼如下：
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')
在 src/views/Home.vue 隨便添加一個組件，代碼如下：
<template>
<div>我是十四</div>
<van-button type="primary" size="large">大號按鈕</van-button>
</template>
<script>
export default {
}
</script>
此時，刷新瀏覽器，效果如下圖所示：
移動端 rem 適配
如果是做 PC 端的網頁，無需做 rem 適配，但是做 H5 開發，rem 是需要做一下的，Vant 官方也為我們提供了方案，如下圖所示：
咱們就按照官方為我們提供的方案進行適配，安裝它們：
yarn add lib-flexible -S
yarn add postcss-pxtorem -D
這里
lib-flexible是網頁做 html 的 font-size 適配用的，所以需要安裝到 dependencies。而 postcss-pxtorem 是在編譯的時候對 px 單位轉換為 rem 單位時使用，所以安裝到 devDependencies 便可。
安裝好后，我們需要在 main.js 引入 lib-flexible，新增如下代碼：
import { createApp } from 'vue'
import { Button } from 'vant';
import 'lib-flexible/flexible'
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')
接着我們需要為 px 單位轉 rem 單位做配置。
起初我犯了一個錯誤，在根目錄聲明 .postcssrc.js 文件，但是目前 Vite 創建的項目已經不支持這種形式的配置文件了，而是需要 postcss.config.js 文件，配置內容如下：
// postcss.config.js
// 用 vite 創建項目，配置 postcss 需要使用 post.config.js，之前使用的 .postcssrc.js 已經被拋棄
// 具體配置可以去 postcss-pxtorem 倉庫看看文檔
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 37.5, // Vant 官方根字體大小是 37.5
propList: ['*'],
selectorBlackList: ['.norem'] // 過濾掉.norem-開頭的class，不進行rem轉換
}
}
}
給 src/views/Home.vue 文件里的 div 一個樣式，檢查一下 rem 適配是否成功：
<template>
<div class="demo">我是十四</div>
<van-button type="primary" size="large">大號按鈕</van-button>
</template>
<script>
export default {
}
</script>
<style scoped>
.demo {
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
如若是上圖所示，說明配置已經生效了。
這里還有一個需要注意的小知識點：不需要 px 轉 rem 的情況，可以使用大寫的 PX 作為單位。
編譯時不會將其轉化為 rem 單位，也可以通過 selectorBlackList 屬性聲明的 .norem 前綴的 class 類名，同樣也不會被轉化。
結尾
以上是搭建 Vue3.0 + Vant3.0 + Vue-Router4.0 移動端種子項目的內容，源代碼已經開源到 GitHub vue3-examples倉庫中，倉庫地址：https://github.com/newbee-ltd/vue3-examples，此倉庫將不定期更新各種 Vue3.0 相關的知識及各種整合 Demo 及 Vue3 使用小技巧，大家可以關注一下，有什么建議也歡迎大家給我留言。
