luna - Vuejs的组件化开发工具
jopen
9年前
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即可将组件打包。