【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 6 搭建example环境

本文介绍了如何搭建Vue3组件库的example开发环境,包括创建example项目、修改package.json、vite配置文件,实现多环境支持,并测试组件。文章详细阐述了每个步骤的操作过程,例如安装依赖、引入组件库、使用组件以及打包构建流程。通过这些步骤,读者可以了解如何在example中优雅地使用和测试自定义组件库。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本系列已更新文章:
分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率
开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目
Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo
Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root
Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境
Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构
Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包

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

1 搭建 example 开发环境

1.1 创建 example 项目

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

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

pnpm create vite
  1. 输入该命令后,稍等一会儿会提示输入 project name,由于咱们已经创建 example 目录,这里输入一个点(.)即可;
  2. framework 选择 Vue
  3. variant 选择 TypeScript

1.2 修改 package.json

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

修改 package.jsonnamedependenciesdevDependencies,修改后内容如下:

{
   
   
  "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'

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员优雅哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值