!!学习完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项目成功啦,完结啦!