java
/
jMonkeyEngine-wiki
镜像自地址 https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>UI Development Prerequisites :: jMonkeyEngine Docs</title>
    <link rel="canonical" href="https://wiki.jmonkeyengine.org/wiki-ui/prerequisites.html">
    <link rel="prev" href="index.html">
    <link rel="next" href="set-up-project.html">
    <meta name="generator" content="Antora 3.0.1">
    <link rel="stylesheet" href="../_/css/site.css">
<meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
<meta property="og:description" content="UI Development Prerequisites">
<meta property="og:title" content="jMonkeyEngine Docs">
<link rel="stylesheet" href="../_/css/site-extra.css">
<link rel="stylesheet" href="../_/css/vendor/docsearch.min.css">
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css -->
<link rel="icon" href="../_/img/favicon.ico" type="image/x-icon">
  </head>
  <body class="article">
<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
        <img alt="" src="../_/img/jme-logo.png" height="32" type="image/x-icon">
      </a>
      <div class="navbar-item hide-for-print">
        <input id="search-input" type="text" placeholder="Search docs">
      </div>
      <button class="navbar-burger" data-target="topbar-nav">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item theme-switch-wrapper">
          <label class="theme-switch" for="checkbox">
            <input type="checkbox" id="checkbox" />
            <div class="slider round"></div>
          </label>
        </div>
        <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
      </div>
    </div>
  </nav>
</header>
<div class="body">
<div class="nav-container" data-component="wiki-ui" data-version="master">
  <aside class="nav">
    <div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
  <nav class="nav-menu">
    <h3 class="title"><a href="index.html">Wiki UI</a></h3>
<ul class="nav-list">
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item is-current-page" data-depth="1">
    <a class="nav-link" href="prerequisites.html">UI Development Prerequisites</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="set-up-project.html">Set up a UI Project</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="build-preview-ui.html">Build and Preview the UI</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="development-workflow.html">UI Development Workflow</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="templates.html">Work with the Handlebars Templates</a>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="stylesheets.html">Work with the CSS Stylesheets</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="add-fonts.html">Add Fonts</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="style-guide.html">UI Element Styles</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="inline-text-styles.html">Inline Text</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="admonition-styles.html">Admonitions</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="list-styles.html">Lists</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="sidebar-styles.html">Sidebars</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="ui-macro-styles.html">UI Macros</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
  <div class="context">
    <span class="title">Wiki UI</span>
    <span class="version">master</span>
  </div>
  <ul class="components">
    <li class="component">
      <span class="title">JME</span>
      <ul class="versions">
        <li class="version">
          <a href="../docs/3.8/documentation.html">3.8</a>
        </li>
        <li class="version">
          <a href="../docs/3.4/documentation.html">3.4</a>
        </li>
        <li class="version">
          <a href="../docs/3.3/documentation.html">3.3</a>
        </li>
        <li class="version">
          <a href="../docs/3.2/documentation.html">3.2</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <span class="title">Wiki Contribution</span>
      <ul class="versions">
        <li class="version">
          <a href="../docs-wiki/3.8/wiki_contributor.html">3.8</a>
        </li>
      </ul>
    </li>
    <li class="component is-current">
      <span class="title">Wiki UI</span>
      <ul class="versions">
        <li class="version is-current">
          <a href="index.html">master</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
    </div>
  </aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul>
    <li><a href="index.html">Wiki UI</a></li>
    <li><a href="prerequisites.html">UI Development Prerequisites</a></li>
  </ul>
</nav>
  <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki-ui/edit/master/docs/modules/ROOT/pages/prerequisites.adoc">Edit this Page</a></div>
  </div>
  <div class="content">
<article class="doc">
<h1 class="page">UI Development Prerequisites</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>An Antora UI project is based on tools built atop Node.js, namely:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><a href="https://nodejs.org">Node.js</a> (commands: <code>node</code> and <code>npm</code>)</p>
<div class="ulist">
<ul>
<li>
<p><a href="https://github.com/creationix/nvm">nvm</a> (optional, but strongly recommended)</p>
</li>
</ul>
</div>
</li>
<li>
<p><a href="http://gulpjs.com">Gulp CLI</a> (command: <code>gulp</code>)</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>You also need <a href="https://git-scm.com">git</a> (command: <code>git</code>) to pull down the project and push updates to it.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="git"><a class="anchor" href="#git"></a>git</h2>
<div class="sectionbody">
<div class="paragraph">
<p>First, make sure you have git installed.</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ git --version</pre>
</div>
</div>
<div class="paragraph">
<p>If not, <a href="https://git-scm.com/downloads">download and install</a> the git package for your system.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="node-js"><a class="anchor" href="#node-js"></a>Node.js</h2>
<div class="sectionbody">
<div class="paragraph">
<p>You need Node.js installed on your machine to use Antora, including the default UI.
Antora follows the Node.js release schedule, so we advise that you choose an active long term support (LTS) release of Node.js.
We recommend using the latest active Node.js LTS version.
While you can use other versions of Node.js, Antora is only tested against LTS releases.</p>
</div>
<div class="paragraph">
<p>To check whether you have Node.js installed, and which version, open a terminal and type:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ node --version</pre>
</div>
</div>
<div class="paragraph">
<p>You should see a version string, such as:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>v10.15.3</pre>
</div>
</div>
<div class="paragraph">
<p>If the command fails with an error, it means you don&#8217;t have Node.js installed.
The best way to install Node.js is to use nvm (Node Version Manager).
Refer to <a href="#antora:install:linux-requirements.adoc#install-nvm" class="xref unresolved">Install nvm and Node.js (Linux)</a>, <a href="#antora:install:macos-requirements.adoc#install-nvm" class="xref unresolved">Install nvm and Node.js (macOS)</a>, or <a href="#antora:install:windows-requirements.adoc#install-nvm" class="xref unresolved">Install nvm and Node.js (Windows)</a> for instructions.</p>
</div>
<div class="paragraph">
<p>Once you have Node.js installed, you can proceed with installing the Gulp CLI.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="gulp-cli"><a class="anchor" href="#gulp-cli"></a>Gulp CLI</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Next, you&#8217;ll need the Gulp CLI (aka wrapper).
This package provides the <code>gulp</code> command which executes the version of Gulp declared by the project.
You should install the Gulp CLI globally (which resolves to a location in your user directory if you&#8217;re using nvm) using the following command:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ npm install -g gulp-cli</pre>
</div>
</div>
<div class="paragraph">
<p>Now that you have Node.js and Gulp installed, you&#8217;re ready to set up the project.</p>
</div>
</div>
</div>
<nav class="pagination">
  <span class="prev"><a href="index.html">Wiki UI</a></span>
  <span class="next"><a href="set-up-project.html">Set up a UI Project</a></span>
</nav>
</article>
<aside class="toc sidebar" data-title="Contents" data-levels="2">
  <div class="toc-menu"></div>
</aside>
  </div>
</main>
</div>
<footer class="footer">
  <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
</footer>
<script src="../_/js/vendor/docsearch.min.js"></script>
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js -->
<script>
var search = docsearch({
  apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  indexName: 'jmonkeyengine',
  inputSelector: '#search-input',
  autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
  algoliaOptions: { hitsPerPage: 10 }
}).autocomplete
search.on('autocomplete:closed', function () { search.autocomplete.setVal() })
function focusSearchInput () { document.querySelector('#search-input').focus() }
if (document.querySelector('.home-link.is-current')) window.addEventListener('load', focusSearchInput)
</script>
<script src="../_/js/site.js"></script>
<script async src="../_/js/vendor/highlight.js"></script>
  </body>
</html>