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 使用小技巧，你们能够关注一下，有什么建议也欢迎你们给我留言。