Vue3组件库框架搭建example环境的详细教程

更新时间：2022年11月18日 09:08:39 作者：程序员优雅哥（\/同）

这篇文章主要介绍了Vue3组件库框架搭建example环境的详细教程,本文便搭建 example 开发环境和打包构建，并在example中使用组件库，需要的朋友可以参考下

前面用了大量篇幅介绍组件库的开发环境搭建，包括：创建组件、创建组件库入口、组件库样式架构、组件库公共包，做了一大堆工作，还不能预览示例组件 foo，本文便搭建 example 开发环境和打包构建，并在 example 中使用组件库。

1 搭建 example 开发环境

1.1 创建 example 项目

example 本质上就是一个 vite3 + vue3 的项目，可以通过 vite 来创建，也可以通过优雅哥编写的 yyg-cli 来创建一个全家桶项目，甚至可以手动搭建。后面程序员优雅哥会用 example 来实现一个完整的企业级中后台管理项目，用它来驱动组件库的组件开发。

简单一些，这里就使用 vite 来创建 example 项目。从命令行中进入 example 目录，运行：

pnpm create vite

输入该命令后，稍等一会儿会提示输入 project name，由于咱们已经创建 example 目录，这里输入一个点（.）即可；
framework 选择 Vue；
variant 选择 TypeScript。

1.2 修改 package.json

生成项目后，先不要着急安装依赖，因为有些依赖已经在 workspace-root 中安装了，在这个子模块中便无需重复安装。

修改 package.json 的 name、dependencies、devDependencies，修改后内容如下：

{
  "name": "@yyg-demo-ui/example",
  ...
  "dependencies": {
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.2.0",
    "typescript": "^4.6.4"
  }
}

1.3 修改 vite 配置文件

自动生成的 vite.config.ts 文件只配置了 vue 插件，咱需要对其进行其他配置，如 TSX 插件、ESLint 插件、路径别名等：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import eslint from 'vite-plugin-eslint'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    eslint()
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    cors: true,
    proxy: {}
  },
  build: {
    outDir: path.resolve(__dirname, '../dist')
  }
})

1.4 多环境支持

这一步非必须，只是为了后面的项目开发做准备的。多环境支持在之前的文章中已经详细讲过，各位可以翻阅之前的文章，这里仅快速操作一遍。

在 example 目录下创建 env 目录，并在该目录中分别创建四个文件：

VITE_BASE_API=/api
VITE_APP_NAME='demo app'

example/env/.env.dev：

VITE_BASE_API=/dev-api
NODE_ENV=production

example/env/.env.uat：

VITE_BASE_API=/uat-api

example/env/.env.prod：

VITE_BASE_API=/prod-api

在 vite.config.ts 中指定环境文件目录：

export default defineConfig({
  ...
  envDir: path.resolve(__dirname, 'env'),
	...
})

在 src 中创建 env.d.ts 文件，以便于类型提示：

/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_BASE_API: string;
  readonly VITE_APP_NAME: string;
}

// eslint-disable-next-line no-unused-vars
interface ImportMeta {
  readonly env: ImportMetaEnv
}

修改 package.json 的 scripts：

{
  ...
  "scripts": {
    "dev:dev": "vite --mode dev",
    "dev:uat": "vite --mode uat",
    "dev:prod": "vite --mode prod",
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
    "build:uat": "vue-tsc --noEmit && vite build --mode uat",
    "build:prod": "vue-tsc --noEmit && vite build --mode prod",
    "preview": "vite preview"
  },
  ...
}

在 main.ts 中测试输入环境变量：

const env = import.meta.env
console.log(env)

1.5 测试启动服务

执行 pnpm run dev:dev，测试服务是否能正常启动，然后在浏览器中访问 localhost:3000，测试界面是否正常，环境变量是否正常输出。

2 测试 foo 组件

example 能正常运行后，说明 example 已经初始化成功，接下来便需要测试前面开发的 foo 组件了。

2.1 安装依赖

由于自定义组件库依赖于 element-plus，首先需要在 example 中安装 element-plus：

pnpm install element-plus

接着安装咱们的本地组件库 @yyg-demo-ui/yyg-demo-ui：

pnpm install @yyg-demo-ui/yyg-demo-ui

此时 example 的 package.json dependencies 如下：

"dependencies": {
  "@yyg-demo-ui/yyg-demo-ui": "workspace:^1.0.0",
  "element-plus": "^2.2.21"
},

2.2 引入组件库

在 main.ts 中分别引入 element-plus 和自定义组件库：

...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import YygDemoUi from '@yyg-demo-ui/yyg-demo-ui'
...
const app = createApp(App)
app.use(ElementPlus)
app.use(YygDemoUi)
app.mount('#app')

2.3 使用组件

项目创建时自动在 src/style.css 生成了很多样式，可以将里面的内容都删除，留下一个空的 style.css 文件。

最后只需在 App.vue 中测试 foo 组件即可，修改 App.vue 如下：

<template>
  <div class="site">
    <h1>组件库测试站点 yyg-demo-ui</h1>
    <p>测试站点主要用于开发过程中测试组件，即在开发过程中由业务驱动组件开发。</p>
    <yyg-foo :msg="msg"></yyg-foo>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const msg = ref('hello world')
</script>

<style scoped lang="scss">
.site {
  padding: 20px;
}
</style>

2.4 运行查看效果

再次运行 pnpm run dev:dev，查看效果：

foo 组件的样式、功能、以及 testLog 函数都正常运行，则 example 和组件库的开发环境便已完成。

3 example 打包构建

在前面的 scripts 中添加了 build:dev、build:uat、build:prod命令，分别对应dev、uat、prod 三个环境，咱们就以 dev 环境为例说明 example的打包构建。

从命令行中进入 example 目录，依次进行打包构建、预览：

执行 pnpm run build:dev 进行打包，打包构建成功后，会在整个项目的根目录下生成 dist 目录（该目录在 vite.config.ts 中 build.outDir 配置）；
执行 pnpm run preview 对打包后的文件进行预览，访问控制台中输出的端口，运行效果与上面的效果一致。

到这里，example 的开发和构建便已经完成，咱们可以在 example 中使用组件库的组件。下文将介绍组件库文档的开发和构建。

到此这篇关于Vue3组件库框架搭建example环境的文章就介绍到这了,更多相关vue搭建example环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

解决vue数据更新但table内容不更新的问题
这篇文章主要给大家介绍了vue数据更新table内容不更新解决方法,文中有详细的代码示例供大家作为参考,感兴趣的同学可以参考阅读一下
2023-08-08
vue中axios实现数据交互与跨域问题
这篇文章主要介绍了vue中axios实现数据交互与跨域问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-05-05
vue使用Split封装通用拖拽滑动分隔面板组件
这篇文章主要介绍了vue使用Split封装通用拖拽滑动分隔面板组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
vue基础之面包屑和标签tag详解
这篇文章主要为大家详细介绍了vue的面包屑和标签tag，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
Vue项目中打包优化的四种方法详解
最近入职了新公司,接手了一个新拆分出来的Vue项目,针对该项目做了个打包优化,下面这篇文章主要给大家介绍了关于Vue项目中打包优化的四种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
vue中onmounted周期里获取不到dom的原因及分析
这篇文章主要介绍了vue中onmounted周期里获取不到dom的原因及分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue中this.$refs.name.offsetHeight获取不到值问题
这篇文章主要介绍了vue中this.$refs.name.offsetHeight获取不到值问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue实现element-ui对话框可拖拽功能
这篇文章主要介绍了vue实现element-ui对话框可拖拽功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
vue集成openlayers加载geojson并实现点击弹窗教程
这篇文章主要为大家详细介绍了vue集成openlayers加载geojson并实现点击弹窗教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
详解vue-router的导航钩子(导航守卫)
这篇文章主要介绍了详解vue-router的导航钩子(导航守卫)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11