Vue3實戰系列：Vue3.0 + Vant3.0 搭建種子項目

最近在用 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 使用小技巧，你們能夠關注一下，有什麼建議也歡迎你們給我留言。