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

谁借莪１个温暖的怀抱￠ 2022-11-22 10:11 1438阅读 0赞

# 简介 #

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

# 安装 #

第一步，打开VSCode开发工具，在VSCode扩展中搜索Live Server，然后安装即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center]  
Live Server插件安装成功之后，应该就是下面这个样子了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 1]  
第二步，按`Ctrl+Shift+P`快捷键打开命令面板，输入`settings`，然后在下拉列表中选中`首选项: 打开默认设置(JSON)`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 2]  
这时，你应该就会看到Live Server插件的默认设置。

第三步，在打开的defaultSettins.json文件中搜索`liveServer`配置项，你将会看到Live Server插件的默认设置，例如有本地服务的端口号、默认打开的浏览器等等，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 3]  
如果你想修改ive Server插件的默认设置，那么可以直接在defaultSettins.json文件中进行修改。

其实，还有一种修改Live Server插件的默认设置的方式，而且一般都推荐使用这种方式，即在用户设置中进行配置，以覆盖Live Server插件的默认设置。具体做法就是按下`Ctrl+Shift+P`快捷键打开命令面板，然后输入`settings`，接着在下拉列表中选中`首选项: 打开设置`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 4]  
最后，在打开的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"
        ]
    }

修改之后的效果就像下图所示的这样。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 5]  
第四步，设置完毕后，重启VSCode。

# 使用 #

在VSCode中使用Live Server插件有一个小小的要求，那就是项目文件夹要单独出现在VSCode的侧边栏，就像下面这样。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 6]  
如果你要是直接硬挺挺地单独打开一个html页面，使用Live Server插件在浏览器中浏览该页面时，压根就打不开浏览器让你观看网页的效果，而且在VSCode右下角会弹出一个错误提示框，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 7]  
因此，**写项目时大家最好留一个要编辑的项目文件夹在VSCcode侧边栏，这样清清爽爽写代码，心里也会舒畅些。**

回到主题，如何在VSCode中使用Live Server插件呢？其实，很简单，打开需要浏览的文件，在文件内容的随便什么位置右键，然后在弹出的下拉列表中点击`Open with Live Server`即可，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 8]  
以上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`之后，就会弹出一个谷歌浏览器，然后你便能看到页面在谷歌浏览器中渲染的效果了，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 9]  
并且，只要你一旦在VSCode中修改并保存了页面的内容，谷歌浏览器就会自动刷新。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/fec0da2668d44d0da2ae8456f1cff80f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/a643c38ae9cb40ad8feae3f2eb8d5101.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/2020110321312423.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201103213135123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201103213151615.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201103213209709.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201103213225735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20201103213236961.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20201103213248449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70_pic_center 9]: https://img-blog.csdnimg.cn/20201103213259307.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U=,size_16,color_FFFFFF,t_70#pic_center