Vue3.0+TS打造企业级组件库

原创

conanma

修改于 2021-11-04 11:36:56

1.1K0

修改于 2021-11-04 11:36:56

文章被收录于专栏：正则正则

目的

使用vue单元测试库保证代码质量开源项目的开发发布流程设计合理的设计广泛适用的API 如何保证代码质量 vue3的实现原理

表单组件库

高频场景交互复杂定制型高涉及到数据（校验）安全

学习优点

代码质量高适应场景丰富开源维护参与完善的发布流程源码（响应式原理）

核心功能

表单生成主体系统插件系统

和其他表单组件库的区别

无需编写代码：由json负责组装代码的要求。开源全栈通用：对于校验部分可以做到全栈跨平台拖拽实现表单生成。

内容结构

项目结构开发模式讲解：JSX的开发模式 vue3的TS规范定义（vue3的源码全部使用TS编写的）单元测试高泛用性的API 响应式原理（vue3的原理）完善功能开发（组件开发）自动化发布流程

`TypeScript`

TS最重要的核心就是type(类型)，和js最大的区别就是把java换成了type,也就是说有类型的js。

所以使用ts：

1.任何变量都声明类型； 2.不到万不得已不要使用any 3.给对象声明接口

创建项目

win+R

cmd

cd 
F:\work_mysself\company_workspace\vue-json-schema-form_workspace

F:

vue create vue-json-schema-form

image.png

选择自定义，然后通过空格选中/取消选中，Babel必须的，用于编译JSX文件。

image.png

其中router和vuex其实不需要，但是我这里也选中了。

image.png

class-style是vue2喜欢用的一种编写方式，但是vue3已经不需要这种写法，所以这里选择n。

image.png

是否在ts的基础上使用babel，这是需要的，选择y。这里用历史路由，并用node-sass

image.png

为了更好的学习，这里选择Perttier，个人其实更喜欢使用standard config。

image.png

这里选择Jest使用。

image.png

单独写在各自的文件里面。

image.png

完成后，打开项目，终端运行

npm run serve

image.png

Prettier

代码格式化工具，并在保存的时候会自动格式化，保持风格一致。首先需要安装插件

image.png

创建配置文件.prettierrc,它支持json语法:

{
  "desc-semi": "代码里面是否需要写分号：不写",
  "semi": false,
  "desc-singleQuote": "是否使用单引号：习惯单引",
  "singleQuote": true,
  "desc-arrowParens": "匿名函数单个参数时是否写括号：习惯写",
  "arrowParens": "always",
  "desc-trailingComma": " object属性一行行写下去之后，是否在最后加一个逗号",
  "trailingComma": "all"
}

还有很多规则，可以去官网学习并设置。设置好之后打开src\main.ts，尝试保存，或者shift+alt+f格式化，发现没有变化，这是需要我们配置一下这个文件：

image.png

这里我们需要设置工作区，所以在工作区打钩Format On Save。关闭这个设置页面，会发现项目下多出来一个.vscode文件夹

image.png

里面保存vscode针对这一个项目的各种配置。然后去掉``,再打开src/main.ts,保存就会发现被规则修改：

image.png

vscode还有一个推荐的setting配置：

image.png

当切换文件、或者关闭保存、或者vscode突然崩溃的时候，自动保存代码。

vue3中TS如何去定义组件——Component接口

vue3中提供了一个defineComponent函数。函数的实现直接返回了组件的定义。

如何定义Props的类型

打开src\views\Home.vue 发现初始化模板中已经实现了defineComponent函数。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "Home",
  components: {
    HelloWorld,
  },
});
</script>

避免props出现 undefined值，如下代码是正常的：

image.png

但如果像下面这样写，还是允许出现 undefined值：

image.png

<script lang="ts">
import { defineComponent } from 'vue'

const PropsType = {
  msg: String,
  age: { type: Number, required: true },
}
export default defineComponent({
  name: 'HelloWorld',
  props: PropsType,
  mounted() {
    this.age
  },
})
</script>

这时候需要如下约束：

image.png

<script lang="ts">
import { defineComponent } from 'vue'

const PropsType = {
  msg: String,
  age: { type: Number, required: true } as const,
}
export default defineComponent({
  name: 'HelloWorld',
  props: PropsType,
  mounted() {
    this.age
  },
})
</script>

image.png

这是放在外面，因为在声明的时候，vue并不知道它要使用的用途，如果放在里面就不会出现这个问题：

image.png

h函数

h函数就是用来创建节点的。比如修改src/main.js

import { createApp, defineComponent, h } from 'vue'
// import App from './App.vue'
import router from './router'
import store from './store'
import HelloWorld from './components/HelloWorld.vue'

const App = defineComponent({
  render() {
    return h('div', { id: 'app' }, [
      h('img', { alt: 'Vue logo', src: './assets/logo.png' }),
      h(HelloWorld, {
        msg: '欢迎来到Vue+TS 的应用现场',
        age: 12,
      })
    ])
  },
})

createApp(App).use(store).use(router).mount('#app')

image.png

这里图片不显示是因为如果是正常写的html代码会vue-loader会进行自动寻址。如果想正常显示可以这么写：

import { createApp, defineComponent, h } from 'vue'
// import App from './App.vue'
import router from './router'
import store from './store'
import HelloWorld from './components/HelloWorld.vue'

const img = require('./assets/logo.png') //eslint-disable-line

const App = defineComponent({
  render() {
    return h('div', { id: 'app' }, [
      h('img', { alt: 'Vue logo', src: img }),
      h(HelloWorld, {
        msg: '欢迎来到Vue+TS 的应用现场',
        age: 12,
      }),
    ])
  },
})

createApp(App).use(store).use(router).mount('#app')

image.png

setup

setup自带参数（props,{slots,attrs,emit}） attrs 和 slots 是有状态的对象，它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构，并始终以 attrs.x 或 slots.x 的方式引用。

使用JSX开发vue3组件

JSX目前有2个解决方案，推荐vueComponent/jsx。

声明使用,需要修改babel.config.js：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: ['@vue/babel-plugin-jsx'], //这样配置jsx就可以用了
}

修改src/main.js:

import { createApp, defineComponent } from 'vue'
// import App from './App.vue'
import router from './router'
import store from './store'
import HelloWorld from './components/HelloWorld.vue'
import App from './App'

createApp(App).use(store).use(router).mount('#app')

新增src\App.tsx:

import { ref, reactive, defineComponent } from 'vue'
const img = require('./assets/logo.png') //eslint-disable-line
export default defineComponent({
  setup() {
    const state = reactive({ name: 'jokcy' })

    const numberRef = ref(1)

    setInterval(() => {
      state.name + -1
      numberRef.value += 1
    }, 1000)

    return () => {
      const number = numberRef.value
      return (
        <div id="app">
          <img src={img} alt="Vue Logo" />
          <p>{state.name + number}</p>
        </div>
      )
    }
  },
})

运行：

image.png

JSX还有一个好处就是在编译阶段就防止一些参数问题。比如如下代码：修改src\components\HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ age }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
    age: { type: Number, required: true },
  },
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

修改src\App.tsx

import { ref, reactive, defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
const img = require('./assets/logo.png') //eslint-disable-line
export default defineComponent({
  setup() {
    const state = reactive({ name: 'jokcy' })

    const numberRef = ref(1)

    setInterval(() => {
      state.name + -1
      numberRef.value += 1
    }, 1000)

    return () => {
      const number = numberRef.value
      return (
        <div id="app">
          <img src={img} alt="Vue Logo" />
          <p>{state.name + number}</p>
          <HelloWorld age={24} />
        </div>
      )
    }
  },
})

如果age缺失，编译就会提示缺少必备参数。包括传字符串也会报错：

image.png

所以用TSX文件比vue文件要好的地方。

还可以复用很复杂的业务逻辑：

import { ref, reactive, defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
const img = require('./assets/logo.png') //eslint-disable-line

// function renderHelloWorld(num: number) {
//   return <HelloWorld age={num} />
// }
const renderHelloWorld = (num: number) => {
  return <HelloWorld age={num} />
}

export default defineComponent({
  setup() {
    const state = reactive({ name: 'jokcy' })

    const numberRef = ref(1)

    setInterval(() => {
      state.name + -1
      numberRef.value += 1
    }, 1000)

    return () => {
      const number = numberRef.value
      return (
        <div id="app">
          <img src={img} alt="Vue Logo" />
          <p>{state.name + number}</p>
          {renderHelloWorld(12)}
        </div>
      )
    }
  },
})

2种写法都可以。而且还可以在html代码中使用v-model等：

import { ref, reactive, defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
const img = require('./assets/logo.png') //eslint-disable-line

// function renderHelloWorld(num: number) {
//   return <HelloWorld age={num} />
// }
const renderHelloWorld = (num: number) => {
  return <HelloWorld age={num} />
}

export default defineComponent({
  setup() {
    const state = reactive({ name: 'jokcy' })

    const numberRef = ref(1)

    setInterval(() => {
      state.name += 1
      numberRef.value += 1
    }, 1000)

    return () => {
      const number = numberRef.value
      return (
        <div id="app">
          <img src={img} alt="Vue Logo" />
          <p>{state.name + number}</p>
          <input type="text" v-model={state.name} />
          {renderHelloWorld(12)}
        </div>
      )
    }
  },
})

其实我们相当于把每个例如div标签看成一个个h函数即可。当然可以通过input修改上面显示的值：

export default defineComponent({
  setup() {
    const state = reactive({ name: 'jokcy' })

    const numberRef = ref(1)

    // setInterval(() => {
    //   state.name += 1
    //   numberRef.value += 1
    // }, 1000)

    return () => {
      const number = numberRef.value
      return (
        <div id="app">
          <img src={img} alt="Vue Logo" />
          <p>{state.name + number}</p>
          <input type="text" v-model={state.name} />
          {renderHelloWorld(12)}
        </div>
      )
    }
  },
})

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

登录后参与评论

0 条评论

热度