随着 Web 前端技术的快速发展，前端开发工程师在日常开发中需要学习和掌握的内容越来越多，其中包括使用 npm 包管理工具进行项目开发。在本篇文章中，我们将介绍一个 npm 包——generator-create-site-public-app 的详细使用教程。
generator-create-site-public-app 是什么？
generator-create-site-public-app 是一个 npm 包，它为我们提供了一个快速创建 Vue.js 公共站点应用程序（SPA）的工具，能够自动生成项目骨架，搭建基础框架并预设好一些常见的配置。使用它可以快速生成一个符合规范的 Vue.js 应用程序，大大提高了开发效率。
安装 generator-create-site-public-app
generator-create-site-public-app 需要在 Node.js 环境下使用，所以我们需要首先安装 Node.js。Node.js 的下载和安装方法可以参考官方文档。
安装完成 Node.js 后，我们使用 npm 命令来安装 generator-create-site-public-app。
npm install -g yo generator-create-site-public-app
其中 -g 表示全局安装，yo 是命令行工具 Yeoman 的简称。
使用 generator-create-site-public-app 创建项目
安装完成 generator-create-site-public-app 后，我们可以使用以下命令创建一个新项目。
yo create-site-public-app my-app
其中 my-app 是项目名称，可以根据需要进行修改。
接下来，我们需要根据提示进行一些配置，如输入开发者名称、项目描述等，也可以根据需要选择常用的一些配置，如单元测试、语言包等。
创建项目完成后，我们可以进入项目目录，运行以下命令来启动项目：
cd my-app npm run serve
这样就可以在本地启动一个开发服务器，并通过浏览器访问项目。
修改项目配置
使用 generator-create-site-public-app 创建的项目，已经预设好了一些基础配置，如 Vue.js、Axios、Element UI 等。我们可以按照自己的需求来修改这些配置。
修改 Vue.js 配置
默认情况下，generator-create-site-public-app 已经为我们生成了一个基础的 Vue.js 应用程序，我们可以修改 src/main.js 中的代码来进行配置。
例如，我们可以使用以下代码来配置 Vue.js 的路由：
-- -------------------- ---- -------
------ --- ---- -----
------ ------ ---- ------------
------ ----- ---- --------------------
---------------
------ ------- --- --------
------- -
-
----- ----
----- --------
---------- -----
-
-
--这里我们添加了一个路由，当访问根路径时，会跳转到 Hello 组件。
修改 Axios 配置
默认情况下，generator-create-site-public-app 已经预设了 Axios 作为项目中的 HTTP 请求库，我们可以修改 src/main.js 和 src/api/index.js 中的代码来进行配置。
例如，我们可以使用以下代码来配置 Axios 的默认 baseUrl：
-- -------------------- ---- ------- -- ----------- ------ ----- ---- ------- ---------------------- - ------------------------ ------------------- - ----- -- ---------------- ------ ----- ---- ------- ----- --- - -------------- -------- ------------------------ -- ------ ------- ---
这样，我们就可以在项目中使用 $http 或 api 来进行 HTTP 请求，并自动加上了默认的 baseUrl。
修改 Element UI 配置
默认情况下，generator-create-site-public-app 已经预设了 Element UI 作为项目中的 UI 组件库，我们可以修改 src/main.js 中的代码来进行配置。
例如，我们可以使用以下代码来按需引入 Element UI 组件：
import Vue from 'vue'
import {
Button,
Input
} from 'element-ui'
Vue.use(Button)
Vue.use(Input)这样，我们就只会将项目中使用到的 Element UI 组件打包进去，减少了项目的体积。
总结
generator-create-site-public-app 是一个非常方便的工具，能够帮助我们快速搭建一个符合规范的 Vue.js 应用程序，并在其中预设好一些常用配置和组件库。它的使用方法和配置也非常简单，希望本篇文章能对大家有所帮助。
示例代码可以在此处获取。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601181e8991b448ddfc7