前端腳手架

其實，這是一個集成的webpack腳手架。
現(xiàn)今網(wǎng)絡(luò)上，相信關(guān)于webpack的配置，大家也看了不少，基本上比較流行的框架大家都推薦使用webpack來開發(fā)部署。
前面有vue-cli的工具，后有ant-design的，大家都基本上幫我們把webpack的那一些配置配置好。

可是，這些都存在webpack包信息內(nèi)容鑲嵌在項目內(nèi)的問題。
這會導致，開發(fā)加載的時候需要npm install很久，每一個項目都需要安裝所有的webpack, 一大堆loader依賴。
而我的這個腳手架最大的功能就是系統(tǒng)全局安裝，幾乎可以開發(fā)部署所有的線上主流項目。
所有的項目只需要加載自己需要的js依賴，做到一臺機器安裝，支撐所有的前端項目。

其實這個腳手架，我們已經(jīng)用了一年了。
真實的感覺就是-很爽~~
但是因為我一直沒有什么時間，就沒有推廣。

年后，終于有一絲絲的時間，可以開心的和大家分享了。

關(guān)于hey-cli

其實hey-cli是我們hey家族的主力產(chǎn)品，當然主要還是 heyui 這樣的組件庫了。
關(guān)于hey-cli的介紹，我覺得光說是不行的，所以花了一些時間，整理了hey-cli-template，里面有一些主要的模板，后面我會詳細介紹。
首先，我把hey-cli的一些鏈接放出來：
github: https://github.com/heyui/hey-cli
npm: https://www.npmjs.com/package/hey-cli

文檔

英文文檔： 點這里
中文文檔： 點這里

安裝

npm install -g hey-cli

#開發(fā)
hey dev
#部署
hey build
#安裝模板
hey init <project-name>
#目前有的項目模板: simple, vue, heyui, elementui, iview, react(ant-design)

模板說明

為什么不說功能，直接從模板開始說起呢，因為，這樣才能最大程度說明這個腳手架的功能。
首先你需要，全局安裝hey-cli。

npm install -g hey-cli

# new version npm
sudo npm install -g hey-cli --unsafe-perm=true --allow-root

因為，目前這個腳手架沒有開始推廣，所以對于node的兼容版本檢測還沒有出，但是主流穩(wěn)定的版本一般都沒有問題，太舊的版本存在一些問題。
如果有人安裝出現(xiàn)問題，請及時反饋，十分感謝。

你有兩種方式嘗試，一個是使用hey init <project-name>命令安裝一些喜歡的模板。
還有一種是git clone https://github.com/heyui/hey-cli-template，如果你想嘗試所有的項目，可以更快一些。

simple

簡單的項目，html會自動引用js與css文件，部署的時候會自動添加hash后綴。
支持ES6。
依賴包：none

cd simple
hey dev

image

vue

vue的simple-webpack項目。但是沒有了webpack的一大堆依賴。
依賴包: vue

cd vue
npm install
hey dev

image

heyui

我們的主打產(chǎn)品啦，直接從官網(wǎng)的demo上面拷貝了form的案例。
其實這里使用了hey-cli的一個特性：globalVars: './src/css/var.less'，這樣的配置可以讓你在所以的less文件中使用這些全局變量，包括vue文件中的<style lang='less'>中。
依賴包: vue, heyui

cd heyui
#安裝兩個依賴包
npm install
hey dev

image

elementui

主要是從Element官網(wǎng)的demo上面拷貝了一些demo。
依賴包: vue, element-ui

cd elementui
#安裝兩個依賴包
npm install
hey dev

image

iviewui

依賴包: vue, iview

cd iviewui
#安裝兩個依賴包
npm install
hey dev

image

react

其實react使用的是ant design的項目做示例的，用的就是入門文檔的第一個demo。
react需要在hey.conf.js中添加react: true的配置項。
依賴包: react, moment, antd, react-dom

cd react
npm install
hey dev

image

好吧，這些項目都介紹完了，以后想要開發(fā)什么樣的項目，簡單就搞起。

功能

至于其他的功能，webpack大致有的都有。
一般項目需要集成的都添加了，這些就看反饋了，想要了解的我再出教程好了。

公眾號

今天新開通的公眾號，希望大家多多關(guān)注。
也許你會成為我們的第一位成員。

image