https://steamerjs.github.io/introduction/Quick-Start.html

1<!DOCTYPE html>
2<html lang="en-US">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <title>快速开始 | Steamerjs</title>
7    <meta name="description" content="Steamerjs前端开发体系">
8    <link rel="icon" href="/image/logo.png">
9    
10    <link rel="preload" href="/assets/css/0.styles.4568b041.css" as="style"><link rel="preload" href="/assets/js/app.418e5bd5.js" as="script"><link rel="preload" href="/assets/js/21.20c19031.js" as="script"><link rel="prefetch" href="/assets/js/26.f7c039fc.js"><link rel="prefetch" href="/assets/js/2.cda51ec0.js"><link rel="prefetch" href="/assets/js/3.1fc3fac8.js"><link rel="prefetch" href="/assets/js/4.85ba9dd6.js"><link rel="prefetch" href="/assets/js/5.1084760c.js"><link rel="prefetch" href="/assets/js/6.058764d7.js"><link rel="prefetch" href="/assets/js/7.65784e87.js"><link rel="prefetch" href="/assets/js/8.239145ba.js"><link rel="prefetch" href="/assets/js/9.a81eea92.js"><link rel="prefetch" href="/assets/js/10.b18aab09.js"><link rel="prefetch" href="/assets/js/11.8315f308.js"><link rel="prefetch" href="/assets/js/12.66a9a3b0.js"><link rel="prefetch" href="/assets/js/13.cb904b44.js"><link rel="prefetch" href="/assets/js/14.811202fb.js"><link rel="prefetch" href="/assets/js/15.6a1b264c.js"><link rel="prefetch" href="/assets/js/16.02485868.js"><link rel="prefetch" href="/assets/js/17.ae283007.js"><link rel="prefetch" href="/assets/js/18.2dc8d8aa.js"><link rel="prefetch" href="/assets/js/19.82628071.js"><link rel="prefetch" href="/assets/js/20.57bf8d1e.js"><link rel="prefetch" href="/assets/js/22.22ce006e.js"><link rel="prefetch" href="/assets/js/23.492277b2.js"><link rel="prefetch" href="/assets/js/24.905b1022.js"><link rel="prefetch" href="/assets/js/25.8fd30ba2.js"><link rel="prefetch" href="/assets/js/27.8d474291.js"><link rel="prefetch" href="/assets/js/28.0570668f.js"><link rel="prefetch" href="/assets/js/29.c1b2e6d4.js"><link rel="prefetch" href="/assets/js/30.c9d4f573.js"><link rel="prefetch" href="/assets/js/31.15307ce4.js"><link rel="prefetch" href="/assets/js/32.77e6cbb4.js"><link rel="prefetch" href="/assets/js/33.474559b2.js"><link rel="prefetch" href="/assets/js/34.08b29630.js"><link rel="prefetch" href="/assets/js/35.da58ac32.js"><link rel="prefetch" href="/assets/js/36.1dffb32f.js"><link rel="prefetch" href="/assets/js/37.7b113c61.js"><link rel="prefetch" href="/assets/js/38.1c05ec81.js"><link rel="prefetch" href="/assets/js/39.38485f5d.js"><link rel="prefetch" href="/assets/js/40.7a717fac.js"><link rel="prefetch" href="/assets/js/41.8fc24aa7.js"><link rel="prefetch" href="/assets/js/42.21fba8e8.js"><link rel="prefetch" href="/assets/js/43.7d424b1b.js"><link rel="prefetch" href="/assets/js/44.ab035ffc.js"><link rel="prefetch" href="/assets/js/45.4c41363c.js"><link rel="prefetch" href="/assets/js/46.76a17f7f.js"><link rel="prefetch" href="/assets/js/47.f3ac4823.js">

10<link rel="prefetch" href="/assets/js/48.cd4b1329.js"><link rel="prefetch" href="/assets/js/49.3fd1690f.js"><link rel="prefetch" href="/assets/js/50.bcb578eb.js"><link rel="prefetch" href="/assets/js/51.a9d968ec.js"><link rel="prefetch" href="/assets/js/52.fb6bcabb.js"><link rel="prefetch" href="/assets/js/53.16d317dd.js"><link rel="prefetch" href="/assets/js/54.c2b2331b.js">
11    <link rel="stylesheet" href="/assets/css/0.styles.4568b041.css">
12  </head>
13  <body>
14    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">Steamerjs</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/introduction/Introduction.html" class="nav-link">教程</a></div><div class="nav-item"><a href="https://github.com/steamerjs/steamerjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
15  Github
16  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/introduction/Introduction.html" class="nav-link">教程</a></div><div class="nav-item"><a href="https://github.com/steamerjs/steamerjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
17  Github
18  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></a></div> <!----></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>简介</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/introduction/Introduction.html" class="sidebar-link">简介</a></li><li><a href="/introduction/Quick-Start.html" class="active sidebar-link">快速开始</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/introduction/Quick-Start.html#安装核心库" class="sidebar-link">安装核心库</a></li><li class="sidebar-sub-header"><a href="/introduction/Quick-Start.html#安装团队配置" class="sidebar-link">安装团队配置</a></li><li class="sidebar-sub-header"><a href="/introduction/Quick-Start.html#使用命令" class="sidebar-link">使用命令</a></li><li class="sidebar-sub-header"><a href="/introduction/Quick-Start.html#基于脚手架初始化项目" class="sidebar-link">基于脚手架初始化项目</a></li></ul></li><li><a href="/introduction/Steamer-Process.html" class="sidebar-link">推荐工作流</a></li><li><a href="/introduction/Steamer-Core.html" class="sidebar-link">核心库及插件化理念</a></li><li><a href="/introduction/Steamer-QA.html" class="sidebar-link">常见问题</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>配置阶段</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/steps/Init-Config.html" class="sidebar-link">配置阶段</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>开发阶段-命令</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/steps/Develop.html" class="sidebar-link">开发阶段</a></li><li><a href="/plugins/Steamer-Plugin-Kit.html" class="sidebar-link">脚手架部署与更新 - Kit</a></li><li><a href="/plugins/Steamer-Plugin-Pro.html" class="sidebar-link">多框架管理 - Pro</a></li><li><a href="/plugins/Steamer-Plugin-Mock.html" class="sidebar-link">假数据模拟 - Mock</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>开发阶段-项目脚手架</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/projectkits/Starterkit.html" class="sidebar-link">项目脚手架</a></li><li><a href="/projectkits/Bootstrap.html" class="sidebar-link">快速开始 —— 使用 steamerjs 安装与更新脚手架</a></li><li><a href="/projectkits/Configuration.html" class="sidebar-link">

18构建配置</a></li><li><a href="/projectkits/Folder-Structure.html" class="sidebar-link">目录结构</a></li><li><a href="/projectkits/Static-Server.html" class="sidebar-link">静态资源服务器</a></li><li><a href="/projectkits/SPA-Development.html" class="sidebar-link">多页开发</a></li><li><a href="/projectkits/Resource-Import.html" class="sidebar-link">资源引用</a></li><li><a href="/projectkits/Style-Sprites.html" class="sidebar-link">样式与合图</a></li><li><a href="/projectkits/React-Related.html" class="sidebar-link">React 开发相关</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>开发阶段-组件类库脚手架</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/componentkits/Starterkit.html" class="sidebar-link">组件脚手架</a></li><li><a href="/componentkits/Configuration.html" class="sidebar-link">基本配置</a></li><li><a href="/componentkits/Folder-Structure.html" class="sidebar-link">目录结构</a></li><li><a href="/componentkits/Practise-Standard.html" class="sidebar-link">组件化规范实践</a></li><li><a href="/componentkits/Starterkit-Standard.html" class="sidebar-link">脚手架使用规范</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>开发阶段-脚手架使用指南</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/kitguide/Introduction.html" class="sidebar-link">脚手架使用指南</a></li><li><a href="/kitguide/Migration.html" class="sidebar-link">非Steamer系列脚手架项目迁移</a></li><li><a href="/kitguide/Upgrade.html" class="sidebar-link">Steamer系列脚手架升级</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>发布阶段</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/steps/Publish.html" class="sidebar-link">发布阶段</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>内置插件</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/builtin-plugins/Steamer-Plugins.html" class="sidebar-link">内置插件</a></li><li><a href="/builtin-plugins/Steamer-Plugin-Doctor.html" class="sidebar-link">系统诊断插件 - Doctor</a></li><li><a href="/builtin-plugins/Steamer-Plugin-Config.html" class="sidebar-link">系统命令配置 - Config</a></li><li><a href="/builtin-plugins/Steamer-Plugin-List.html" class="sidebar-link">命令罗列 - List</a></li><li><a href="/builtin-plugins/Steamer-Plugin-Team.html" class="sidebar-link">安装团队配置 - Team</a></li><li><a href="/builtin-plugins/Steamer-Plugin-Update.html" class="sidebar-link">更新插件 - Update</a></li><li><a href="/plugins/Steamer-Plugin-Kit.html" class="sidebar-link">脚手架部署与更新 - Kit</a></li><li><a href="/plugins/Steamer-Plugin-Task.html" class="sidebar-link">任务执行 - Task</a></li><li><a href="/builtin-plugins/Steamer-Plugin-Develop.html" class="sidebar-link">脚手架或命令行开发 - Develop</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>脚手架与命令插件开发</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/develop/Steamer-Develop.html" class="sidebar-link">脚手架与命令插件开发</a></li><li><a href="/starterkits/Steamer-Example.html" class="sidebar-link">脚手架开发</a></li><li><a href="/plugins/Steamer-Plugin-Example.html" class="sidebar-link">命令插件开发</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="快速开始"><a href="#快速开始" aria-hidden="true" class="header-anchor">#</a> 快速开始</h1> <h2 id="安装核心库"><a href="#安装核心库" aria-hidden="true" class="header-anchor">#</a> 安装核心库</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>npm i <span class="token operator">-</span>g steamerjs
19</code></pre></div><h2 id="安装团队配置"><a href="#安装团队配置" aria-hidden="true" class="header-anchor">#</a> 安装团队配置</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 默认团队，包括配置、脚手架、命令行插件</span>

20npm i <span class="token operator">-</span>g steamer<span class="token operator">-</span>team<span class="token operator">-</span><span class="token keyword">default</span>
21
22<span class="token comment">// 如果你是AlloyTeam 成员，你可以安装</span>
23npm i <span class="token operator">-</span>g steamer<span class="token operator">-</span>team<span class="token operator">-</span>alloyteam
24
25<span class="token comment">// 如果你是其它团队的成员，你可以自建一份团队配置，如 steamer-team-xxx，然后发布到 npm 上，再安装</span>
26npm i <span class="token operator">-</span>g steamer<span class="token operator">-</span>team<span class="token operator">-</span>xxx
27</code></pre></div><h2 id="使用命令"><a href="#使用命令" aria-hidden="true" class="header-anchor">#</a> 使用命令</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 安装本地 mock 服务</span>
28npm i <span class="token operator">-</span>g steamer<span class="token operator">-</span>plugin<span class="token operator">-</span>mock
29
30<span class="token comment">// 使用</span>
31steamer mock
32</code></pre></div><h2 id="基于脚手架初始化项目"><a href="#基于脚手架初始化项目" aria-hidden="true" class="header-anchor">#</a> 基于脚手架初始化项目</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>steamer kit
33
34<span class="token comment">// 然后选择本机已有的脚手架进行初始化</span>
35</code></pre></div></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
36        ←
37        <a href="/introduction/Introduction.html" class="prev">
38          简介
39        </a></span> <span class="next"><a href="/introduction/Steamer-Process.html">
40          推荐工作流
41        </a>
42        →
43      </span></p></div> </div> <!----></div></div>
44    

44<script src="/assets/js/21.20c19031.js" defer></script>

44<script src="/assets/js/app.418e5bd5.js" defer></script>

44
45  </body>
46</html>