Wxeact-cli 是一个基于 webpack 和 babel 的，为小程序开发者打造的一款前端工作流脚手架，它主要解决了小程序开发中的一些痛点，例如：组件复用、样式管理、代码分离等问题。
本文将详细介绍如何使用 wxeact-cli 工具来创建小程序项目并开发小程序组件。
安装 wxeact-cli
使用 npm 全局安装 wxeact-cli：
npm install -g wxeact-cli
创建小程序项目
使用 wxeact-cli 创建一个新的小程序项目，可以使用下面的命令：
wxeact create my-project
开发小程序组件
创建完成后，我们可以在项目中开始开发小程序组件。在 wxeact-cli 工具中，我们可以使用以下命令来创建组件：
wxeact create-component my-component
默认情况下，wxeact-cli 会创建一个包含 JS、WXML 和 WXSS 文件的组件目录，并在当前目录下的 components 目录下生成一个名称为 my-component 的文件夹。你也可以通过修改 wxeact-plugin-create-component 的配置来修改生成的组件目录中的文件类型和后缀名。
在创建完组件之后，我们需要在小程序的页面中引用这个组件的模板，可以使用类似下面的方式引入组件模板：
<import src="../components/my-component/my-component.wxml"/>
<template is="my-component" data="{{...}}"/>接下来，在组件目录下的 index.js 文件中，我们可以编写组件的逻辑代码，如下所示：
-- -------------------- ---- -------
-----------
----------- -
----- -
----- -------
------ ------- -------
-
--
----- -
---------- --
--
--------- ---------- -
--------------
---------- --------------------
--
-
--最后，在组件的样式文件中，我们可以定义组件的样式，如下所示：
-- -------------------- ---- ------- -- ----------------- -- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ----- ---------- ----- -
这里就完成了我们的第一个小程序组件的开发。
构建和预览
当组件开发完成后，我们可以使用 wxeact-cli 提供的构建指令来编译我们的代码。在开发时我们可以使用 --watch 指令来实现文件变更后自动重新构建：
wxeact build --watch
在构建完成之后，我们可以使用 wxeact-cli 提供的预览指令来在微信开发者工具中预览我们的小程序。在开启预览之后，我们就可以在开发者工具中看到我们的小程序效果。
wxeact preview
本文只介绍了 wxeact-cli 工具的基本用法和组件开发流程，实际上 wxeact-cli 工具还包含了许多其他的功能，例如：项目打包、自定义开发配置、根据不同环境自动切换配置等。读者可以通过查看 wxeact-cli 官方文档来更深入的了解这个工具的功能和用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0781e8991b448d9a5a