2021/09/09 posted in Vue
Tags: #vue

通过上一篇文章【Vue3】基础与入门，我们知道了Vue3的一些基础用法，接下来就看看相关的生态和使用技巧。

如何创建项目

VueCli4.5+

安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

使用：

vue create <项目名称>

或者直接使用vue ui命令，通过图形化界面方式创建。

关于VueCli更多使用方法请查看官方文档。

Vite

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

关于Vite更多使用方法请查看官方文档

迁移指南

关于Vue2的项目是否要迁移到Vue3，个人觉得大可不必，因为官方后续也并没有废弃OptionsApi的计划。而且2.0后续也会维护，推出兼容组合式API的方案。如果是新项目那么可以考虑Vue3。

如果确实需要迁移，建议查看官方的迁移指南。

生态现状

截止到目前，vue3出来已经很长一段时间了，相关生态的适配已经不错了，基本使用是完全没问题的。

下面就大概列一下：

规模化

vue-router4

创建路由

import { createRouter } from 'vue-router'
const router = createRouter({
  // ...
})

mode配置

import { createRouter, createWebHistory } from 'vue-router'
// 还有 createWebHashHistory 和 createMemoryHistory

createRouter({
  history: createWebHistory(),
  routes: [],
})
// 设置base
createRouter({
  history: createWebHistory('/base-directory/'),
  routes: [],
})

*通配符路由

Vue Router 不再使用 path-to-regexp，而是实现了自己的解析系统，允许路由排序并实现动态路由。

const routes = [
  // pathMatch 是参数的名称，例如，跳转到 /not/found 会得到
  // { params: { params: { pathMatch: ['not', 'found'] }}
  // 这要归功于最后一个 *，意思是重复的参数，如果你
  // 打算直接使用未匹配的路径名称导航到该路径，这是必要的
  { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
  // 如果你省略了最后的 `*`，在解析或跳转时，参数中的 `/` 字符将被编码
  { path: '/:pathMatch(.*)', name: 'bad-not-found', component: NotFound },
]

<router-view>、<keep-alive> 和 <transition>

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

组合式API

import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter() // 相当于 this.$router
    const route = useRoute()  // 相当于 this.$route

    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
        },
      })
    }
  },
}

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

export default {
  setup() {
    // 与 beforeRouteLeave 相同，无法访问 `this`
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        'Do you really want to leave? you have unsaved changes!'
      )
      // 取消导航并停留在同一页面上
      if (!answer) return false
    })

    const userData = ref()

    // 与 beforeRouteLeave 相同，无法访问 `this`
    onBeforeRouteUpdate(async (to, from) => {
      //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })
  },
}

关于VueRouter4的更多用法请查看官方文档。

Vuex4

创建

// src/store/index.js
import { createStore } from 'vuex'

export const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

// src/main.js
import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'

const app = createApp(App)
app.use(store)
app.mount('#app')

组合式API

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore() // 相当于 this.$store
  }
}

关于Vuex4的更多用法请查看官方文档。

开发工具

脚手架

开发辅助

Volar：Volar 是一个专为 Vue 3 构建的语言支持插件。它基于@vue/reactivity按需计算一切，实现原生 TypeScript 语言服务级别性能。在Vue3的项目中强烈建议使用该插件，并禁用掉Vuter，它提供了很多好用的东西。
VueDevTools：新版插件可以同时兼容Vue2和3，建议安装。

Hooks

Vue3带来的组合式API，让我们在复用代码逻辑的时候可以使用hooks，所以社区出现了一些比较好用的hooks库。

VueUse：VueUse 是一个基于Composition API的实用函数集合
VueRequest：一个能轻松帮你管理请求状态（支持SWR，轮询，错误重试，缓存，分页等）的 Vue 3 composition API 请求库

UI组件库

PC

移动端

跨端方案

UniApp
Taro

如何封装自己的Hooks

下面就就简单的实现一个执行Promise的hooks：

// usePromise.js
import { reactive, toRefs } from "vue";
interface _IOptions {
  autoRun?: boolean;
  params?: unknown;
  initData?: unknown;
}
export default <T = unknown>(
  promiseFn: (runParams?: unknown) => Promise<any>,
  options: _IOptions = {}
) => {
  const {
    autoRun = false,
    params = null,
    initData = [],
  } = options as _IOptions;
  const state = reactive({
    loading: false,
    data: initData as T,
    error: null,
  });
  const run = (runParams?: unknown) => {
    state.loading = true;
    return promiseFn(runParams)
      .then((res) => {
        state.data = res;
      })
      .catch((error) => {
        console.error(error);
        state.error = error;
      })
      .finally(() => {
        state.loading = false;
      });
  };
  autoRun && run(params);
  return {
    run,
    ...toRefs(state),
  };
};

使用：

// 接口或者异步任务
const task = () =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        list: [1, 2, 3],
      });
    }, 1000);
  });
const { run, loading, data } = usePromise<{ list: number[] }>(task);
const handleClick = () => {
  run() // 手动调用run，或者使用自动触发方式
};

个人使用模板

这个模板可能并不美观或者适合你，网上也有很多优秀的模板，但是我做这个一个是不想太复杂，网上很多都是功能非常完善，但是随之而来的就是使用成本，所以我只封装一些很基础的东西，降低上手难度。这套ui也只是为了应付我这边的项目（有些产品的审美你们懂滴），如果觉得丑，自己重新设计也很简单，或者使用其他优秀的模板。

获取途径

GitHub
MisthinTools：MisthinTools是一款辅助开发软件，目前提供了项目模板和自动部署两个功能，里面也可以下载这套模板。

功能概述

数据请求封装
数据Mock
页面及按钮鉴权
常用布局
一些常用工具

【Vue3】实用指南