在前端开发中，我们经常需要实时预览我们所写的代码。而 vue-live 这个 npm 包则能够将我们的代码实时编译并预览出来，提高我们的工作效率。
安装
我们可以通过 npm 命令来安装 vue-live：
npm install -g vue-live
快速上手
我们可以通过以下代码来创建一个简单的 vue-live 实例：
-- -------------------- ---- -------
---- ---------
-- ------- --
------
--------
--- -----
--- -------
----- -
-------- ------ -------
-
--
---------保存文件为 index.vue。然后我们可以通过以下命令来启动 vue-live：
vue-live index.vue
现在我们可以在浏览器中访问 http://localhost:5000 来查看我们的页面。同时，我们可以通过修改代码，实时查看页面的变化。
进阶使用
添加自定义样式
我们可以通过添加一个 style 标签来为我们的页面添加自定义样式。例如：
-- -------------------- ---- -------
---- ---------
-- ------- --
------
-------
---- -
------ ----
-
--------
--------
--- -----
--- -------
----- -
-------- ------ -------
-
--
---------引入外部样式
我们还可以通过 link 标签来引入外部样式。例如：
-- -------------------- ---- -------
---- ---------
-- ------- --
------
----- ---------------- -----------------
--------
--- -----
--- -------
----- -
-------- ------ -------
-
--
---------添加自定义 Props
我们可以通过添加 props 属性来添加自定义 Props。例如：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----- ------- ------
------
-----------
--------
------ ------- -
------ -
------ -
----- -------
-------- ------
--
-------- ------
-
-
---------引入外部组件
我们还可以通过 import 关键字来引入外部组件。例如：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----- ------- ------
-----------------------------
------
-----------
--------
------ ----------- ---- --------------------
------ ------- -
----------- -
--------------- -----------
--
------ -
------ -
----- -------
-------- ------
--
-------- ------
-
-
---------结语
使用 vue-live，我们可以方便地实现代码的实时预览。同时，我们还可以引入自定义样式、自定义 Props、外部组件等功能。希望这个教程能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6dfb67a9b7065299ccb9d7