从0到1搭建一个组件库-第4节课

 第四节、组件库工程化建设

参考视频链接：【我要做开源】华为大佬亲授，Vue DevUI开源指南04：组件库工程化建设之项目初始化、jsx支持_哔哩哔哩_bilibili

参考文档：【我要做开源】Vue DevUI开源指南04：使用Vite搭建一个支持TypeScript/JSX的Vue3组件库工程 - 掘金

---

4.1：初始化项目

在vscode终端(ctrl+`)依次输入以下命令

1、进入桌面

cd desktop

2、创建一个vite工程 文件夹名称是vite-demo，使用的是（Vue3+TypeScript）模板

yarn create vite vite-demo --template vue-ts

3、关闭当前vscode，打开桌面的vite-demo文件夹，终端继续输入：安装yarn依赖  生成了一个 yarn.lock文件

yarn

4、启动项目

yarn dev

5、打开到这个界面，第一步算成功了

 图3:项目启动成功界面

6、测试打包生产环境是否成功，并且生成一个dist文件夹

yarn build

 图4：构建生产包成功界面

这样的就是成功了：用专业术语这叫做构建生产包

7、查看项目目录都是啥（可以不做）

tree

​

图5：项目的文件都是嘎哈的 

8、关闭vue2的生产提示(插件)：vetur  

开启vue3的生产提示插件：Vue Language Features (Volar)

开启TS的生产提示：TypeScript Vue Plugin (Volar)

---

4.2、JSX支持

1、在src/components文件夹里新建一个helloworld.tsx文件,输入以下代码

import { SetupContext } from "vue"

type HelloProps ={
    a?:string
}
const HelloWorld = (props:HelloProps,context:SetupContext) =>{
    return <div>hello,world$$$$$$$$</div>
}
export default HelloWorld

2、同时在App.vue文件里引入刚刚创建好的helloworld.tsx，如下

3、打开控制台（yarn dev）此时会发现localhost控制台报错

这是因为vue这里缺少能解析TSX文件的插件，需要yarn安装一下

yarn add -D @vitejs/plugin-vue-jsx

4、然后将vite.config.ts修改为下边的代码，其中第三行和第六行的后半段是修改的

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJsx()]
})

5、现在重新开启服务器就正确了，至此我们完成了组件在本地开发的预览情况。

 下边的步骤可以不做

6、然后把Kagol老师的tree代码放在和刚刚helloworld同样的文件件里，就可以开发组件了

7、在src/components 新建tree.tsx文件，粘贴以下代码

import { defineComponent, ExtractPropTypes, PropType } from 'vue'

// 定义类型和组件的props，这部分一般会放在一个单独的文件中
interface TreeItem {
  label: string
  children?: TreeData
}

type TreeData = Array<TreeItem>

const treeProps = {
  data: {
    type: Array as PropType<TreeData>,
    default: () => [],
  }
}

type TreeProps = ExtractPropTypes<typeof treeProps>

// vue组件定义，和`.vue`组件中的`<script>`标签中的一样，只是不再需要写`<template>`，setup中可以直接使用
export default defineComponent({
  name: 'DTree',
  props: treeProps,
  setup(props: TreeProps) {
    console.log('props:', props, props.data)
    return () => {
      return <div class="devui-tree">
        { props.data.map(item => <div>{ item.label }</div>) }
      </div>
    }
  }
})

8、App.vue里变成以下代码  可以观察下和之前的变化的不同的地方

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import HW from './components/helloworld'
import Dtree from './components/tree'
import {ref} from 'vue'//这个是vue3的语法  

//定义一个数的数据   需要安装两个插件 TypeScript Vue Plugin (Volar)  Vue Language Features (Volar)
const data = ref([{
  label: '一级 1',
  children: [{
    label: '二级 1-1',
    children: [{
      label: '三级 1-1-1'
    }]
  }]
}])

</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  <HW></HW>
  <Dtree :data="data"></Dtree>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

9、此时后台界面如下 

10.ok了，这节课主要做了两件事

1、初始化工程：新建vite-demo文件夹，初始化，并且添加yarn依赖

2、让此vite项目支持tsx语法：install了tsx的包，并且最终测试成功