Vue.js快速入门番外篇——Live Server插件的简介安装与使用

时间：2023-05-09 17:21:04 买帖  | 投诉/举报

篇首语：本文由小编为大家整理，主要介绍了Vue.js快速入门番外篇——Live Server插件的简介安装与使用相关的知识，希望对你有一定的参考价值。

简介

Live Server是一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用Live Server作为一个实时服务器实时查看开发的网页或项目效果。

安装

第一步，打开VSCode开发工具，在VSCode扩展中搜索Live Server，然后安装即可。

Live Server插件安装成功之后，应该就是下面这个样子了。

第二步，按Ctrl+Shift+P快捷键打开命令面板，输入settings，然后在下拉列表中选中首选项: 打开默认设置(JSON)。

这时，你应该就会看到Live Server插件的默认设置。

第三步，在打开的defaultSettins.json文件中搜索liveServer配置项，你将会看到Live Server插件的默认设置，例如有本地服务的端口号、默认打开的浏览器等等，如下图所示。

如果你想修改ive Server插件的默认设置，那么可以直接在defaultSettins.json文件中进行修改。

其实，还有一种修改Live Server插件的默认设置的方式，而且一般都推荐使用这种方式，即在用户设置中进行配置，以覆盖Live Server插件的默认设置。具体做法就是按下Ctrl+Shift+P快捷键打开命令面板，然后输入settings，接着在下拉列表中选中首选项: 打开设置。

最后，在打开的settins.json文件中添加如下内容来覆盖Live Server插件的默认设置。

    "liveServer.settings.port": 8080, // 设置本地服务的端口号    "liveServer.settings.root": "/", // 设置根目录，也就是打开的文件会在该目录下找    "liveServer.settings.CustomBrowser": "chrome", // 设置默认打开的浏览器    "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",    "liveServer.settings.NoBrowser": false,    "liveServer.settings.ignoredFiles": [ // 设置忽略的文件        ".vscode/**",        "**/*.scss",        "**/*.sass"    ]

修改之后的效果就像下图所示的这样。

第四步，设置完毕后，重启VSCode。

使用

在VSCode中使用Live Server插件有一个小小的要求，那就是项目文件夹要单独出现在VSCode的侧边栏，就像下面这样。

如果你要是直接硬挺挺地单独打开一个html页面，使用Live Server插件在浏览器中浏览该页面时，压根就打不开浏览器让你观看网页的效果，而且在VSCode右下角会弹出一个错误提示框，如下图所示。

因此，写项目时大家最好留一个要编辑的项目文件夹在VSCcode侧边栏，这样清清爽爽写代码，心里也会舒畅些。

回到主题，如何在VSCode中使用Live Server插件呢？其实，很简单，打开需要浏览的文件，在文件内容的随便什么位置右键，然后在弹出的下拉列表中点击Open with Live Server即可，如下图所示。

以上vue基础.html文件的内容，我们大可不必在意，学到后面，你自然而然就会知道什么意思了，这里只须复制其中的内容到你要编辑的文件即可。

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <meta name="viewport" content="with=device-width, initial-scale=1.0">        <meta http-equiv="X-UA-Compatible" content="ie=edge">        <title>Vue基础</title>    </head>    <body>        <p id="app">             message         </p>        <!-- 开发环境版本，包含了有帮助的命令行警告 -->        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>        <script>            var app = new Vue(                el:"#app",                data:                    message:"你好，Vue!"                            )        </script>    </body></html>

点击Open with Live Server之后，就会弹出一个谷歌浏览器，然后你便能看到页面在谷歌浏览器中渲染的效果了，如下图所示。

并且，只要你一旦在VSCode中修改并保存了页面的内容，谷歌浏览器就会自动刷新。

以上是关于Vue.js快速入门番外篇——Live Server插件的简介安装与使用的主要内容，如果未能解决你的问题，请参考以下文章