记一次给 vue 3.x 搭建脚手架遇到的问题之组件编写

劳动节就好好在家写代码了，毕竟我们现在居家就是在为国家做贡献，而且劳动节不劳动和咸鱼有什么区别，手动🐶保命。

前言

vue 3 刚出几个月，现在是一步一个坑，但是坑还是要填的，毕竟生活还是要继续的么。

目前 vue 3.x 基本上是已经可以工作了，刚出不久的那段时间还看👀到掘金上有人说生产上有 3.x ，对这种大佬只能佩服,毕竟新东西出来，光是想想出了问题，这么解决就是非常头疼的事情

比如我现在搭个脚手架基本就是一路爬过来的，还好目前还没开始深入开发，出的都是周边配套和类型这些小问题。

另外说和 react 很像的，我只能说，这不光是像，你们的代码估计都可以拷过来改改就能用了呢，看下完整的函数式组件的代码

不过 vue 的双向数据绑定用的很舒服，这个才是最主要的，毕竟手写 set 真的麻烦。

读书人的事情这么能叫抄呢？这叫借鉴，这叫共同进步 --- by 鲁迅

不过这种事情其实说多了也没意义，比如 python 和 js 或其他语言之间，你敢说没有互相借鉴。

而且前端的口号不就是：“走别人的路，让别人无路可走”，我们要团结一致，毕竟前端这个岗位真的很容易被替代掉，我们求发展，求稳定，技术人用实力说话，才能让这个岗位越走越远。

目前的脚手架的开发进度

基本上已经可以支持你跑，但是打包工具还在纠结，我喜欢 rollupjs，但是项目已经引入了 webpack，到底要不要再引一个新的，还在思考中

支持 [typescript][typescript] 语法开发
支持 [storybook][storybook] 构建 UI 组件
支持 [lerna][lerna] 管理工程
支持 [prettier][prettier] 格式化代码
支持 [typedoc][typedoc] 自动生成 api 文档
支持主题与组件分离
支持使用 sass，采用 bem 的方式编写样式
支持 rollup 或 webpack 构建工具打包

问题列表

问题一：选择 vue 包

这个不算问题，主要是第一次为了这么选择包而头疼，以前写 vue 组件，基本就是直接引入 vue 就行了，其他交给构建工具处理。

但是看到 vue 3 支持模块化了，就想着把 @vue/compiler-dom 作为框架依赖引入，项目中引入 vue ，结果坑到了自己。

中间出现了一些很诡异的事情，所以我现在不管是项目还是组件库都直接引入的 vue@next，还有和 vue2 选择主文件的问题，不过这个目前应该都明白应该这么选择了

问题二：初期使用障碍，类型定义的问题

这个目前比较头大的时候，要么变成 AnyScript，要么别名一堆，虽然还有 js 可选，但是都有火了，为什么还要吃生的，不知道 0202 年开始禁野味了么。

我们在这里举个🌰，比如你的组件库是这样导出的

import type { App, Component, Plugin } from 'vue'

// Component 是一个复合类型，里面已经有 函数组件的定义了， 照理说应该没问题的
const Components: Component[] = [
  // Button 是一个纯函数组件，但是在这里就会出现签名不一致的情况
  Button as  Component
]

// app 不是以前的 Vue 类了
function install(app: App<any>) {
  Components.forEach(Component => {
    app.component(Component.name as string, Component)
  })
}

export default {
  version: process.env.VERSION || 'dev',
  install: install
// vue 没有暴露 PluginInstallFunction 类型
// 只有 Plugin 类型，在定义类型的的时候就只能进行联合声明了
} as { version: string } & Plugin
复制代码

看着没有报错，信心满满，然后代码里面你就很放心的开始用了

import VueUI from 'vue-next-ui'

const app = createApp(App)

app.use(VueUI)
复制代码

然而实际是会告诉你类型有问题，就算你改成这样导出也没用

export default {
  install(app: App<any>): void {
    Components.forEach(Component => {
      app.component(Component.name as string, Component)
    })
  }
} as Plugin
复制代码

就算你直接改 d.ts 也没用，但是 vue-router@next 就可以，不明觉厉。

这里想说的是，后面这样不兼容的问题还有很多，可能是多方原因，但情况就是这样，所以后面有的忙了。

类型问题可以参考下我的处理：

方式一：@ts-ignore 一把梭

@ts-ignore 一把梭只有对你的代码非常自信才应该这样做，一般推荐已经进行判断之后，还存在类型签名问题时使用。

方式二：显示转换

其实还可以使用 any，any 大法是真好用，就和 eval 一样，谁用谁知道

问题三：尤大大已经说过，vue 3 已经没有任何类了

这个问题这么说呢，你们看下这段代码和 vue 2.x 比比

import { createApp, reactive, h } from 'vue'

import App from './App.vue'
import router from './router'

const store = reactive({
  // global state
})

const app = createApp({
  render() {
    // h 已经是全局函数了
    return h(App)
  }
})

// 现在 config 在 app 上，意不意外
app.config.errorHandler = () => {}

// 经常往 Vue.prototype 挂东西的行为可以停停了
// 现在应该推荐这样玩
app.provide('state', store)

// 全局组件注册也在这里
app.component('page', Page)

// 现在 router 是这样用的
// 而且不需要再把 router 作为参数丢进 app 中了
app.use(router)

// 以前所有带 $ 符号的大部分都已经去除前缀了
app.mount('#app')
复制代码