VSCode如何运行Vue项目

前言

以前都是用webstorm编写前端代码,最近开始尝试使用VSCode来写,目前还是有些懵逼的,一步步将使用流程写下来便于之后自己再次配置。

具体流程:

1:首先还是需要我们利用vue-cli脚手架搭建空vue项目,这个我就不赘述了

2:打开VSCode下载vetur插件

点击左侧圈起来的图标打开拓展插件,在顶部搜索框搜索vetur插件进行下载安装即可。
下载安装完后就会在扩展列表那看到,例如我的是0.29.1版本的
之后需要打开setting.json文件进行配置:

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

在这里插入图片描述

3:下载eslint插件的安装,它是一款智能错误检测插件

点击左侧圈起来的图标打开拓展插件,在顶部搜索框搜索eslint插件进行下载安装即可。
下载安装完后就会在扩展列表那看到,例如我的是2.1.13版本的
之后需要打开setting.json文件进行配置:

"eslint.validate": [
      "javascript",
       "gavesciptreact",
       "html",
       "vue"
   ],
   "eslint.options": {
       "plugins":["html"]
   },

在这里插入图片描述

4:打开我们第一步搭建的空vue项目

在终端输入:npm install,先下载对应的依赖。
最后输入:npm start,运行项目:
在这里插入图片描述
在浏览器打开相应地址看到如图示则表示运行成功:
在这里插入图片描述

5:利用git进行项目迭代

这个具体可看VSCode如何使用git

  • 9
    点赞
  • 57
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值