npm 包 fangfis 使用教程

介绍

fangfis 是一个轻量级的前端构建工具，它可以帮助我们快速搭建一些简单的页面或者组件，并且只需要通过一些简单的命令就能完成所需的构建。

安装

通过 npm 安装：

npm install fangfis --save-dev

使用

初始化项目

在项目目录下执行以下命令，会在当前目录生成一个默认的 fangfis 项目文件夹：

npx fangfis init

添加页面

执行以下命令可以在项目中添加一个页面：

npx fangfis add page <pageName>

其中 pageName 是页面的名称。

执行完上述命令后，会在 src/pages 目录下生成一个 <pageName> 目录，内部包含一个 index.html 和一个 index.js 文件，用于实现该页面的基本功能。

添加组件

执行以下命令可以在项目中添加一个组件：

npx fangfis add component <componentName>

其中 componentName 是组件的名称。

执行完上述命令后，会在 src/components 目录下生成一个 <componentName> 目录，内部包含一个 index.html 和一个 index.js 文件，用于实现该组件的基本功能。

启动本地服务器

执行以下命令可以启动本地服务器：

npm run serve

启动本地服务器之后，会自动打开默认的浏览器，并且在浏览器中可以查看项目的当前状态。

构建项目

执行以下命令可以构建项目：

npm run build

执行完构建命令后，会在项目目录下生成一个 dist 文件夹，内部包含了压缩后的所有文件，可以直接上传到服务器上使用。

示例

以下示例演示了如何使用 fangfis 快速搭建一个简单的页面：

1. 首先在控制台中执行以下命令，初始化一个 fangfis 项目：

   npx fangfis init

2. 执行以下命令，创建一个页面：

   npx fangfis add page myPage

3. 执行以下命令，启动本地服务器：

   npm run serve

4. 在浏览器中打开 http://localhost:8080/myPage/ ，可以看到新创建的页面。

   在 myPage 目录下的 index.html 中加入以下代码：

   <div id="app">Hello World!</div>
   
   <script src="./index.js"></script>

5. 在 myPage 目录下的 index.js 中加入以下代码：

   const app = document.getElementById('app')
   
   app.innerHTML = 'Hello, fangfis!'

6. 在浏览器中刷新页面，可以看到页面的内容已经变成了 Hello, fangfis!。

总结

fangfis 是一个轻量级的前端构建工具，可以帮助我们快速搭建一些简单的页面或者组件，并且使用起来非常简单。

在使用 fangfis 进行项目开发的过程中，需要注意以下几点：

1. fangfis 的默认项目结构和依赖项可能不符合我们的实际需求，需要进行一些调整。
2. 在 fangfis 中添加页面和组件时，需要注意生成的文件路径是否正确。
3. 在使用 fangfis 进行项目开发时，建议使用 Sass 或者 Less 等预处理器，以方便样式的管理和维护。

通过 fangfis 的使用，我们可以快速搭建一个前端项目的基础骨架，从而更加高效地进行项目开发。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eaa81e8991b448dc17e