前端腳手架

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

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

其實(shí)這個(gè)腳手架，我們已經(jīng)用了一年了。
真實(shí)的感覺就是-很爽~~
但是因?yàn)槲乙恢睕]有什么時(shí)間，就沒有推廣。

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

關(guān)于hey-cli

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

文檔

英文文檔： 點(diǎn)這里
中文文檔： 點(diǎn)這里

安裝

npm install -g hey-cli

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

模板說明

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

npm install -g hey-cli

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

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

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

simple

簡單的項(xiàng)目，html會(huì)自動(dòng)引用js與css文件，部署的時(shí)候會(huì)自動(dòng)添加hash后綴。
支持ES6。
依賴包：none

cd simple
hey dev

image

vue

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

cd vue
npm install
hey dev

image

heyui

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

cd heyui
#安裝兩個(gè)依賴包
npm install
hey dev

image

elementui

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

cd elementui
#安裝兩個(gè)依賴包
npm install
hey dev

image

iviewui

依賴包: vue, iview

cd iviewui
#安裝兩個(gè)依賴包
npm install
hey dev

image

react

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

cd react
npm install
hey dev

image

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

功能

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

公眾號(hào)

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

image