使用vscode运行vue项目

阳光穿透心脏的1/2处 2022-10-26 04:56 237阅读 0赞

**！！学习完vue环境搭建并创建项目后下面我们介绍使用vscode运行vue项目。！！**  
*文章参考：https://www.csdn.net/gather\_29/OtTagg3sNzA2LWJsb2cO0O0O.html* & *https://www.jianshu.com/p/80ae9b1b8fae*

【如果你和我一样是菜鸟的话，点进来的时候不要被文章长度吓到了，因为我写的特别详细所以看起来篇幅比较长，加上截图比较庞大。我怀疑之前由于截图较小 博客没自动给我加水印，导致文章发不出去，咱就是怀疑，咱也不敢问 ^ < ^ 。继续加油八！！】

***一：下载vscode地址为：https://code.visualstudio.com/***  
然后根据自己的电脑下载对应的版本，我的是Windows X64。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70]  
**二：语言的修改（Visual Studio Code附有10种可用的显示语言：英文（美国），简体中文，繁体中文，法文，德文，意大利文，日文，韩文，俄文和西班牙文，这些语言包一般都包含在Visual Studio Code中不用额外下载。但例外总无法避免，从微软官网下载的版本就没带中文语言包，所以需要单独下载。）**

当下载安装完成后，我们会发现显示的全都是英文，一头蒙啊，果断的改变语言。ctrl+shift+p ，切入到命令行模式，输入“Configure Language”，然后点击下拉框出来的 Configure Display Language，然后会出现一个界面（若你是最新版vscode，不会出现该界面，选中不是“en”那一行之后，显示如下图），把其中"locale":“en"改成"locale”:"zh-CN"即可\*\[①\]。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 2]  
中文语言包安装好以后，软件会自动重启，然后变成中文版，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 3]  
\*\[①\]：进入Configure Display Language后，没找到注释①处说的更改界面，我就没管，直接选择了“安装其他语言”（当时选项是英文的哈）。  
中文语言包安装好后，再进入Configure Display Language，多了一行“zh-cn”，点击该行， 看到重启提示 点击重启 , 如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 4]  
重启之后，语言修改便完成了！！（现在我知道为啥注释①那里没有跳出百度上说的界面了，我下载的最新版vscode，系统默认带有“en”语言版本，只有先下载了中文语言包后才有“zh-cn”选项，最后选中它再重启生效即可！！）

**三：vue插件的安装**

1、vetur插件的安装  
该插件是vue文件基本语法的高亮插件，在插件窗口中（快捷键是ctrl+shift+x）输入vetur点击安装插件就行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 5]  
装好后点击文件->首选项->设置 打开设置界面，在设置界面右侧添加配置。点击“在settings.json中编辑”，进入代码编辑界面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 6]  
输入Vetur文档代码：

{
        "emmet.syntaxProfiles": {
               "vue-html": "html",
               "vue": "html"
           },
    }

2、eslint插件的安装  
eslint智能错误检测插件，在具体开发中作用很大，能够及时的帮我们发现错误。至于安装，同样打开插件扩展窗口输入eslint点击安装插件，装好后也需要进行配置，在同vetur插件一样的地方进行配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 8]  
输入eslint文档代码：

{
       "eslint.validate": [
            "javascript",
            "javascriptreact",
            "html",
            "vue"
        ],
    
        "eslint.options": {
            "plugins":["html"]
        }
    }

显示如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 9]  
3.Auto Close Tag 自动闭合HTML/XML标签，下载，见4图：

4.Auto Rename Tag 自动完成另一侧标签的同步修改，下载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 10]  
5.Debugger for Chrome 映射vscode上的断点到chrome上，方便调试  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 11]  
四：然后打开我们的vue项目【若之前没用命令行建立过vue项目，详情请见[Vue开发环境搭建及在docs新建vue项目][Vue_docs_vue]】，右键——>打开文件夹，然后导入项目（我的项目在D盘，文件夹名为my-vue）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 12]  
Ctrl+shift+Y呼出控制台，在控制台终端输入npm install添加包依赖 。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 13]  
五：同样在终于执行npm run dev代表开始运行项目，这条命令会自动在浏览器上运行项目，运行结果如下图所示，代表配置成功了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 14]  
六：点击(ctrl+点击)网址http://localhost:8080,运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 15]  
**到此，使用vscode运行vue项目成功啦，完结啦！**

**转载：**[https://blog.csdn.net/xw\_009/article/details/105359325][https_blog.csdn.net_xw_009_article_details_105359325]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70]: /images/20221024/edea85c716934bbd83eb77a17ac8bb35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/4e9824c41bdd4fe4bd5708e976e947d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/3a346d432a5049eea90ab79e39618d9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/69dd92c19bf847b8a52541ee75c56abd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/1f9a3dadc6b8431d97787e5dd309c6d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/300426ec84344cb7b9b0fbb611126111.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/d4b6fcc365de41f9b01c2bdbaa2324df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/e0bc8e13722e4bcb84bac13df88caa19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/898a4704293e4164b884ccafd79d6eee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/6c0a10b788d949419b29733591fb80e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 10]: /images/20221024/5566b18ffc3449c693a75f7ee6b6d952.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 11]: /images/20221024/6c5547b1126a43538a6742bb49837c68.png
[Vue_docs_vue]: https://blog.csdn.net/xw_009/article/details/104746461
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 12]: /images/20221024/26da69e1c6b548919f5bd402d12da152.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 13]: /images/20221024/6aea1f47f9ef460694e0fd4efc037e93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 14]: /images/20221024/4f936d62af394fe79971bc1ab8d208a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h3XzAwOQ_size_16_color_FFFFFF_t_70 15]: /images/20221024/1d21877a98724553bdf2587c839f4984.png
[https_blog.csdn.net_xw_009_article_details_105359325]: https://blog.csdn.net/xw_009/article/details/105359325