大家好，关于好看的网站引导页源码分享很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于网页设计引导页的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！
本文为Varlet组件库源码主题阅读系列第四篇，读完本篇，可以了解到如何使用Vite的Api接口来启动服务、如何动态生成多语言的页面路由。
Varlet的文档网站其实就是一个Vue项目，整体分成两个单独的页面：文档页面及手机预览页面。
网站源代码文件默认是放在varlet-cli目录下，也就是脚手架的包里：
执行脚手架提供的dev命令时会把这个目录复制到varlet-ui/.varlet目录下，并且动态生成两个页面的路由配置文件：
然后使用Vite启动服务。
启动命令
先来看一下varlet-cli提供的dev命令都做了些什么。
//varlet-cli/src/index.ts\nimport{Command}from&39;\nconstprogram=newCommand()\n\nprogram\n.command(&39;)\n.option(&39;,&39;)\n.description(&39;)\n.action(dev)\n
可以看到这个命令是用来运行varlet的开发环境的，还提供了一个参数，用来强制开启Vite的依赖预构建功能，处理函数是dev：
//varlet-cli/src/commands/dev.ts\nexportasyncfunctiondev(cmd:{force?:boolean}){\nprocess.env.NODE_ENV=&39;\n//SRC_DIR：varlet-ui/src，即组件的源码目录\nensureDirSync(SRC_DIR)\nawaitstartServer(cmd.force)\n}\n
设置了环境变量，确保组件源目录是否存在，最后调用了startServer方法：
//varlet-cli/src/commands/dev.ts\nletserver:ViteDevServer\nletwatcher:FSWatcher\nasyncfunctionstartServer(force:boolean|undefined){\n//如果server实例已经存在了，那么代表是重启\nconstisRestart=Boolean(server)\n//先关闭之前已经存在的实例\nserver&&(awaitserver.close())\nwatcher&&(awaitwatcher.close())\n//构建站点入口\nawaitbuildSiteEntry()\n}\n
构建站点项目
复制站点文件的操作就在buildSiteEntry方法里：
//varlet-cli/src/compiler/compileSiteEntry.ts\nexportasyncfunctionbuildSiteEntry(){\ngetVarletConfig(true)\nawaitPromise.all([buildMobileSiteRoutes(),buildPcSiteRoutes(),buildSiteSource()])\n}\n
主要执行了四个方法，先看getVarletConfig：
//varlet-cli/src/config/varlet.config.ts\nexportfunctiongetVarletConfig(emit=false):Record<string,any>{\nletconfig:any={}\n//VARLET_CONFIG：varlet-ui/varlet.config.js，即varlet-ui组件库目录下的配置文件\nif(pathExistsSync(VARLET_CONFIG)){\n//require方法导入后会进行缓存，下次同样的导入会直接使用缓存，所以当重新启动服务时需要先删除缓存\ndeleterequire.cache[require.resolve(VARLET_CONFIG)]\nconfig=require(VARLET_CONFIG)\n}\n//默认配置，varlet-cli/varlet.default.config.js\ndeleterequire.cache[require.resolve(&39;)]\nconstdefaultConfig=require(&39;)\n//合并配置\nconstmergedConfig=merge(defaultConfig,config)\n\nif(emit){\nconstsource=JSON.stringify(mergedConfig,null,2)\n//SITE_CONFIG：resolve(CWD,&39;)\n//outputFileSyncOnChange方法会检查内容是否有变化，没有变化不会重新写入文件\noutputFileSyncOnChange(SITE_CONFIG,source)\n}\nreturnmergedConfig\n}\n
这个方法主要是合并组件库目录varlet-ui下的配置文件和默认的配置文件，然后将合并后的配置写入到站点的目标目录varlet-ui/.varlet/下。
合并完配置后执行了三个build方法：
生成手机页面路由
1.buildMobileSiteRoutes()方法：
//varlet-cli/src/compiler/compileSiteEntry.ts\nexportasyncfunctionbuildMobileSiteRoutes(){\nconstexamples:string[]=awaitfindExamples()\n//拼接路由\nconstroutes=examples.map(\n(example)=>`\n{\npath:&39;,\n//@ts-ignore\ncomponent:()=>import(&39;)\n}`\n)\n\nconstsource=`exportdefault[\\\n${routes.join(&39;)}\n]`\n//SITE_MOBILE_ROUTES：resolve(CWD,&39;)，站点的手机预览页面路由文件\nawaitoutputFileSyncOnChange(SITE_MOBILE_ROUTES,source)\n}\n
这个方法主要是构建手机预览页面的路由文件，路由其实就是路径到组件的映射，所以先获取了路由组件列表，然后按格式拼接路由的内容，最后写入文件。
findExamples()：
//varlet-cli/src/compiler/compileSiteEntry.ts\nexportfunctionfindExamples():Promise<string[]>{\n//SRC_DIR：varlet-ui/scr目录，即组件库的源码目录\n//EXAMPLE_DIR_NAME：example，即每个组件的示例目录\n//DIR_INDEX：index.vue\nreturnglob(`${SRC_DIR}/**/${EXAMPLE_DIR_NAME}/${DIR_INDEX}`)\n}\n
从组件库源码目录里获取每个组件的示例组件，每个组件都是一个单独的目录，目录下存在一个example示例文件目录，该目录下的index.vue即示例组件，比如按钮组件Button的目录及示例组件如下：
这个方法获取到的是绝对路径，并不能用作路由的path，所以需要进行一下处理：
//varlet-cli/src/compiler/compileSiteEntry.ts\nconstEXAMPLE_COMPONENT_NAME_RE=/\\/([-\\w]+)\\/example\\/index.vue/\nexportfunctiongetExampleRoutePath(examplePath:string):string{\nreturn&39;+examplePath.match(EXAMPLE_COMPONENT_NAME_RE)?.[1]\n}\n
提取出example前面的一段，即组件的目录名称，也就是组件的名称，最后生成的路由数据如下：
生成pc页面路由
2.buildPcSiteRoutes()方法：
pc页面的路由稍微会复杂一点：
//varlet-cli/src/compiler/compileSiteEntry.ts\nexportasyncfunctionbuildPcSiteRoutes(){\nconst[componentDocs,rootDocs,rootLocales]=awaitPromise.all([\nfindComponentDocs(),\nfindRootDocs(),\nfindRootLocales(),\n])\n}\n
获取了三类文件，第一种：
//varlet-cli/src/compiler/compileSiteEntry.ts\nexportfunctionfindComponentDocs():Promise<string[]>{\n//SRC_DIR：varlet-ui/scr目录，即组件库的源码目录\n//DOCS_DIR_NAME：docs\nreturnglob(`${SRC_DIR}/**/${DOCS_DIR_NAME}/*.md`)\n}\n
获取组件目录varlet-ui/src/**/docs/*.md文件，也就是获取每个组件的文档文件，比如Button组件：
文档是markdown格式编写的。
第二种：
//varlet-cli/src/compiler/compileSiteEntry.ts\nexportfunctionfindRootDocs():Promise<string[]>{\n//ROOT_DOCS_DIR：varlet-ui/docs\nreturnglob(`${ROOT_DOCS_DIR}/*.md`)\n}\n
获取除组件文档外的其他文档，比如基本介绍、快速开始之类的。
第三种：
//varlet-cli/src/compiler/compileSiteEntry.ts\nexportasyncfunctionfindRootLocales():Promise<string[]>{\n//默认的语言\nconstdefaultLanguage=get(getVarletConfig(),&39;)\n//SITE：varlet-cli/site/\n//LOCALE_DIR_NAME：locale\nconstbaseLocales=awaitglob(`${SITE}/pc/pages/**/${LOCALE_DIR_NAME}/*.ts`)\n}\n
获取默认的语言类型，默认是zh-CN，然后获取站点pc页面的locale文件，继续：
//varlet-cli/src/compiler/compileSiteEntry.ts\nconstROOT_LOCALE_RE=/\\/pages\\/([-\\w]+)\\/locale\\/([-\\w]+)\\.ts/\nexportasyncfunctionfindRootLocales():Promise<string[]>{\n//…\nconstfilterMap=newMap()\nbaseLocales.forEach((locale)=>{\n//解析出页面path及文件的语言类型\nconst[,routePath,language]=locale.match(ROOT_LOCALE_RE)??[]\n//SITE_PC_DIR：varlet-ui/.varlet/site/pc\nfilterMap.set(routePath+language,slash(`${SITE_PC_DIR}/pages/${routePath}/locale/${language}.ts`))\n})\nreturnPromise.resolve(Array.from(filterMap.values()))\n}\n
返回获取到pc站点的locale文件路径，也就是这些文件：
目前只有一个Index页面，也就是站点的首页：
回到buildPcSiteRoutes()方法，文件路径都获取完了，接下来肯定就是遍历生成路由配置了：
//varlet-cli/src/compiler/compileSiteEntry.ts\nexportasyncfunctionbuildPcSiteRoutes(){\n//…\n//生成站点页面路由\nconstrootPagesRoutes=rootLocales.map(\n(rootLocale)=>`\n{\npath:&39;,\n//@ts-ignore\ncomponent:()=>import(&39;)\n}\\\n`\n)\n}\n
有多少种翻译，同一个组件就会生成多少种路由，对于站点首页来说，目前存在en-US.ts、zh-CN两种翻译文件，那么会生成下面两个路由：
继续：
//varlet-cli/src/compiler/compileSiteEntry.ts\nexportasyncfunctionbuildPcSiteRoutes(){\n//…\n//生成每个组件的文档路由\nconstcomponentDocsRoutes=componentDocs.map(\n(componentDoc)=>`\n{\npath:&39;,\n//@ts-ignore\ncomponent:()=>import(&39;)\n}`\n)\n//生成其他文档路由\nconstrootDocsRoutes=rootDocs.map(\n(rootDoc)=>`\n{\npath:&39;,\n//@ts-ignore\ncomponent:()=>import(&39;)\n}`\n)\n}\n
接下来拼接了组件文档和其他文档的路由，同样也是存在几种翻译，就会生成几个路由：
继续：
//varlet-cli/src/compiler/compileSiteEntry.ts\nexportasyncfunctionbuildPcSiteRoutes(){\n//…\nconstlayoutRoutes=`{\npath:&39;,\n//@ts-ignore\ncomponent:()=>import(&39;),\nchildren:[\n${[…componentDocsRoutes,rootDocsRoutes].join(&39;)},\n]\n}`\n}\n
这个路由是干嘛的呢，其实就是真正的文档页面了：
组件文档路由和其他文档路由都是它的子路由，Layout.vue组件提供了组件详情页面的基本骨架，包括页面顶部栏、左边的菜单栏，中间部分就是子路由的出口，即具体的文档，右侧通过iframe引入了手机预览页面。
最后导出路由配置及写入到文件即可：
//varlet-cli/src/compiler/compileSiteEntry.ts\nexportasyncfunctionbuildPcSiteRoutes(){\n//…\nconstsource=`exportdefault[\\\n${rootPagesRoutes.join(&39;)},\n${layoutRoutes}\n]`\n//SITE_PC_ROUTES：varlet-ui/.varlet/pc.routes.ts\noutputFileSyncOnChange(SITE_PC_ROUTES,source)\n}\n
复制站点文件
3.buildSiteSource()方法：
//varlet-cli/src/compiler/compileSiteEntry.ts\nexportasyncfunctionbuildSiteSource(){\nreturncopy(SITE,SITE_DIR)\n}\n
这个方法很简单，就是将站点的项目文件由varlet-cli/site目录复制到varlet-ui/.varlet/site目录下。
总结一下上述操作，就是将站点的源代码文件由cli包复制到ui包，然后动态生成站点项目的路由文件。整个站点分为两个页面pc、mobile，pc页面主要是提供文档展示及嵌入mobile页面，mobile页面用来展示各个组件的demo。
启动服务
项目准备就绪，接下来就是启动服务了，回到startServer方法：
//varlet-ui/src/commands/dev.ts\nasyncfunctionstartServer(force:boolean|undefined){\nawaitbuildSiteEntry()\n//获取合并后的配置\nconstvarletConfig=getVarletConfig()\n//获取Vite的启动配置，部分配置来自于varletConfig\nconstdevConfig=getDevConfig(varletConfig)\n//将是否强制进行依赖预构建配置合并到Vite配置\nconstinlineConfig=merge(devConfig,force?{server:{force:true}}:{})\n}\n
生成Vite的启动配置，然后就可以启动服务了：
//varlet-ui/src/commands/dev.ts\nasyncfunctionstartServer(force:boolean|undefined){\n//…\n//启动Vite服务\nserver=awaitcreateServer(inlineConfig)\nawaitserver.listen()\nserver.printUrls()\n//VARLET_CONFIG：varlet-ui/varlet.config.js\n//监听用户配置文件，修改了就重新启动服务\nif(pathExistsSync(VARLET_CONFIG)){\nwatcher=chokidar.watch(VARLET_CONFIG)\nwatcher.on(&39;,()=>startServer(force))\n}\n}\n
使用了Vite的JavaScriptAPI来启动服务，并且当配置文件发送变化会重启服务。
Vite配置
接下来详细看一下上一步启动服务时的Vite配置：
//varlet-cli/src/config/vite.config.ts\nexportconstVITE_RESOLVE_EXTENSIONS=[&39;,&39;,&39;,&39;,&39;,&39;,&39;]\n\nexportfunctiongetDevConfig(varletConfig:Record<string,any>):InlineConfig{\n//默认语言\nconstdefaultLanguage=get(varletConfig,&39;)\n//端口\nconsthost=get(varletConfig,&39;)\n\nreturn{\nroot:SITE_DIR,//项目根目录：varlet-ui/.varlet/site\nresolve:{\nextensions:VITE_RESOLVE_EXTENSIONS,//导入时想要省略的扩展名列表\nalias:{//导入路径别名\n&39;:SITE_CONFIG,\n&39;:SITE_PC_ROUTES,\n&39;:SITE_MOBILE_ROUTES,\n},\n},\nserver:{//设置要监听的端口号和ip地址\nport:get(varletConfig,&39;),\nhost:host===&39;?&39;:host,\n},\npublicDir:SITE_PUBLIC_PATH,//作为静态资源服务的文件夹：varlet-ui/public\n//…\n}\n}\n
设置了一些基本配置，你可能会有个小疑问，站点项目明明是个多页面项目，但是上面似乎并没有配置任何多页面相关的内容，其实在VueCli项目中是需要修改入口配置的，但是在Vite项目中不需要，这可能就是开发环境不需要打包的一个好处吧，不过虽然开发环境不需要配置，但是最后打包的时候是需要的：
接下来还配置了一系列的插件：
importvuefrom&39;\nimportmdfrom&39;\nimportjsxfrom&39;\nimport{injectHtml}from&39;\n\nexportfunctiongetDevConfig(varletConfig:Record<string,any>):InlineConfig{\n//…\nreturn{\n//…\nplugins:[\n//提供Vue3单文件组件支持\nvue({\ninclude:[/\\.vue$/,/\\.md$/],\n}),\nmd({style:get(varletConfig,&39;)}),\n//提供Vue3JSX支持\njsx(),\n//给html页面注入数据\ninjectHtml({\ndata:{\npcTitle:get(varletConfig,`pc.title[&39;]`),\nmobileTitle:get(varletConfig,`mobile.title[&39;]`),\nlogo:get(varletConfig,`logo`),\nbaidu:get(varletConfig,`analysis.baidu`,&39;),\n},\n}),\n],\n}\n}\n
一共使用了四个插件，其中的md插件是Varlet自己编写的，顾名思义，就是用来处理md文件的，具体逻辑我们下一篇再看。
打包
最后就是站点项目的打包了，使用的是varlet-cli提供的build命令：
//varlet-cli/src/index.ts\nprogram.command(&39;).description(&39;).action(build)\n
处理函数为build：
//varlet-cli/src/commands/build.ts\nexportasyncfunctionbuild(){\nprocess.env.NODE_ENV=&39;\n\nensureDirSync(SRC_DIR)\nawaitbuildSiteEntry()\nconstvarletConfig=getVarletConfig()\n//获取Vite的打包配置\nconstbuildConfig=getBuildConfig(varletConfig)\n\nawaitbuildVite(buildConfig)\n}\n
逻辑很简单，先设置环境变量为生产环境，然后同样执行了buildSiteEntry方法，最后获取Vite的打包配置进行打包即可：
//varlet-cli/src/config/vite.config.ts\nexportfunctiongetBuildConfig(varletConfig:Record<string,any>):InlineConfig{\nconstdevConfig=getDevConfig(varletConfig)\n\nreturn{\n…devConfig,\nbase:&39;,//公共基础路径\nbuild:{\noutDir:SITE_OUTPUT_PATH,//varlet-ui/site\nbrotliSize:false,//禁用brotli压缩大小报告\nemptyOutDir:true,//输出目录不在root目录下，所以需要手动开启该配置来清空输出目录\ncssTarget:&39;,//https://www.vitejs.net/config/39;index.html&39;mobile.html'),\n},\n},\n},\n}\n}\n
在启动服务的配置基础上增加了几个打包相关的配置。
到这里文档站点的初始化、启动、构建办法就介绍完了，我们下一篇再见~
关于本次好看的网站引导页源码分享和网页设计引导页的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。