使用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是《这是我一生中最勇敢的瞬间》。
太爱槐花蜜了，等蜂蜜到了就做馒头去！

使用vscode运行vue项目相关推荐

VSCode运行Vue项目后自动打开浏览器
因脚手架版本的不同,项目运行可以使用npm run dev 和 npm run serve 当使用npm run start 的时候在config文件里面找到index.js文件,修改里面的属性 au ...
求解决方法 vscode运行vue项目占用c盘大量空间
今天c盘突然爆红了,大概剩余12G.vs code卸载重装到别的盘,再运行使用了一会儿,c盘仅剩200M,并且运行特别卡.有没有啥解决办法,c盘现在已经剩100M了.
Vscode的vue项目中下滑红线报错问题
Vscode的vue项目中下滑红线报错问题 1.报错原因代码存在语法错误(错误并不影响项目的编译运行),并且校验功能是开启状态就会出现下滑红线的报错. 2.解决方法 1)关闭校验如果项目的校验功能 ...
记录，再次运行vue项目报错POST http://127.0.0.1:8888/api/private/v1/login/login
可以打开登录界面,却无法打开登录后界面代码没有问题,查阅资料后是后台服务器没打开删除package-lock.json文件运行npm install 再次运行node .\app.js 打开ph ...
win10快速运行vue项目跑起来 - 方法篇
如何让win10更快速跑vue项目运行起来? 不用再每次先cd到项目目录了, 直接进入根文件夹后,再打开Powershell窗口,可以省略一大堆操作 (详情如下简介) 快捷操作如下: 先打开,并进入 ...
用AndroidStudio和vsCode运行ReactNative项目
笔记 react-native学习笔记安装依赖必须安装的依赖有:Node.Watchman.JDK 和 Android Studio.虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然 ...
如何运行vue项目？(详解，建议收藏) ❤️
如何运行vue项目 (详解,建议收藏) 转载首先,列出来我们需要的东西: node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像安装node.js 从no ...
运行VUE项目时，出现npm ERR! A complete log of this run can be found in:...报错
运行VUE项目时,出现npm ERR! A complete log of this run can be found in:报错时,分享以下一种解决方案. 本机的 node版本如下解决方法 1. ...
VSCode搭建Vue项目及服务器部署
一.安装nodeJs 在我之前的博客<idea搭建vue-cli项目>里有详细安装教程,这里进入! 二.在VSCode搭建Vue项目 1.安装全局脚手架 npm i -g @vue/cli ...

使用vscode运行vue项目

使用vscode运行vue项目相关推荐

最新文章

热门文章