luna - Vuejs的組件化開發工具

luna

Vuejs的組件化開發工具

luna是個啥？

別著急，慢慢看。luna不止是vue-loader的封裝，同時也干了很多別的事。下面是使用luna開發的組件的目錄。

├── bootstrap #啟動器相關
│   ├── basic.js #包含vuejs及組件標識
│   └── index.js #啟動器
└── components #組件文件夾
    ├── test-title
    │   ├── index.css
    │   └── index.js
    └── test-banner
        ├── index.css
        └── index.js

一共包含兩類文件，一類啟動器相關，一類是組件。那我們怎么使用嘞？接著看

<!-- html 中組件這么使用 -->
<test-title></test-title>
<test-banner></test-banner>

<!-- 基礎文件 -->
<script src="/path/to/bootstrap/basic.js"></script>

<!-- test-title 組件 -->
<script src="/path/to/components/test-title/index.js"></script>
<link rel="stylesheet" href="/path/to/components/test-title/index.css">

<!-- test-banner 組件 -->
<script src="/path/to/components/test-banner/index.js"></script>
<link rel="stylesheet" href="/path/to/components/test-banner/index.css">

<!-- 啟動器 -->
<script src="/path/to/bootstrap/index.js"></script>
<script>
    luna.start(); //手動發射
</script>

按照國際慣例，基礎文件先加載。啟動器最后加載，為了使用便捷，可以手動發射。 中間呢加載的是組件。如果你開發了N多組件，這里可以只寫你需要的即可。 推薦使用合并加載，或者使用其他工具打包需要的組件。這樣可以減少請求數。

怎么使用？

好像有那么點意思，那luna怎么使用呢？由于luna模塊已經被注冊了，坑爹的luna-cli也被注冊了。最后，我們只能退而求其次luna-command了。記得要全局安裝哦

npm install -g luna-command

安裝完之后，會多一個luna命令，雖然模塊被注冊了，還好。命令名字我們可以自己定義。

luna init testProject #初始化一個項目

luna update #更新項目資源。需在項目根目錄執行。

luna component test-component #新建一個組件，需在項目根目錄執行。

luna particle test-particle #新建一個顆粒組件，需在項目根目錄執行。

luna -h #查看所有幫助
luna -v #查看版本號

默認新建component的時候使用的是常規模式，新建particle使用的是mini模式。常規模式css/js/html是分開的，mini模式是把他們一起放到.vue里面了。你也可以通過命令后面加參數-m/-n來強制使用哪種模式。

如何進行開發？

介紹完命令，我們新建一個項目，進入根目錄，安裝依賴npm install。執行npm run dev即可開始開發。默認會打開本地8016端口來調試組件。

開發過程中，使用luna component/luna particle新建組件或者顆粒，是不用重啟命令的。

開發完成后，執行npm run build即可將組件打包。

項目地址： https://github.com/imochen/luna