使用vscode运行vue项目

一：下载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项目成功啦，完结啦！ 

转自：使用vscode运行vue项目_xw_009的博客-CSDN博客_vscode运行vue项目