使用VScode运行vue项目

最新推荐文章于 2023-07-12 02:00:00 发布
最新推荐文章于 2023-07-12 02:00:00 发布
阅读量3k 收藏 1
点赞数
分类专栏： 运行vue 文章标签： vue vue.js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43163515/article/details/106333151
版权

使用VScode运行vue项目

创建vue项目

1、打开终端（快捷键Ctrl+~）打开终端
终端图
2、输入命令 创建项目
vue init webpack 项目名
输入命令结尾显示的代码
3、可查看项目 命令代码 cd 项目名
输入命令，路径变到项目路径下 可去文件夹查看
4、运行项目 命令代码 npm run dev 如果报错 可先输入命令 cnpm run dev 试试。
自动生成的默认端口
5、端口加项目名浏览器运行 localhost:8081/helloword
运行成功图

长情又很酷
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用vscode快速搭建Vue项目步骤_vscode创建vue项目3种方法(1)
fksdskjfzxklzk的博客
05-01 1825
1.webpack打包文件体积过大？①在代码目录下创建一个文件夹，然后用VSCode打开。①输入npm create vite@latest。②输入项目名称vue-project，选择vue。⑦进入项目，运行pnpm install。③输入pnpm create vite。④进入项目，运行npm install。②点击查看打开终端，然后切换到cmd。2.如何优化webpack构建的性能。4.Vue的SPA 如何优化加载速度。③选择JavaScript。⑤选择vue，然后回车。3.移动端的性能优化。
vscode运行vue项目
代上老码的专栏
04-08 2898
通过以上步骤，你应该能够在VSCode中成功运行和开发Vue项目。记得利用VSCode的扩展市场来安装一些有用的扩展，比如Vetur或Volar，它们可以提供语法高亮、代码片段、格式化和Linting等功能，以提高你的开发效率。： 在VSCode中，打开项目根目录后，你会看到一个提示，要求你安装项目依赖。： 使用VSCode打开你的Vue项目。你可以通过VSCode的“文件”菜单选择“打开文件夹...”，然后导航到你的Vue项目目录。默认情况下，你的Vue应用将在。，你应该能够看到你的Vue项目正在运行。
如何用vscode运行vue项目（vue环境搭建）
m0_46698214的博客
06-30 3万+
首先，先列出我们在vscode上运行vue项目所需要的东西 1、下载并安装vscode 2、node.js环境（npm包管理器） 3、vue-cli 脚手架构建工具 4、cnpm npm的淘宝镜像 一、下载并安装vscode 在上一篇博客中写过附上地址： ...
用VScode运行Vue项目详细全过程（node.js环境的配置）
D_gloria的博客
07-13 5万+
在用VScode运行Vue项目前，我们需要先配置node.js环境，就类似于使用eclipse前需要配置Java环境的这个过程。 一、安装node.js并配置环境变量 1、安装 从官网下载安装包，解压到指定位置，就相当于安装完成了。然后在解压后的目录下新建node_global和node_cache这两个文件夹。 node_global：npm全局安装位置 node_cache：npm缓存路径 2、配置环境变量 ......
使用VSC从零开始写一个Vue前端
XiaoCai
07-12 889
使用Visual Studio Code（VSC）进行Vue开发，写一个简单原生的DAG图显示下效果
VSCode常用命令---记录自己的常用命令
Una_lover的博客
10-19 4256
收录nvm 、npm、vue、git等常用命令
使用vscode运行vue项目
洋葱专栏-有灵魂的程序员
02-01 2万+
！！学习完vue环境搭建并创建项目后下面我们介绍使用vscode运行vue项目。！！文章参考：https://www.csdn.net/gather_29/OtTagg3sNzA2LWJsb2cO0O0O.html&https://www.jianshu.com/p/80ae9b1b8fae 【如果你和我一样是菜鸟的话，点进来的时候不要被文章长度吓到了，因为我写的特别详细所以看起来篇幅比较长，加上截图比较庞大。我怀疑之前由于截图较小 博客没自动给我加水印，导致文章发不出去，咱就是怀疑，咱也...
vscode下vue项目中eslint的使用方法
01-21
在vscode的vue项目中，关于代码检查和格式化，遇到各种各样的问题，比如： 不清楚安装的拓展的功能，导致安装了重复功能的拓展 右键格式化文档的时候，不是按eslint的规则来格式化，导致需要我再次手动调整 保存...
新手安装VSCode+Vue项目运行手册（适合新手）
12-16
安装VSCode+安装配置插件+获取代码+项目运行
VSCode搭建Vue Element Admin的项目环境
最新发布
04-11
VSCode搭建Vue Element Admin的项目环境 版本： node：v18.20.2 npm:：10.5.0 git：2.19.1 vue-element-admin：https://panjiachen.gitee.io/vue-element-admin-site/zh/
用vscode开发vue应用的方法步骤
10-17
为了保持代码风格的一致性，你需要安装Vetur插件，它是VSCode开发Vue项目的重要辅助工具。在VSCode内搜索并安装Vetur。 尝试自动格式化代码，你可能会发现当前无法进行。这时，需要在项目中添加Prettier，它是用于...
搭建vue项目 并使用vsCode打开并启动项目
huhu518420的博客
06-13 7439
1.项目搭建 这里搭建vue项目我就引用别人的地址了，说的很详情，照着做，有疑问的百度一下就直到了 文章地址：https://www.jianshu.com/p/02b12c600c7b 2.使用vsCode打开并启动项目： 2.1：首先vsCode需要安装的插件 2.2:配置vsCode的setting 1.点击左下角设置按钮 2.在弹出的框中点击右上角花括号，如下图 ...
vscode如何运行vue项目
DuBanL的博客
04-07 1万+
这里写自定义目录标题vue项目环境的搭建以及如何在VScode中创建并运行vue环境的搭建VScode中创建vue项目 vue项目环境的搭建以及如何在VScode中创建并运行 vue环境的搭建 步骤： node node.js 前端开发环境（Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，Node 是一个让 JavaScript 运行在服务端的开发平台，它...
如何用vscode运行vue项目（vscode配置）
m0_46698214的博客
06-30 6376
该博客之前建议查看上两篇博客关于vscode安装与vue环境配置 1、vscode安装 2、vue环境配置 vue插件的安装 vetur安装 该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行。 eslint安装 eslint智能错误检测插件，在具体开发中作用很大，能够及时的帮我们发现错误。至于安装，同样打开插件扩展窗口输入eslint点击安装插件 Auto Close Tag安装 Auto Close Tag 自动闭合HTML/XML标签 Auto Rename Tag
VSCode配置启动Vue项目
老樊的博客
08-11 1211
注意：这个是1.2版本的配置，现在1.3版配置已经不是这样了 下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。 1、vetur插件的安装 该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选项->设置 打开设置界面，在设置界面右侧添加配置 "emmet.syntaxProfiles": { "vue-html": "html", "
搭建vscode+vue环境
热门推荐
mao834099514的博客
01-23 16万+
一、安装vue.js1.简介Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现
vscode运行vue项目vscode插件使用
08-13
要在VSCode中运行Vue项目，可以按照以下步骤操作： 1. 确保你已经安装了Node.js和Vue CLI。如果没有安装，你可以在官方网站上下载并按照指示进行安装。 2. 在VSCode中打开你的Vue项目文件夹。 3. 打开终端（Terminal）面板，可以通过点击菜单栏的“View” -> “Terminal”或使用快捷键Ctrl + `。 4. 在终端面板中输入以下命令安装项目所需的依赖： ``` npm install ``` 5. 安装完成后，运行以下命令启动开发服务器： ``` npm run serve ``` 6. 当服务器成功启动后，你将在终端面板中看到类似于“App running at: http://localhost:8080/”的信息。你可以在浏览器中打开这个链接来查看你的Vue应用程序。 对于VSCode插件的使用，你可以安装一些常用的插件来提高开发效率，例如： - Vetur：提供Vue语法高亮、错误检查、代码补全等功能。 - Vue 3 Snippets：提供Vue 3的代码片段，快速生成常用代码块。 - ESLint：用于检查和修复JavaScript和Vue代码的语法错误和潜在问题。 - Prettier：用于格式化代码，使其符合统一的编码风格。 你可以在VSCode的插件市场中搜索这些插件并安装它们。安装完成后，它们将自动集成到VSCode的编辑环境中，提供相应的功能和快捷键。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值