Clumo 是一个可以帮助前端开发者快速构建 Web 应用的 npm 包。它使用了 Vue.js 和 Element-UI 这两个很流行的库，并提供了一些集成的实用工具，例如路由、菜单和状态管理等。本篇文章就是为了教你如何使用 clumo 来开发出一个完整的 Web 应用。
安装 Clumo
使用 npm 进行安装：
npm install clumo
创建一个新项目
创建一个新项目非常简单，只需要在命令行中输入以下命令：
npx clumo create my-project
然后你就进入了项目的根目录中，你会看到一个名为 my-project 的文件夹已经被创建了。在这个文件夹中，你可以看到一些预先配置好的文件和文件夹，例如 package.json、src 文件夹、index.html 文件等等。
运行项目
当项目创建好之后，你可以使用以下命令来运行开发服务器：
npm run dev
项目会运行在 http://localhost:8080 地址上。当你在编辑代码时，每次修改都会自动重新编译和刷新页面。
构建项目
当你完成了开发并准备把 Web 应用部署到生产环境上时，你需要对你的项目进行构建。使用以下命令来构建项目：
npm run build
这条命令会把你的项目打包成一个压缩后的文件，并把这个文件放在 dist 文件夹中。你可以把这个文件上传到任何能够托管静态网站的地方，例如 GitHub Pages 或者 AWS S3。
使用 Clumo 编写组件
上面我们已经创建了一个新的 Clumo 项目，接下来我们要使用 Clumo 来构建我们的组件。首先我们要创建一个组件：
-- -------------------- ---- -------
---- -------------- ---
----------
---- ---------------------- ------- --------
-----------
--------
------ ------- -
------ -
------ -
-------- ------ -------
-
-
-
---------
------ -------
------------ -
---------- -----
------ -----
-
--------这是一个非常简单的 Vue 组件，它有一个消息 message 和一个用于展示消息的 div。这个组件作为一个单文件组件，我们需要在项目中 import 进来。
-- -------------------- ---- -------
-- -------
----------
---- ---------
----------- --
------
-----------
--------
------ ---------- ---- -----------------------------
------ ------- -
----- ------
----------- -
----------
-
-
---------在 App.vue 中，我们通过 import 语句来引用 HelloWorld.vue 组件，并在 components 对象中注册了这个组件，然后在模板中使用了这个组件。
应用路由
Clumo 内置 Vue-Router，我们可以用它来实现我们的路由功能。在创建项目时，Clumo 已经帮我们内置了一些路由配置在 router.js 中。我们可以在这个文件中进行修改或添加新的路由。
-- -------------------- ---- -------
-- ---------
------ --------- ---- ------------
------ --------- ---- -----------------------
----- ------ - --- -----------
----- ----------
----- ---------------------
------- -
-
----- ----
----- --------
---------- ---------
-
-
--
------ ------- ------上面的配置代码表示，当用户访问 / 路由时，会渲染 IndexView.vue 组件。我们需要在 IndexView.vue 中编写一个模板来显示我们的组件。
-- -------------------- ---- -------
---- ------------- ---
----------
---- --------------
----------- --
------
-----------
--------
------ ---------- ---- ------------------------------
------ ------- -
----------- -
----------
-
-
---------
------ -------
------ -
------- ------
-------- -----
---------------- -------
------------ -------
-
--------上面的代码表示，当用户访问 / 路由时，会渲染 HelloWorld 组件，这个组件显示一个 "Hello World!" 的消息。
应用状态管理
Clumo 内置 Vuex 状态管理框架，我们可以使用它来管理应用状态。在创建项目时，Clumo 已经创建了一个 Vuex Store 实例，在 store.js 中。我们可以在这个文件中添加我们自己的状态。
-- -------------------- ---- -------
-- --------
------ --- ---- -----
------ ---- ---- ------
-------------
------ ------- --- ------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
--
-------- -
--------- -- ------ -- -
-------------------
-
-
--上面的代码表示，我们有一个状态 count 和一个 mutation 方法 increment，这个方法会把状态 count 的值加 1。现在，我们可以在任何一个组件中使用这个状态和方法。
-- -------------------- ---- -------
---- -------------- ---
----------
---- --------------------
-- ------- --
------- -----------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------ -------
-
--
-------- -
---------------- -
---------------------------------
-
-
-
---------
------ -------
------------ -
---------- -----
------ -----
-
--------在这个例子中，我们在 HelloWorld.vue 组件中添加了一个按钮，这个按钮会触发 incrementCount 方法，这个方法会分发一个 action，最终改变我们的状态 count。
应用菜单
Clumo 内置了一个侧边栏菜单，可以通过在 menu.js 配置菜单项目来使用。在 menu.js 中，我们可以添加一个菜单项目，代码如下：
-- -------------------- ---- -------
-- -------
----- ----- - -
-
------ -----
----- -----------------
------ -
-
------ -------------
----- -------------
----- ---
-
-
-
-
------ ------- -----上面的代码表示，在菜单栏中，我们有一个名为 “示例” 的菜单项，这个菜单项下有一个子菜单 “HelloWorld”，点击这个子菜单，页面会跳转到 / 路由，渲染 HelloWorld 组件。
Clumo 是一个非常方便的 npm 包，可以帮助我们快速构建 Web 应用。上述例子只是其中的一部分，当然，Clumo 还有其他很多的高级功能，例如数据表格、表单、对话框等等，如果你想要深入了解 Clumo，可以查看官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005695481e8991b448e4ce0