使用vscode运行vue项目

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

之后的是我的日记了。
现在已经下午4点半了,可见我的效率之低。继续加油吧!!今天写博客时的bgm是《这是我一生中最勇敢的瞬间》。
太爱槐花蜜了 ,等蜂蜜到了就做馒头去!

  • 187
    点赞
  • 925
    收藏
    觉得还不错? 一键收藏
  • 13
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值