简介
@kaenjs/cli 是一个基于 Node.js 的命令行工具，用于生成模板应用程序。它能够快速创建一个全新的 Vue.js 或 React 应用程序，让你专注于业务代码的开发。
安装
可以通过 npm 来安装 @kaenjs/cli，输入以下命令：
npm install -g @kaenjs/cli
创建项目
使用 @kaenjs/cli 创建一个新项目的命令为 create。下面是如何创建一个新的 Vue.js 项目：
kaen create myvueapp --template vue
其中 myvueapp 是你的项目名称，--template vue 表示你想要创建一个基于 Vue.js 的项目。
目录结构
创建完项目后，你会看到以下目录结构：
-- -------------------- ---- ------- --------- --- ------- - --- ----------- - --- ---------- --- ---- - --- ------- - --- ------- - - --- -------- - --- ----------- - - --- -------------- - --- ------- --- ---------- --- --------------- --- ------------ --- ---------
public：公共资源文件夹，例如 index.html 和 favicon.ico 等。src：项目源码文件夹，包含 Vue 组件和 JavaScript 入口文件等。.gitignore：Git 提交时需要忽略的文件列表。babel.config.js：Babel 配置文件。package.json：项目依赖和脚本配置文件。README.md：项目文档。
开发项目
在项目根目录下，输入以下命令来启动本地开发服务器：
npm run serve
之后你可以在浏览器中打开 http://localhost:8080/ 来体验你的应用程序。
示例代码
下面是几段示例代码：
1. Hello World
组件代码 src/components/HelloWorld.vue：
-- -------------------- ---- -------
----------
---- --------------------
-- ------- --
------
-----------
--------
------ ------- -
----- -------------
------ -
------ -
-------- ------- -------
--
-
--
---------
------ -------
------------ -
---------- -----
----------- -------
-
--------入口文件 src/main.js：
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");2. 通过 API 获取数据
组件代码 src/components/GetData.vue：
-- -------------------- ---- -------
----------
---- -----------------
----
--- ----------- -- ----- ---------------
-- ---------- --
-----
-----
------
-----------
--------
------ ------- -
----- ----------
------ -
------ -
----- --
--
--
--------- -
--------------------------------------------------
-------------- -- ----------------
---------- -- ---------- - -------
-
--
---------
------ -------
--------- -
---------- -----
-------- -----
-
--------3. 路由导航
路由配置 src/router.js：
-- -------------------- ---- -------
------ --- ---- ------
------ --------- ---- -------------
------ ---- ---- -------------------
------ ----- ---- --------------------
-------------------
----- ------ - -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
--
----- ------ - --- -----------
----- ----------
----- ---------------------
------
---
------ ------- -------主组件代码 src/App.vue：
-- -------------------- ---- -------
----------
---- ---------
------ ------- -------
-----
------------ ------------------------- -
------------ -------------------------------
------
---------------------------
------
-----------
--------
------ ------- -
----- ------
--------- -
--------- -
------ --- ------ -----
-
-
--
---------结论
通过本文你可以学习到如何使用 @kaenjs/cli 创建一个新项目和开发应用程序，以及一些示例代码和技术细节。希望本文对于前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067380890c4f72775841e4