vue3 + vite + js 组件库框架搭建 ：（三）优化组件库目录以及配置example组件测试及示例环境

vue3 + vite + js 组件库框架搭建 ：（三）优化组件库目录以及配置example组件测试及示例环境

（一）在package文件夹下分别创建components 及 utils 文件夹 并分别在文件夹下运行 pnpm init

components 文件夹用来存放组件，utils 文件夹用来存放公共的方法

修改生成的package.json文件内容分别为

// components/package.json
{
  "name": "@story/components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

// utils/package.json
{
  "name": "@story/utils",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

> 

（二）在components目录下创建index.js文件和src文件夹以及在src目录下创建index.js

components/index.js用来导出有组件并提供给外部使用，src 用于存放所有的组件，src/index.js
用来集中导出所有的组件

（三）在src目录下创建测试组件card

组件目录结构如下

style/index.less为组件的css样式
card.vue 是我们的组件内容
index.js 用来导出组件并提供全局挂在的方法
package.json 是用来存放组件的信息，参考第一章的配置

组件内容自定义，假设我们已经写好了一个组件为card 是一个卡片的组件
此时我们需要在card/index.js中将组件导出，并提供app.use()全局挂载方法,内容为

import _Card from './card.vue'
const install = custom => {
  custom.install = app => {
    const name = custom.name
    //注册组件
    app.component(name, custom)
  }
  return custom
}
export const Card = install(_Card)
export default Card

在/src/index.js中导出组件，内容为

export * from './card'
// 。。。其他的组件

在components/index.js导出有组件并提供给外部使用 内容为

import * as components from './src/index'
export * from './src/index'

export default {
  install: app => {
    for (let c in components) {
      app.use(components[c])
    }
  }
}

至此我们的第一个组件就已经创建完毕，接下来开始搭建组件的测试环境

（四）在根目录下创建 example 文件夹

在 example 文件夹下运行命令 pnpm create vite 因为已经创建过example 目录了，所以只需输入一个点（.）即可；

✔ Project name: … .
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

修改package.json内容为

{
  "name": "@story/example",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

测试环境就是一个vue + vite + js的项目具体的完善可以自己配置或者参考网上教程（本次只使用最基础的进行演示）

（五） 在根目录下的pnpm-workspace.yaml以及package.json 分别添加example

配置 workspace
在根目录下（story-ui） pnpm-workspace.yaml 文件中将example包进行关联，内容为

packages:
- packages/\*
- example

在package.json 关联 example 内容为：

{
	...
  "workspaces": [
    "packages/*",
    "example"
  ]
}

至此我们的测试环境就已经可以投入使用了（只是简单的基础配置，用来测试组件）

（六）组件的使用

安装依赖 在example目录下运行 pnpm add @story/components -D

单独使用

在App.vue中导入card组件，内容为

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { Card } from '@story/components'
</script>

<template>
  <card>
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
      </a>
    </div>
    <HelloWorld msg="Vite + Vue" />
  </card>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

全局挂载使用

当我们使用app.use()进行全局挂载使用时需要为组件进行命名（我们自己随意命名）
在语法糖 setup 中给组件命名需要用到插件

安装插件（安装在根目录下，后面打包组件时也需要用到）

pnpm add unplugin-vue-define-options  -D -w

在组件中进行命名 使用方法为 直接在setup 后面添加一个name属性，值就是我们想要的组件名称

<template>
  <div
    class="s-card"
    :class="[className]"
    :style="{
      width: width,
      height: height,
      backgroundColor: backgroundColor,
      border: border,
      borderRadius: borderRadius
    }"
  >
    <slot></slot>
  </div>
</template>

<script setup>
defineOptions({ name: "SCard" });
const props = defineProps({
  className: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: ''
  },
  height: {
    type: String,
    default: ''
  },
  backgroundColor: {
    type: String,
    default: ''
  },

  border: {
    type: String,
    default: ''
  },
  borderRadius: {
    type: String,
    default: ''
  }
})
</script>
<style lang="less" scoped>
@import url('./style/index.less');
</style>

在测试应用example/vite.config.js中引入插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import DefineOptions from "unplugin-vue-define-options/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 组件命名插件
   DefineOptions()
  ]
})

在main.js中进行全局挂载

// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import story from '@story/components'
const app = createApp(App)
app.use(story)
app.mount('#app')

在App.vue中使用

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <s-card>
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
      </a>
    </div>
    <HelloWorld msg="Vite + Vue" />
  </s-card>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

至此我们的组件库目录已经初步优化完毕，后面会继续进行优化。

以及example组件测试及示例环境的基础配置也已完成

接下来我们将对第一个组件Card的初步开发并搭建组件库文档