使用vscode运行vue项目

最新推荐文章于 2025-04-29 14:38:14 发布

洋葱ycy

最新推荐文章于 2025-04-29 14:38:14 发布

阅读量2.8w

点赞数 47

分类专栏：大数据

原文链接：https://blog.csdn.net/xw_009/article/details/105359325

版权

大数据专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍如何使用VSCode编辑器运行Vue项目，包括下载安装VSCode、语言设置、安装必要的插件（如vetur、eslint等）、打开并运行Vue项目等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

当下载安装完成后，我们会发现显示的全都是英文，一头蒙啊，果断的改变语言。ctrl+shift+p ，切入到命令行模式，输入“Configure Language”，然后点击下拉框出来的 Configure Display Language，然后会出现一个界面（若你是最新版vscode，不会出现该界面，选中不是“en”那一行之后，显示如下图），把其中"locale":“en"改成"locale”:"zh-CN"即可*[①]。
在这里插入图片描述

中文语言包安装好以后，软件会自动重启，然后变成中文版，如下图：

*[①]：进入Configure Display Language后，没找到注释①处说的更改界面，我就没管，直接选择了“安装其他语言”（当时选项是英文的哈）。
中文语言包安装好后，再进入Configure Display Language，多了一行“zh-cn”，点击该行，看到重启提示点击重启 , 如下图所示：
在这里插入图片描述
重启之后，语言修改便完成了！！（现在我知道为啥注释①那里没有跳出百度上说的界面了，我下载的最新版vscode，系统默认带有“en”语言版本，只有先下载了中文语言包后才有“zh-cn”选项，最后选中它再重启生效即可！！）

三：vue插件的安装

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

输入Vetur文档代码：

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

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

输入eslint文档代码：

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

    "eslint.options": {
        "plugins":["html"]
    }
}

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

4.Auto Rename Tag 自动完成另一侧标签的同步修改，下载
在这里插入图片描述
5.Debugger for Chrome 映射vscode上的断点到chrome上，方便调试

四：然后打开我们的vue项目【若之前没用命令行建立过vue项目，详情请见Vue开发环境搭建及在docs新建vue项目】，右键——>打开文件夹，然后导入项目（我的项目在D盘，文件夹名为my-vue）。
在这里插入图片描述
Ctrl+shift+Y呼出控制台，在控制台终端输入npm install添加包依赖。

五：同样在终于执行npm run dev代表开始运行项目，这条命令会自动在浏览器上运行项目，运行结果如下图所示，代表配置成功了。

六：点击(ctrl+点击)网址http://localhost:8080,运行结果如下：
在这里插入图片描述
到此，使用vscode运行vue项目成功啦，完结啦！