fes.js/assets/guide_getting-started.md.f79de373.js

import{o as e,c as o,C as s,b as n,a,V as p,y as l}from"./chunks/framework.b31a4d00.js";const t=p(`<h1 id="快速上手" tabindex="-1">快速上手 <a class="header-anchor" href="#快速上手" aria-label="Permalink to &quot;快速上手&quot;">​</a></h1><h2 id="依赖环境" tabindex="-1">依赖环境 <a class="header-anchor" href="#依赖环境" aria-label="Permalink to &quot;依赖环境&quot;">​</a></h2><p>首先得有 <a href="https://nodejs.org/" target="_blank" rel="noreferrer">Node.js</a>，并确保 node 版本是 12.13 或以上。</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 打印 node 版本</span></span>
<span class="line"><span style="color:#FFCB6B;">node</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">-v</span></span>
<span class="line"><span style="color:#FFCB6B;">v12.13.0</span></span></code></pre></div><p>推荐使用 <a href="https://pnpm.io/installation" target="_blank" rel="noreferrer">pnpm</a> 管理 npm 依赖</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 全局安装 pnpm</span></span>
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">-g</span></span></code></pre></div><h2 id="创建项目" tabindex="-1">创建项目 <a class="header-anchor" href="#创建项目" aria-label="Permalink to &quot;创建项目&quot;">​</a></h2><p>这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。</p><h5 id="步骤-1-创建工作空间" tabindex="-1">步骤 1 创建工作空间 <a class="header-anchor" href="#步骤-1-创建工作空间" aria-label="Permalink to &quot;步骤 1 创建工作空间&quot;">​</a></h5><p>如果工作空间不存在，则先创建：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建目录 workspace</span></span>
<span class="line"><span style="color:#FFCB6B;">mkdir</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">workspace</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"># 进入目录 workspace</span></span>
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">workspace</span></span></code></pre></div><p>如果工作空间已存在，则直接进入</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 进入目录 workspace</span></span>
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">workspace</span></span></code></pre></div><h5 id="步骤-2-在工作空间创建项目" tabindex="-1">步骤 2 在工作空间创建项目 <a class="header-anchor" href="#步骤-2-在工作空间创建项目" aria-label="Permalink to &quot;步骤 2 在工作空间创建项目&quot;">​</a></h5><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-Z9dJZ" id="tab-FCzGVJt" checked="checked"><label for="tab-FCzGVJt">pnpm</label><input type="radio" name="group-Z9dJZ" id="tab-IkEh3uw"><label for="tab-IkEh3uw">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建模板</span></span>
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">create</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">@fesjs/fes-app</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">myapp</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建模板</span></span>
<span class="line"><span style="color:#FFCB6B;">npx</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">myapp</span></span></code></pre></div></div></div><p>如果项目文件夹 <code>workspace/myapp</code> 已经存在，会提示目录已存在：</p>`,16),c=["src"],r=s("p",null,"你可以选择：",-1),i=s("ul",null,[s("li",null,[s("code",null,"Overwrite"),a(" 删除项目文件夹，重新创建项目。")]),s("li",null,[s("code",null,"Merge"),a(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),y=s("code",null,"Overwrite",-1),d=s("code",null,"Merge",-1),B=s("code",null,"workspace/myapp",-1),E=s("code",null,"template",-1),h=["src"],C=p(`<p>你可以选默认适用于中后台前端应用的 <code>PC</code> 类型，也可以选适用于移动端的 <code>H5</code> 类型。</p><h5 id="步骤-3-安装依赖" tabindex="-1">步骤 3 安装依赖 <a class="header-anchor" href="#步骤-3-安装依赖" aria-label="Permalink to &quot;步骤 3 安装依赖&quot;">​</a></h5><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-5M_NL" id="tab-Cth2Wn2" checked="checked"><label for="tab-Cth2Wn2">pnpm</label><input type="radio" name="group-5M_NL" id="tab-paAd5l2"><label for="tab-paAd5l2">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 进入项目目录</span></span>
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">myapp</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"># 安装依赖</span></span>
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 进入项目目录</span></span>
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">myapp</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"># 安装依赖</span></span>
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span></span></code></pre></div></div></div><h2 id="启动项目" tabindex="-1">启动项目 <a class="header-anchor" href="#启动项目" aria-label="Permalink to &quot;启动项目&quot;">​</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-oinXN" id="tab-AMs5WdE" checked="checked"><label for="tab-AMs5WdE">pnpm</label><input type="radio" name="group-oinXN" id="tab-LhpRnBi"><label for="tab-LhpRnBi">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 开发调试</span></span>
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">run</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">v1.22.4</span></span>
<span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span>
<span class="line"><span style="color:#FFCB6B;">Starting</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">the</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">development</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">server</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">http://localhost:8000</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">...</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">Webpack</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">15.91</span><span style="color:#C3E88D;">s</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">DONE</span><span style="color:#BABED8;">  </span><span style="color:#C3E88D;">Compiled</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">15917</span><span style="color:#C3E88D;">ms</span><span style="color:#BABED8;">                               </span><span style="color:#F78C6C;">11</span><span style="color:#C3E88D;">:17:08</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">AM</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 开发调试</span></span>
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">run</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;"> fes dev</span></span>
<span class="line"><span style="color:#FFCB6B;">Starting</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">the</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">development</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">server</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">http://localhost:8000</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">...</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">Webpack</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">3.66</span><span style="color:#C3E88D;">s</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">DONE</span><span style="color:#BABED8;">  </span><span style="color:#C3E88D;">Compiled</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">3662</span><span style="color:#C3E88D;">ms</span><span style="color:#BABED8;">                                </span><span style="color:#F78C6C;">11</span><span style="color:#C3E88D;">:17:46</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">AM</span></span></code></pre></div></div></div><p>Fes.js 会在 <code>http://localhost:8000</code> 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。</p>`,6),D=["src"],b=p(`<h2 id="部署发布" tabindex="-1">部署发布 <a class="header-anchor" href="#部署发布" aria-label="Permalink to &quot;部署发布&quot;">​</a></h2><h3 id="构建" tabindex="-1">构建 <a class="header-anchor" href="#构建" aria-label="Permalink to &quot;构建&quot;">​</a></h3><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-LPc4-" id="tab-h1Eu_NU" checked="checked"><label for="tab-h1Eu_NU">pnpm</label><input type="radio" name="group-LPc4-" id="tab-XH2Vaui"><label for="tab-XH2Vaui">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 构建</span></span>
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">build</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">run</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">v1.22.4</span></span>
<span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">build</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">Webpack</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">45.37</span><span style="color:#C3E88D;">s</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">✨</span><span style="color:#BABED8;">  </span><span style="color:#C3E88D;">Done</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">48.87</span><span style="color:#C3E88D;">s.</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 构建</span></span>
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">run</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">build</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;"> fes build</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">Webpack</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">45.37</span><span style="color:#C3E88D;">s</span></span></code></pre></div></div></div><p>构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。</p><div class="language-base"><button title="Copy Code" class="copy"></button><span class="lang">base</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">tree ./dist</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">dist</span></span>
<span class="line"><span style="color:#babed8;">├── chunk-vendors.27cd4686.js</span></span>
<span class="line"><span style="color:#babed8;">├── chunk-vendors.a5f5de67.css</span></span>
<span class="line"><span style="color:#babed8;">├── index.11411d43.css</span></span>
<span class="line"><span style="color:#babed8;">├── index.d72f1ba2.js</span></span>
<span class="line"><span style="color:#babed8;">├── index.html</span></span>
<span class="line"><span style="color:#babed8;">├── logo.png</span></span>
<span class="line"><span style="color:#babed8;">└── static</span></span>
<span class="line"><span style="color:#babed8;">    └── logo.0f85bba0.png</span></span></code></pre></div><h3 id="本地验证" tabindex="-1">本地验证 <a class="header-anchor" href="#本地验证" aria-label="Permalink to &quot;本地验证&quot;">​</a></h3><p>发布之前，可以通过 <a href="https://github.com/vercel/serve" target="_blank" rel="noreferrer">serve</a> 做本地验证，验证结果应该跟执行 <code>fes dev</code> 的结果一样。</p><h3 id="部署" tabindex="-1">部署 <a class="header-anchor" href="#部署" aria-label="Permalink to &quot;部署&quot;">​</a></h3><p>本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。</p>`,9),v=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),u={name:"guide/getting-started.md"},_=Object.assign(u,{setup(m){return(A,g)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),y,a(" 或者 "),d,a(" 或者项目目录 "),B,a(" 不存在，会提示选取一个 "),E,a("： "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,h)]),C,s("img",{src:n(l)("home.png"),alt:"home"},null,8,D),b]))}});export{v as __pageData,_ as default};