fes.js/guide/getting-started.html

106 lines
42 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="VuePress 2.0.0-beta.53">
<style>
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html, body {
background-color: var(--c-bg);
}
</style>
<script>
const userMode = localStorage.getItem('vuepress-color-scheme');
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true);
}
</script>
<link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>快速上手 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案">
<link rel="preload" href="/fes.js/assets/style.2de37a47.css" as="style" /><link rel="stylesheet" href="/fes.js/assets/style.2de37a47.css" />
<link rel="modulepreload" href="/fes.js/assets/app.0e52fd78.js"><link rel="modulepreload" href="/fes.js/assets/getting-started.html.be236215.js"><link rel="modulepreload" href="/fes.js/assets/getting-started.html.4d70133e.js"><link rel="prefetch" href="/fes.js/assets/index.html.6780e1c8.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.1d6970fe.js" as="script" /><link rel="prefetch" href="/fes.js/assets/builder.html.22261726.js" as="script" /><link rel="prefetch" href="/fes.js/assets/config.html.c4a15c99.js" as="script" /><link rel="prefetch" href="/fes.js/assets/contributing.html.7d6da0d3.js" as="script" /><link rel="prefetch" href="/fes.js/assets/css.html.27ef014b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/directory-structure.html.ce4fcc29.js" as="script" /><link rel="prefetch" href="/fes.js/assets/env.html.a0701520.js" as="script" /><link rel="prefetch" href="/fes.js/assets/faq.html.fefabf8d.js" as="script" /><link rel="prefetch" href="/fes.js/assets/image.html.2eb861b3.js" as="script" /><link rel="prefetch" href="/fes.js/assets/mock.html.72be2e98.js" as="script" /><link rel="prefetch" href="/fes.js/assets/plugin.html.09b9a75f.js" as="script" /><link rel="prefetch" href="/fes.js/assets/public.html.9293714d.js" as="script" /><link rel="prefetch" href="/fes.js/assets/route.html.6b694798.js" as="script" /><link rel="prefetch" href="/fes.js/assets/runtime-config.html.e9577811.js" as="script" /><link rel="prefetch" href="/fes.js/assets/template.html.85d1e409.js" as="script" /><link rel="prefetch" href="/fes.js/assets/upgrade3.html.ac1df34a.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.30c868a6.js" as="script" /><link rel="prefetch" href="/fes.js/assets/cli.html.57fcc28a.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.cb189ec9.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.3aeeeca2.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.a37b972e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.0224a548.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.867a41f0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.696478cf.js" as="script" /><link rel="prefetch" href="/fes.js/assets/access.html.7d77d2a9.js" as="script" /><link rel="prefetch" href="/fes.js/assets/editor.html.b3a91abd.js" as="script" /><link rel="prefetch" href="/fes.js/assets/enums.html.54923f93.js" as="script" /><link rel="prefetch" href="/fes.js/assets/icon.html.14930990.js" as="script" /><link rel="prefetch" href="/fes.js/assets/jest.html.fc295244.js" as="script" /><link rel="prefetch" href="/fes.js/assets/layout.html.fa16a9e5.js" as="script" /><link rel="prefetch" href="/fes.js/assets/locale.html.2e3b15df.js" as="script" /><link rel="prefetch" href="/fes.js/assets/login.html.b3c8ff78.js" as="script" /><link rel="prefetch" href="/fes.js/assets/model.html.8c95b8cf.js" as="script" /><link rel="prefetch" href="/fes.js/assets/pinia.html.f9f93bfc.js" as="script" /><link rel="prefetch" href="/fes.js/assets/qiankun.html.a42b17b1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/request.html.b632cd44.js" as="script" /><link rel="prefetch" href="/fes.js/assets/sass.html.8e9b5821.js" as="script" /><link rel="prefetch" href="/fes.js/assets/swc.html.4e12c047.js" as="script" /><link rel="prefetch" href="/fes.js/assets/vuex.html.fa7e45e9.js" as="script" /><link rel="prefetch" href="/fes.js/assets/watermark.html.6926f274.js" as="script" /><link rel="prefetch" href="/fes.js/assets/windicss.html.83279908.js" as="script" /><link rel="prefetch" href="/fes.js/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.51e1ba57.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.50456297.js" as="script" /><link rel="prefetch" href="/fes.js/assets/builder.html.80f0ad58.js" as="script" /><link rel="prefetch" href="/fes.js/assets/config.html.fe2ce6e7.js" as="script" /><link rel="prefetch" href="/fes.js/assets/contributing.html.82f4b535.js" as="script" /><link rel="prefetch" href="/fes.js/assets/css.html.ef3e41e3.js" as="script" /><link rel="prefetch" href="/fes.js/assets/directory-structure.html.019ab84f.js" as="script" /><link rel="prefetch" href="/fes.js/assets/env.html.fb0681f5.js" as="script" /><link rel="prefetch" href="/fes.js/assets/faq.html.2d9998d0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/image.html.b31099ae.js" as="script" /><link rel="prefetch" href="/fes.js/assets/mock.html.0f7c7945.js" as="script" /><link rel="prefetch" href="/fes.js/assets/plugin.html.96839139.js" as="script" /><link rel="prefetch" href="/fes.js/assets/public.html.8b55d554.js" as="script" /><link rel="prefetch" href="/fes.js/assets/route.html.592e5a60.js" as="script" /><link rel="prefetch" href="/fes.js/assets/runtime-config.html.effd8a0b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/template.html.200e6af1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/upgrade3.html.64210bf0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.bf7305b4.js" as="script" /><link rel="prefetch" href="/fes.js/assets/cli.html.32cd9330.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.e9085497.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.7b6e0974.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.ff61e0d1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.f6ea50a1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.793cd690.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.9b9b8fe4.js" as="script" /><link rel="prefetch" href="/fes.js/assets/access.html.7acddf0d.js" as="script" /><link rel="prefetch" href="/fes.js/assets/editor.html.1cb4a682.js" as="script" /><link rel="prefetch" href="/fes.js/assets/enums.html.2ddbd286.js" as="script" /><link rel="prefetch" href="/fes.js/assets/icon.html.c8fbcbbd.js" as="script" /><link rel="prefetch" href="/fes.js/assets/jest.html.fe40ef87.js" as="script" /><link rel="prefetch" href="/fes.js/assets/layout.html.042c598a.js" as="script" /><link rel="prefetch" href="/fes.js/assets/locale.html.6890286c.js" as="script" /><link rel="prefetch" href="/fes.js/assets/login.html.d6af603c.js" as="script" /><link rel="prefetch" href="/fes.js/assets/model.html.12ad6d6e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/pinia.html.67629d13.js" as="script" /><link rel="prefetch" href="/fes.js/assets/qiankun.html.f373a5be.js" as="script" /><link rel="prefetch" href="/fes.js/assets/request.html.0ff230a7.js" as="script" /><link rel="prefetch" href="/fes.js/assets/sass.html.a445797d.js" as="script" /><link rel="prefetch" href="/fes.js/assets/swc.html.e8cfd91a.js" as="script" /><link rel="prefetch" href="/fes.js/assets/vuex.html.34e242d7.js" as="script" /><link rel="prefetch" href="/fes.js/assets/watermark.html.eb96f64e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/windicss.html.564a3613.js" as="script" /><link rel="prefetch" href="/fes.js/assets/404.html.22c78a27.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.0b6f9a66.js" as="script" />
</head>
<body>
<div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><img class="logo" src="/fes.js/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/fes.js/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.4"><span class="title">v3.0.4</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.4"><span class="title">v3.0.4</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/fes.js/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.4"><span class="title">v3.0.4</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.4"><span class="title">v3.0.4</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading active">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/fes.js/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/getting-started.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/fes.js/guide/getting-started.html#依赖环境" class="router-link-active router-link-exact-active sidebar-item" aria-label="依赖环境"><!--[--><!--]--> 依赖环境 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/getting-started.html#创建项目" class="router-link-active router-link-exact-active sidebar-item" aria-label="创建项目"><!--[--><!--]--> 创建项目 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/getting-started.html#启动项目" class="router-link-active router-link-exact-active sidebar-item" aria-label="启动项目"><!--[--><!--]--> 启动项目 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/getting-started.html#部署发布" class="router-link-active router-link-exact-active sidebar-item" aria-label="部署发布"><!--[--><!--]--> 部署发布 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/fes.js/guide/getting-started.html#构建" class="router-link-active router-link-exact-active sidebar-item" aria-label="构建"><!--[--><!--]--> 构建 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/getting-started.html#本地验证" class="router-link-active router-link-exact-active sidebar-item" aria-label="本地验证"><!--[--><!--]--> 本地验证 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/getting-started.html#部署" class="router-link-active router-link-exact-active sidebar-item" aria-label="部署"><!--[--><!--]--> 部署 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/fes.js/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/fes.js/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/fes.js/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="快速上手" tabindex="-1"><a class="header-anchor" href="#快速上手" aria-hidden="true">#</a> 快速上手</h1><h2 id="依赖环境" tabindex="-1"><a class="header-anchor" href="#依赖环境" aria-hidden="true">#</a> 依赖环境</h2><p>首先得有 <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">Node.js<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>,并确保 node 版本是 12.13 或以上。</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 打印 node 版本</span>
<span class="token function">node</span> <span class="token parameter variable">-v</span>
v12.13.0
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>推荐使用 <a href="https://pnpm.io/installation" target="_blank" rel="noopener noreferrer">pnpm<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 管理 npm 依赖</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 全局安装 pnpm</span>
<span class="token function">npm</span> i <span class="token function">pnpm</span> <span class="token parameter variable">-g</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="创建项目" tabindex="-1"><a class="header-anchor" href="#创建项目" aria-hidden="true">#</a> 创建项目</h2><p>这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。</p><h5 id="步骤-1-创建工作空间" tabindex="-1"><a class="header-anchor" href="#步骤-1-创建工作空间" aria-hidden="true">#</a> 步骤 1 创建工作空间</h5><p>如果工作空间不存在,则先创建:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 创建目录 workspace</span>
<span class="token function">mkdir</span> workspace
<span class="token comment"># 进入目录 workspace</span>
<span class="token builtin class-name">cd</span> workspace
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果工作空间已存在,则直接进入</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 进入目录 workspace</span>
<span class="token builtin class-name">cd</span> workspace
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h5 id="步骤-2-在工作空间创建项目" tabindex="-1"><a class="header-anchor" href="#步骤-2-在工作空间创建项目" aria-hidden="true">#</a> 步骤 2 在工作空间创建项目</h5><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">PNPM</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 创建模板</span>
<span class="token function">pnpm</span> create @fesjs/fes-app myapp
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 创建模板</span>
npx @fesjs/create-fes-app myapp
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><p>如果项目文件夹 <code>workspace/myapp</code> 已经存在,会提示目录已存在:</p><img src="/fes.js/pickTemplateTip.png" alt="目录已存在提示"><p>你可以选择:</p><ul><li><code>Overwrite</code> 删除项目文件夹,重新创建项目。</li><li><code>Merge</code> 保留原项目文件夹,存在相同文件则用模板文件覆盖当前目录文件。</li></ul><p>当选择 <code>Overwrite</code> 或者 <code>Merge</code> 或者项目目录 <code>workspace/myapp</code> 不存在,会提示选取一个 <code>template</code> <img src="/fes.js/pickTemplate.png" alt="选择模板类型"></p><p>你可以选默认适用于中后台前端应用的 <code>PC</code> 类型,也可以选适用于移动端的 <code>H5</code> 类型。</p><h5 id="步骤-3-安装依赖" tabindex="-1"><a class="header-anchor" href="#步骤-3-安装依赖" aria-hidden="true">#</a> 步骤 3 安装依赖</h5><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">PNPM</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 进入项目目录</span>
<span class="token builtin class-name">cd</span> myapp
<span class="token comment"># 安装依赖</span>
<span class="token function">pnpm</span> i
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 进入项目目录</span>
<span class="token builtin class-name">cd</span> myapp
<span class="token comment"># 安装依赖</span>
<span class="token function">npm</span> i
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><h2 id="启动项目" tabindex="-1"><a class="header-anchor" href="#启动项目" aria-hidden="true">#</a> 启动项目</h2><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">PNPM</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 开发调试</span>
<span class="token function">pnpm</span> dev
<span class="token function">pnpm</span> run v1.22.4
$ fes dev
Starting the development server http://localhost:8000 <span class="token punctuation">..</span>.
✔ Webpack
Compiled successfully <span class="token keyword">in</span> <span class="token number">15</span>.91s
DONE Compiled successfully <span class="token keyword">in</span> 15917ms <span class="token number">11</span>:17:08 AM
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 开发调试</span>
<span class="token function">npm</span> run dev
<span class="token operator">&gt;</span> fes dev
Starting the development server http://localhost:8000 <span class="token punctuation">..</span>.
✔ Webpack
Compiled successfully <span class="token keyword">in</span> <span class="token number">3</span>.66s
DONE Compiled successfully <span class="token keyword">in</span> 3662ms <span class="token number">11</span>:17:46 AM
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><p>Fes.js 会在 <a href="http://localhost:8000" target="_blank" rel="noopener noreferrer">http://localhost:8000<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 启动一个热重载的开发服务器。当你修改你的 .vue 文件时,浏览器中的内容也会自动更新。</p><img src="/fes.js/home.png" alt="home"><h2 id="部署发布" tabindex="-1"><a class="header-anchor" href="#部署发布" aria-hidden="true">#</a> 部署发布</h2><h3 id="构建" tabindex="-1"><a class="header-anchor" href="#构建" aria-hidden="true">#</a> 构建</h3><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">PNPM</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 构建</span>
<span class="token function">pnpm</span> build
<span class="token function">pnpm</span> run v1.22.4
$ fes build
✔ Webpack
Compiled successfully <span class="token keyword">in</span> <span class="token number">45</span>.37s
✨ Done <span class="token keyword">in</span> <span class="token number">48</span>.87s.
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 构建</span>
<span class="token function">npm</span> run build
<span class="token operator">&gt;</span> fes build
✔ Webpack
Compiled successfully <span class="token keyword">in</span> <span class="token number">45</span>.37s
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><p>构建产物默认生成到 ./dist 下,然后通过 tree 命令查看。</p><div class="language-base line-numbers-mode" data-ext="base"><pre class="language-base"><code>tree ./dist
dist
├── chunk-vendors.27cd4686.js
├── chunk-vendors.a5f5de67.css
├── index.11411d43.css
├── index.d72f1ba2.js
├── index.html
├── logo.png
└── static
└── logo.0f85bba0.png
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="本地验证" tabindex="-1"><a class="header-anchor" href="#本地验证" aria-hidden="true">#</a> 本地验证</h3><p>发布之前,可以通过 <a href="https://github.com/vercel/serve" target="_blank" rel="noopener noreferrer">serve<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 做本地验证,验证结果应该跟执行 <code>fes dev</code> 的结果一样。</p><h3 id="部署" tabindex="-1"><a class="header-anchor" href="#部署" aria-hidden="true">#</a> 部署</h3><p>本地验证完,就可以部署了。你需要把 dist 目录部署到服务器上。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/getting-started.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/" class="router-link-active" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div>
<script type="module" src="/fes.js/assets/app.0e52fd78.js" defer></script>
</body>
</html>