Vue3企业优雅实战-组件库框架-6搭建示例环境

.site{padding:20px;}篇幅大篇幅搭建组件库的开发环境，包括：创建组件、创建组件库入口、组件库样式架构、组件librarypublicpackage，做了很多工作，示例组件foo还不能预览。本文将搭建示例开发环境并打包构建，并在示例中使用组件库。1搭建示例开发环境1.1创建示例项目示例本质上是一个vite3+vue3项目，可以通过vite创建，也可以通过优雅哥写的yyg-cli创建全家桶项目，甚至可以手动搭建。后面程序员丫丫会用实例实现一个完整的企业级中后台管理项目，并用它来驱动组件库的组件开发。更简单，这里使用vite创建示例工程。从命令行进入example目录，运行：pnpmcreatevite输入这个命令后，过一会会提示输入项目名，因为我们已经创建了example目录，这里输入一个点（.）即可；框架选择Vue；变体选择TypeScript。1.2修改package.json生成项目后，不要着急安装依赖，因为一些依赖已经安装在workspace-root，不需要在本子模块重复安装。修改package.json的名称、依赖和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插件,路径别名等:vitejs/plugin-vue-jsx'exportdefaultdefineConfig({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目录，并在该目录下创建四个文件：/env/.env.uat:VITE_BASE_API=/uat-apiexample/env/.env.prod:VITE_BASE_API=/prod-api在vite.config.ts中指定环境文件目录：exportdefaultdefineConfig({...envDir:path.resolve(__dirname,'env'),...})在src中创建env.d.ts文件以方便类型提示：///interfaceImportMetaEnv{readonlyVITE_BASE_API:细绳;readonlyVITE_APP_NAME:string;}//eslint-disable-next-lineno-unused-varsinterfaceImportMeta{readonlyenv:ImportMetaEnv}修改package.json的scripts:{..."scripts":{"dev:dev":"vite--modedev","dev:uat":"vite--modeuat","dev:prod":"vite--modeprod","build:dev":"vue-tsc--noEmit&&vitebuild--modedev","build:uat":"vue-tsc--noEmit&&vitebuild--modeuat","build:prod":"vue-tsc--noEmit&&vitebuild--modeprod","preview":"vitepreview"},...}测试main.ts中输入环境变量：constenv=import.meta.envconsole.log(env)1.5测试启动服务执行pnpmrundev:dev测试服务是否可以正常启动，然后访问localhost在浏览器中：3000，测试界面是否正常，环境变量是否正常输出2测试foo组件example可以正常运行后，说明example已经初始化成功，接下来需要测试以前开发的foo组件。2.1安装依赖由于自定义组件库依赖element-plus，所以首先需要在示例中安装element-plus：pnpminstallelement-plus然后安装我们本地的组件库@yyg-demo-ui/yyg-demo-ui:pnpminstall@yyg-demo-ui/yyg-demo-ui此时示例的package.json依赖如下："dependencies":{"@yyg-demo-ui/yyg-demo-ui":"workspace:^1.0.0","element-plus":"^2.2.21"},2.2导入组件库在main.ts中分别引入element-plus和自定义组件库：...importElementPlusfrom'element-plus'导入'element-plus/dist/index.css'从'@yyg-demo-ui/yyg-demo-ui'导入YygDemoUi...constapp=createApp(App)app.use(ElementPlus)app。使用（YygDemoUi）应用程序。mount('#app')2.3使用组件工程创建时，src/style.css中会自动生成很多样式，可以将里面的内容全部删除，留下一个空的style.css文件。最后直接在App.vue中测试foo组件，修改App.vue如下：.site{padding:20px;}2.4运行查看效果再次运行pnpmrundev:dev查看效果：foo组件样式、函数、testLog函数运行正常，example和组件库开发环境搭建完成。3示例打包构建在前面的脚本中，增加了build:dev、build:uat、build:prod命令，分别对应dev、uat、prod三个环境。下面以dev环境为例，说明示例的打包和搭建。从命令行进入example目录，依次打包构建，预览：执行pnpmrunbuild:dev进行打包，打包成功后会在整个项目的根目录下生成一个dist目录（这个目录在vite.config.tsbuild.outDir配置）；执行pnpmrunpreview预览打包后的文件，在控制台访问端口输出，运行效果和上面效果一致。至此，示例的开发搭建已经完成，我们可以在示例中使用组件库的组件了。下面介绍组件库文档的开发和构建。