怎么在vscode上运行vue项目

vscode上运行vue项目的方法:1、用vue-cli脚手架搭建空vue项目;2、打开VSCode下载vetur插件;3、下载安装eslint插件;4、打开vue项目并利用git进行项目迭代即可。

怎么在vscode上运行vue项目

本文操作环境:Windows7系统、vue2.5.17版,DELL G3电脑

怎么在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

推荐学习:《vue教程》

以上就是怎么在vscode上运行vue项目的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3019713.html

(0)
上一篇 2025年3月13日 05:30:22
下一篇 2025年3月13日 05:30:30

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue怎么读取本地文件

    vue读取本地文件的方法:1、通过“function (name) {…}”获取本地的文件;2、在组件中引入并进行相应的字符串处理;3、通过循环将“this.iconList”里面的值绑定到“”的class即可。 本文操作环境:…

    2025年3月13日
    200
  • vue怎么跳转到另一个页面

    vue跳转到另一个页面的实现方法:1、在a标签中添加跳转函数;2、将跳转的url添加到$router中;3、通过“path+query”的组合传递参数即可。 本文操作环境:windows7系统、vue2.5.17版、DELL G3电脑。 v…

    2025年3月13日
    200
  • vuejs怎么请求拦截

    vuejs请求拦截的方法:1、在src文件夹下创建utils文件夹;2、在文件夹下创建request.js和auth.js文件;3、下载axios;4、创建实例实现请求拦截即可。 本文操作环境:windows7系统、Vue2.9.6版、DE…

    2025年3月13日
    200
  • Vue 中使用 mixins 实现代码复用的技巧

    vue 是一个非常流行的 javascript 框架,它不仅可以帮助开发者快速构建复杂的单页应用程序,还提供了很多实用的功能帮助我们更好地编写代码。其中,mixins 就是一个非常重要的概念,它提供了一种简单而又有效的方式来实现代码复用。 …

    编程技术 2025年3月13日
    200
  • Vue 中懒加载的实现原理和最佳实践

    vue 中懒加载的实现原理和最佳实践 懒加载(Lazy Loading)是一种优化前端性能的技术,它可以延迟加载页面中的部分内容,当用户需要访问这些内容时才去加载,从而提高页面的加载速度和响应速度。在 Vue 中,可以通过异步组件实现懒加载…

    编程技术 2025年3月13日
    200
  • Vue 中如何实现列表排序及拖动排序?

    随着前端开发技术的不断发展,越来越多的网站和应用需要在界面上实现拖拽排序的功能。在vue框架中,我们可以使用一些库或者组件来轻松地实现列表排序及拖动排序功能。 一、使用sortable.js实现列表排序 sortable.js是一个独立的库…

    编程技术 2025年3月13日
    200
  • Vue 中如何实现弹性布局?

    vue 中如何实现弹性布局? 弹性布局(Flexbox)是一种流布局模型,也是 CSS3 中最新的布局模式之一。它具有强大的排版能力,可以轻松实现多种复杂布局效果。在 Vue 中实现弹性布局也很容易,只需要掌握一些基本概念和技巧即可。 一、…

    编程技术 2025年3月13日
    200
  • Vue 中使用第三方库进行地图开发的技巧

    随着移动互联网和云计算的发展,地图应用逐渐走进了我们的日常生活。在前端开发中,使用vue框架和第三方地图库进行地图开发是一个常见的选择。以下是一些技巧,帮助您更好地在vue中使用第三方地图库进行开发。 1.选择合适的地图库 目前市面上有许多…

    编程技术 2025年3月13日
    200
  • Vue 中使用 eventBus 实现组件间通信的技巧及最佳实践

    vue 是当今最受欢迎的 javascript 前端框架之一,其强大的组件化能力给前端开发带来了极大的便利。然而,在开发过程中,组件间的通信问题往往会使代码变得复杂和难以维护。为了解决这个问题,vue 提供了一种非常实用的工具——event…

    编程技术 2025年3月13日
    200
  • 在Vue应用中使用vue-resource时出现“Not allowed to load local resource: file:///xxx”怎么办?

    vue.js是一款流行的前端框架,许多人都会在项目中使用vue.js。在vue.js开发中,我们经常使用vue-resource这个插件来进行异步请求操作。然而,当我们在本地环境下使用vue-resource,在控制台中可能会出现“not …

    编程技术 2025年3月13日
    200

发表回复

登录后才能评论