Vue.js快速入门番外篇——Live Server插件的简介安装与使用
Posted 李阿昀
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
<div id="app">
message
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<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插件的简介安装与使用的主要内容，如果未能解决你的问题，请参考以下文章
从 0 开始入门 Chrome Ext 安全（番外篇） -- ZoomEye Tools