ワンタッチでプロジェクト足場をすばやく生成(h 5/vue/react選択可能)

13892 ワード

テキストリンク:https://juejin.im/post/594cb9936fb9a06bba46e31b
About Hbuild
Hbuild is a modern project starter kitwhich allows you to build your own project by cli rapidly
Hbuildはhbuild-cliコマンドラインツールを使用して、プロジェクト起動キットを迅速に生成することができ、学習コストが低く、このキットには以下の特徴が含まれています.
Features

Vue2/Vue-Router/Vuex (optional)

Hot reloading for single-file components

Webpack 2

babel (default)

LESS/SASS/Stylus (optional)

ejs/mustache/art-template (optional)

React/React-Router (optional)

zepto

autoprefixer (vue support)

mock server

eslint

Support for building multi-page applications

offline mode support

file hash

ここでzeptoはデフォルトのグローバル導入であり、直接使用できます.h 5プロジェクトは、ejs，mustacheまたはart-templateテンプレートエンジンを選択することができる.Babelトランスコードはデフォルトでサポートされています.HMRをサポートします.ファイルフィンガープリントをサポートします.
vueプロジェクトはvue-routerをデフォルトでサポートし、reactプロジェクトはreact-routerをデフォルトでサポートします.
Get Started
You'd better have node >=6 and npm >=3 and gulp >=3.9 installed:

$ npm install -g hbuild-cli
$ h init new-project

# edit files and start developing
$ npm run dev
# bundle all scripts and styles for production use
$ npm run prod

# lint your js code
$ npm run eslint

Local Templates
when you clone this project,you can use a template on your local file system:

$ git clone [email protected]:hawx1993/hbuild.git
$ h init ./hbuild new-project

コマンド#コマンド#

$ npm run dev;//      ，  mock  
$ npm run dev-daily;//      ，  daily      
$ npm run dev-pre;//      ，        
$ npm run daily;//        ，  daily      
$ npm run pre;//        ，        
$ npm run prod;//      ，        
$ npm run eslint;//js    ，     lib     js

コンパイル
0.エントリファイルはpagesディレクトリの下のindex.jsファイルであり、webpackはこのファイルを読み込むことでコンパイルパッケージ化する
1.jsコードのデフォルトはBabelコンパイル、gulp+webpackパッケージ構築を採用しています.
2.コンパイルされたhtmlファイルのデフォルトはbuild/pagesディレクトリの下に出力され、htmlファイル名はsrc/pagesの下の親ディレクトリのファイル名を採用する
3.コンパイルされた静的リソースファイル(画像、フォント、jsファイルなど)をbuild/staticディレクトリに保存し、サポートファイルhashをコンパイルし、キャッシュの問題を解決する
4.コードの熱交換をサポートし、熱交換に失敗すると自動的にページ全体をリフレッシュする
5.開発モードはコードを圧縮せず、sourceMapは非開発モードに対してのみ有効(not dev)
6.画像圧縮対応
HTMLとテンプレートエンジン
1.h 5プロジェクトはejs、mustache、art-templateテンプレートエンジンをサポートし、デフォルトはzeptoをサポートします.
2.非ローカル開発環境、html、js、cssコードが圧縮される
3.pagesの下にディレクトリを新規作成する場合、htmlファイルはindexディレクトリの下など、静的リソースの参照を手動で構成する必要があります.

"$$_CDNPATH_$$/index/index.js"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span><span class="copy-code-btn"></span></code></pre> 
   <h3 id="css-">CSS     </h3> 
   <p>1.  css    LESS、SASS stylus (optional);</p> 
   <p>2.    <code>css-in-js</code>   ，  <code>hbuild.config.js</code>           css，    css       ：<code>[name].css</code>，name src <code>less/scss/stylus</code>   </p> 
   <p>3.    css  ，   HTML   ，     js</p> 
   <p>4.         ，  <code>media-query+rem</code>   ，   <code>common.less</code>   </p> 
   <p>5.  postcss <code>autoprefixer</code></p> 
   <h3>    </h3> 
   <p>1.<code>npm run eslint</code>   vue     ，  es6    </p> 
   <h3>  </h3> 
   <ul> 
    <li><p>mock：mock        URI   mock        </p> </li> 
    <li><p>  ：           ，  <code>hbuild.config.js</code>   <code>common/js/config</code>      </p> </li> 
    <li><p>       ，  pages     ，     index  </p> </li> 
    <li><p>     ：<code>$$_CDNPATH_$$</code>       <code>build/static/hash</code>  ，<code>$$_STATICPATH_$$</code>     <code>build/static/hash/assets</code></p> </li> 
    <li><p>    ：        pages    index   js       ，      </p> </li> 
    <li><p>          ，   <code>hbuild.config.js</code>            </p> </li> 
   </ul> 
   <h3>    </h3> 
   <pre><code class="hljs bash copyable">.
├── README.md
├── build                       <span class="hljs-comment">#       </span>
│    └── gulpfile.js            <span class="hljs-comment"># gulp  </span>
│    └── postcss.config.js      <span class="hljs-comment"># postcss    </span>
│    └── util.js                <span class="hljs-comment"># gulp       </span>
│    └── hbuild.config.js       <span class="hljs-comment">#        </span>
├── mock                        <span class="hljs-comment"># mock    ，            </span>
│   └── h5
├── package.json    
├── src                         <span class="hljs-comment">#     </span>
│   ├── assets                  <span class="hljs-comment">#       ，       </span>
│   │   └── logo.ico
│   ├── common                  <span class="hljs-comment">#       ，css      css  ，js  </span>
│   │   ├── css
│   │   │   ├── common.less
│   │   │   └── common.scss
│   │   └── js
│   │       ├── api.js          <span class="hljs-comment"># api  </span>
│   │       ├── config.js       <span class="hljs-comment">#     </span>
│   │       └── util.js         <span class="hljs-comment">#       ，          </span>
│   ├── components              <span class="hljs-comment">#     </span>
│   │   ├── counter             <span class="hljs-comment">#    vue  </span>
│   │   │   └── index.vue
│   │   ├── index               <span class="hljs-comment"># vue       </span>
│   │   │   └── index.vue
│   │   ├── meta                <span class="hljs-comment"># h5 meta      </span>
│   │   │   └── index.html
│   │   ├── router              <span class="hljs-comment"># vue    </span>
│   │   │   └── router.js
│   │   └── store               <span class="hljs-comment"># vuex store  </span>
│   │       └── store.js
│   ├── lib                     <span class="hljs-comment">#      </span>
│   └── pages                   <span class="hljs-comment">#       </span>
│       └── index               <span class="hljs-comment">#     ，  pages           ，       </span>
│           ├── index.html
│           ├── index.js        <span class="hljs-comment"># index.js/index.jsx   webpack     </span>
│           ├── index.jsx
│           ├── index.less      <span class="hljs-comment">#      js     ，        css       </span>
│           ├── index.scss
│           └── module          <span class="hljs-comment">#       ，  index.js/jsx         </span>
│               ├── main.jsx
│               └── main.tpl.html
└── yarn.lock<span class="copy-code-btn"></span></code></pre> 
   <h3 id="changelog">ChangeLog</h3> 
   <p>changelog</p> 
   <h3 id="license">License</h3> 
   <p>MIT © hawx1993</p> 
   <h3>    </h3> 
   <p>github.com/hawx1993/hb… ，  star  issue</p> 
  </div> 
  <p>   :https://juejin.im/post/594cb9936fb9a06bba46e31b</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1174682771986112512"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">

興味があるかもしれません

[スターウォーズ]アナキンの裏切り
comsci

それを読めば、わがままに遊ぶことができます!
aijuans
JavaScript

Java共通キットJodd
Kai_Ge
java jodd

SpringMvcダウンロード
120153216
springMVC

Python標準異常総括
2002wmj
python

SQL関数は、クエリー用の一時テーブル構造のデータを返します。
357029540
SQL Server

JAva時間フォーマット|比較サイズ|タイムゾーン個人メモ
7454103
java eclipse tomcat c MyEclipse

時間取得Clanderの使い方
adminjun
Clander 時間