Vue3實戰系列:Vue3.0 + Vant3.0 搭建種子專案

我是13發表於2020-10-26

最近在用 Vue3 寫一個開源的商城專案,開源後讓大家也可以用現成的 Vue3 大型商城專案原始碼來練練手,目前處於開發階段,過程中用到了 Vant3.0,於是就整理了這篇文章來講一下如何使用 Vue3.0 + Vant 3.0 搭建種子專案。

前文回顧:《Vue3 來了,Vue3 開源商城專案重構計劃正式啟動!》

眾所周知,Vue 3.0 釋出已經有小一個月的時間了,但是市面上能作出快速相應的 Vue UI 元件庫並不多,就我目前所知的有 Ant Design of VueVant,這倆元件庫遷移的是比較完善的,可能會有一些小遺漏,但是不影響大局,你可以去他們的 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.xVue-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 使用小技巧,大家可以關注一下,有什麼建議也歡迎大家給我留言。

相關文章