简介
neutrino-preset-vue-static 是一个基于 neutrino 的 Vue 静态网站生成工具。neutrino-preset-vue-static 可以帮助你快速构建一个使用 Vue.js 的静态网站，并提供一些有用的功能。
安装
首先需要确保已经安装 neutrino，如果没有安装可以使用以下命令进行安装。
npm install -g neutrino
安装 neutrino-preset-vue-static。
npm install --save-dev neutrino-preset-vue-static
使用
在项目的根目录下创建 neutrino.config.js 文件，写入以下内容。
-- -------------------- ---- -------
----- - ---- - - ----------------
----- - --------------- - - ----------------------
-------------- - ---------- -- -
-------------------
----------
-------- -
---- -
---------------- -
------------------- -----
-
-
--
-------- ---- ------------------
---
------------------------------------------ -
-------- --------------- ----------
----------- --------------- ------------------
------ --------------- ------------
---
--其中，outPath 是生成网站的目标路径，components 是 Vue 组件的路径，pages 是静态页面的路径。
在项目的根目录下创建 src 文件夹，并在其中创建 components 和 pages 文件夹。
在 components 文件夹中创建 HelloWorld.vue 文件，写入以下内容。
-- -------------------- ---- -------
----------
---- --------------
-- --- --
------
-----------
--------
------ ------- -
------ -
------ -
---- ------- -------
--
-
--
---------
------ -------
------ -
---------- -----
------ -----
-
--------在 pages 文件夹中创建 index.js 文件，写入以下内容。
-- -------------------- ---- -------
------ --- ---- ------
------ ---------- ---- ------------------------------
------ ------- --- -----
--- -------
----------- -
----------
--
--------- -
----------- --
-
---除此之外还有静态资源，如图片等，可以在 src 文件夹中创建 static 文件夹。
接下来可以使用以下命令启动服务。
neutrino start
现在可以在浏览器中打开 http://localhost:5000 查看网站。
总结
neutrino-preset-vue-static 是一个非常方便快捷的生成静态网站的工具，使用起来也非常简单。同时，这个工具也提供了一些有用的功能，例如热更新、压缩等。希望本文能对 Vue 前端开发者在搭建静态网站的过程中提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558ef81e8991b448d6420