<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>CLI on Saiga</title>
    <link>http://localhost:1313/tags/cli/</link>
    <description>Recent content in CLI on Saiga</description>
    <generator>Hugo</generator>
    <language>zh-cn</language>
    <managingEditor>wuwenzen@outlook.com (wuwj)</managingEditor>
    <webMaster>wuwenzen@outlook.com (wuwj)</webMaster>
    <lastBuildDate>Sat, 28 Sep 2024 00:00:00 +0000</lastBuildDate>
    <atom:link href="http://localhost:1313/tags/cli/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>写几个小脚本帮自己省时间：前端 CLI / 脚手架实践</title>
      <link>http://localhost:1313/posts/2024-09-28-cli-and-scaffolding-tools/</link>
      <pubDate>Sat, 28 Sep 2024 00:00:00 +0000</pubDate><author>wuwenzen@outlook.com (wuwj)</author>
      <guid>http://localhost:1313/posts/2024-09-28-cli-and-scaffolding-tools/</guid>
      <description>&lt;p&gt;有段时间我发现自己经常在做几件很机械的事：&lt;/p&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;新建一个页面：建目录、复制模板、改标题、改路由&lt;/li&gt;&#xA;&lt;li&gt;加一个接口：建 service 文件、写类型、写请求封装&lt;/li&gt;&#xA;&lt;li&gt;搭一个模块：列表页 + 详情页 + 编辑页，一遍遍重复&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;p&gt;于是索性写了一组小 CLI 工具，把这些动作变成命令行：&lt;/p&gt;&#xA;&lt;blockquote&gt;&#xA;&lt;p&gt;&lt;code&gt;npx fe-tools create-page&lt;/code&gt;&lt;br&gt;&#xA;&lt;code&gt;npx fe-tools create-api&lt;/code&gt;&lt;br&gt;&#xA;&lt;code&gt;npx fe-tools create-module&lt;/code&gt;&lt;/p&gt;&#xA;&lt;/blockquote&gt;&#xA;&lt;p&gt;这篇文章就简单记录一下这几个脚本的思路。&lt;/p&gt;&#xA;&lt;hr&gt;&#xA;&lt;h2 id=&#34;1-create-page新页面一条命令&#34;&gt;1. &lt;code&gt;create-page&lt;/code&gt;：新页面一条命令&lt;/h2&gt;&#xA;&lt;p&gt;很多中台项目新增页面的套路都差不多：&lt;/p&gt;&#xA;&lt;ol&gt;&#xA;&lt;li&gt;在 &lt;code&gt;views&lt;/code&gt; 下建目录&lt;/li&gt;&#xA;&lt;li&gt;填一个基础骨架组件&lt;/li&gt;&#xA;&lt;li&gt;在路由里挂载&lt;/li&gt;&#xA;&lt;li&gt;有的还要加到菜单配置里&lt;/li&gt;&#xA;&lt;/ol&gt;&#xA;&lt;p&gt;用 Node.js 写了一个 &lt;code&gt;create-page&lt;/code&gt; 命令：&lt;/p&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-bash&#34; data-lang=&#34;bash&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;npx fe-tools create-page&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;命令执行后，做几件事：&lt;/p&gt;&#xA;&lt;ol&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;命令行交互询问：&lt;/p&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;页面英文名（路由 path）&lt;/li&gt;&#xA;&lt;li&gt;页面中文标题&lt;/li&gt;&#xA;&lt;li&gt;页面类型：列表 / 表单 / 详情 / 组合&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;/li&gt;&#xA;&lt;li&gt;&#xA;&lt;p&gt;基于模板生成对应文件，例如：&lt;/p&gt;&#xA;&lt;/li&gt;&#xA;&lt;/ol&gt;&#xA;&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-vue&#34; data-lang=&#34;vue&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;template&lt;/span&gt;&amp;gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;PageWrapper&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;title&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;投资人概览&amp;#34;&lt;/span&gt;&amp;gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#75715e&#34;&gt;&amp;lt;!--&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;TODO&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;填充页面内容&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;--&amp;gt;&lt;/span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &amp;lt;/&lt;span style=&#34;color:#f92672&#34;&gt;PageWrapper&lt;/span&gt;&amp;gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;/&lt;span style=&#34;color:#f92672&#34;&gt;template&lt;/span&gt;&amp;gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;script&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;setup&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;lang&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;ts&amp;#34;&lt;/span&gt;&amp;gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;// 预留接口调用和状态管理位置&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;&amp;lt;/&lt;span style=&#34;color:#f92672&#34;&gt;script&lt;/span&gt;&amp;gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;ol start=&#34;3&#34;&gt;&#xA;&lt;li&gt;自动往某个路由模块里追加配置&lt;/li&gt;&#xA;&lt;/ol&gt;&#xA;&lt;p&gt;这样新页面出现的那一刻就已经可以访问，只需要填内容。&lt;/p&gt;&#xA;&lt;hr&gt;&#xA;&lt;h2 id=&#34;2-create-api接口封装生成器&#34;&gt;2. &lt;code&gt;create-api&lt;/code&gt;：接口封装生成器&lt;/h2&gt;&#xA;&lt;p&gt;写接口封装时经常要做：&lt;/p&gt;</description>
    </item>
  </channel>
</rss>
