fes.js/assets/guide_getting-started.md.2ed7c295.js

import{o as e,c as o,C as s,b as n,a,V as p,y as l}from"./chunks/framework.c1e1f082.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:#A6ACCD;"> </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:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">pnpm</span><span style="color:#A6ACCD;"> </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:#A6ACCD;"> </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:#A6ACCD;"> </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:#A6ACCD;"> </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-T-ttY" id="tab-vywId67" checked="checked"><label for="tab-vywId67">pnpm</label><input type="radio" name="group-T-ttY" id="tab-vDtTFEw"><label for="tab-vDtTFEw">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:#A6ACCD;"> </span><span style="color:#C3E88D;">create</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@fesjs/fes-app</span><span style="color:#A6ACCD;"> </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:#A6ACCD;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span><span style="color:#A6ACCD;"> </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),C=s("code",null,"Overwrite",-1),y=s("code",null,"Merge",-1),d=s("code",null,"workspace/myapp",-1),A=s("code",null,"template",-1),D=["src"],h=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-CDgxt" id="tab-cksvvEJ" checked="checked"><label for="tab-cksvvEJ">pnpm</label><input type="radio" name="group-CDgxt" id="tab-Si_JkvE"><label for="tab-Si_JkvE">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:#A6ACCD;"> </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:#A6ACCD;"> </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:#A6ACCD;"> </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:#A6ACCD;"> </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-eTB2T" id="tab-qBS3hfp" checked="checked"><label for="tab-qBS3hfp">pnpm</label><input type="radio" name="group-eTB2T" id="tab-UP9NCjB"><label for="tab-UP9NCjB">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:#A6ACCD;"> </span><span style="color:#C3E88D;">dev</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">run</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">v1.</span><span style="color:#F78C6C;">22.4</span></span>
<span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">fes</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">dev</span></span>
<span class="line"><span style="color:#FFCB6B;">Starting</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">the</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">development</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">server</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">http://localhost:</span><span style="color:#F78C6C;">8000</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">...</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Webpack</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">15.91s</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">DONE</span><span style="color:#A6ACCD;">  </span><span style="color:#C3E88D;">Compiled</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">15917ms</span><span style="color:#A6ACCD;">                               </span><span style="color:#F78C6C;">11</span><span style="color:#C3E88D;">:</span><span style="color:#F78C6C;">17</span><span style="color:#C3E88D;">:</span><span style="color:#F78C6C;">08</span><span style="color:#A6ACCD;"> </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:#A6ACCD;"> </span><span style="color:#C3E88D;">run</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">dev</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> fes dev</span></span>
<span class="line"><span style="color:#FFCB6B;">Starting</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">the</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">development</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">server</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">http://localhost:</span><span style="color:#F78C6C;">8000</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">...</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Webpack</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">3.66s</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">DONE</span><span style="color:#A6ACCD;">  </span><span style="color:#C3E88D;">Compiled</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">3662ms</span><span style="color:#A6ACCD;">                                </span><span style="color:#F78C6C;">11</span><span style="color:#C3E88D;">:</span><span style="color:#F78C6C;">17</span><span style="color:#C3E88D;">:</span><span style="color:#F78C6C;">46</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">AM</span></span></code></pre></div></div></div><p>Fes.js 会在 <code>http://localhost:8000</code> 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。</p>`,6),b=["src"],u=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-0ytP5" id="tab-ThJL9mO" checked="checked"><label for="tab-ThJL9mO">pnpm</label><input type="radio" name="group-0ytP5" id="tab-UtGPxNJ"><label for="tab-UtGPxNJ">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:#A6ACCD;"> </span><span style="color:#C3E88D;">build</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">run</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">v1.</span><span style="color:#F78C6C;">22.4</span></span>
<span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">fes</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">build</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Webpack</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">45.37s</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">✨</span><span style="color:#A6ACCD;">  </span><span style="color:#C3E88D;">Done</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">48.87s.</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:#A6ACCD;"> </span><span style="color:#C3E88D;">run</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">build</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> fes build</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Webpack</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">45.37s</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:#A6ACCD;">tree ./dist</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">dist</span></span>
<span class="line"><span style="color:#A6ACCD;">├── chunk-vendors.27cd4686.js</span></span>
<span class="line"><span style="color:#A6ACCD;">├── chunk-vendors.a5f5de67.css</span></span>
<span class="line"><span style="color:#A6ACCD;">├── index.11411d43.css</span></span>
<span class="line"><span style="color:#A6ACCD;">├── index.d72f1ba2.js</span></span>
<span class="line"><span style="color:#A6ACCD;">├── index.html</span></span>
<span class="line"><span style="color:#A6ACCD;">├── logo.png</span></span>
<span class="line"><span style="color:#A6ACCD;">└── static</span></span>
<span class="line"><span style="color:#A6ACCD;">    └── 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),_=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),m={name:"guide/getting-started.md"},B=Object.assign(m,{setup(E){return(g,v)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),C,a(" 或者 "),y,a(" 或者项目目录 "),d,a(" 不存在，会提示选取一个 "),A,a("： "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,D)]),h,s("img",{src:n(l)("home.png"),alt:"home"},null,8,b),u]))}});export{_ as __pageData,B as default};