VS Code + Vue 开发环境搭建

最新推荐文章于 2024-06-17 14:32:51 发布
最新推荐文章于 2024-06-17 14:32:51 发布
阅读量710 收藏 2
点赞数
分类专栏： 前端技术 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/john320/article/details/128112297
版权

1、下载并安装 Visual Studio Code 2019 

2、Visual Studio Code 2019安装成功后，打开VS Code 工具点击左侧【扩展】菜单，在搜索栏中输入 Chinese 查找中文语言汉化包插件下载安装，然后重启VS Code

3、点击左侧【扩展】菜单，在搜索栏中输入Vuter 查找代码高亮显示插件，下载并安装

4、安装Nodejs，安装教程：Nodejs安装教程_彭佼的博客-CSDN博客_nodejs安装

5、使用快捷键Ctrl+shift+Y呼出控制台，在控制台点击终端输入npm install 或者 npm i 添加包依赖。
在这里插入图片描述

6、最后执行npm run dev代表开始运行项目，这条命令会自动在浏览器上运行项目，运行结果如下图所示：

7、打包发布命令：npm run build:prod

john320
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
使用vs code搭建vue项目1
09-04
使用 VS Code 搭建 Vue 项目 ...使用 VS Code 搭建 Vue 项目需要配置环境、安装插件、创建 Vue 项目、安装依赖项和运行项目。通过本文提供的步骤和命令，读者可以快速搭建 Vue 项目，并开始构建自己的 Web 应用程序。
基于SpringBoot+VUE开发的校园招聘网站
04-17
1. **环境准备**：安装Java开发环境（JDK）、Maven或Gradle、Node.js及Vue CLI。 2. **后端开发**：使用Spring Initializr初始化SpringBoot项目，配置数据库连接、Web服务、安全设置等，编写RESTful API接口。 3. **...
搭建vscode+vue环境的详细教程
11-19
一、安装vue.js
在VS code上运行Vue项目的环境搭建
qq_27474555的博客
08-04 776
在命令行输入：npm install -g cnpm --registry=https://registry.npmmirror.com。譬如下载的文件为node-v18.17.0-x64.exe,双击安装；下载地址https://nodejs.cn/download/在终端输入node -v,检查node是否安装成功。在终端输入npm -v，检查npm是否安装成功；输入cnpm -v检验是否安装成功。6、在VS code上打开vue项目。4、安装vue/cli脚手架。2、检查是否安装成功。
VS code上创建Vue项目详细化教程1-配置VScode与Vue
Charles_Clark的博客
06-06 2219
VS code上创建Vue项目详细化教程1-配置VScode与Vue
Visio Studio Code 搭建Vue开发环境
summer_fish的专栏
08-07 745
如果您尚未安装 Visual Studio Code，您可以从官方网站（打开 VS Code，在扩展商店搜索并安装 Vue.js 插件。常用的插件有「Vetur」和「Vue VS Code Extension Pack」，它们提供了 Vue 语法高亮、代码片段、自动补全等功能。
从头搭建VS Code开发Vue环境
qq_38797504的博客
08-01 694
从0搭建VS CODE开发VUE的各种环境，包含vuedevtools安装。
基于Visual Studio Code搭建Vue开发环境
weixin_30952535的博客
05-29 569
安装node.js最新版 这里安装的是8.11.4版 image.png 更新npm至最新版 安装node.js后， npm默认版本为： 6.1.0 image.png 使用npm install npm -g更新npm至最新版 image.pn...
vue安装及环境搭建二
01-20
在本文中，我们将深入探讨如何进行Vue.js的安装与环境搭建，特别关注使用Visual Studio Code (VS Code)作为开发环境的配置。VS Code是一款广泛使用的轻量级且功能丰富的源代码编辑器，尤其适合前端开发。 首先，让...
基于springboot+vue的音乐网站开发项目
02-19
在本地开发环境中，可以使用集成开发工具如IntelliJ IDEA和Visual Studio Code，配合npm或yarn进行项目构建和运行。对于线上部署，可以选择云服务器，如阿里云、腾讯云，将打包后的SpringBoot应用和Vue.js静态资源...
DelphiWebMVC+vue+element-ui开发事例.zip
05-29
这个案例展示了一种混合开发模式，即使用Delphi作为后端服务提供商，VSCode作为前端开发的集成开发环境（IDE），实现前后端分离的BS（Browser-Server）架构。 1. **DelphiWebMVC框架**：这是一个专为Delphi设计的...
VSCode中配置Vue开发环境
最新发布
lbf198303的博客
06-17 997
【代码】VSCode中配置Vue开发环境。
vs code 搭建 vue 开发环境
htydowd的博客
06-01 449
vue-cli ： 输入 npm install -g @vue/cli。nodejs：官网下载安装后 输入 node -v 验证是否安装成功。以管理员身份打开 vs code ，导入 vue 项目。-project-name ，创建vue 项目。安装后，vue --versoin 验证。终端执行 npm run serve。vs code 环境准备好。进入目标文件夹，输入。现在开发越来越简单了。
VS code上创建Vue项目详细化教程2-配置并创建Vue项目
Charles_Clark的博客
06-06 1378
VS code上创建Vue项目详细化教程2-配置并创建Vue项目
VSCode 常用插件推荐
全栈程序员小黑的博客
05-03 4031
VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。适用于 VS Code 的中文（简体）语言包拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中。
vue开发环境配置Visual Studio Code配置和安装教程查询
yqj234的专栏
01-04 632
vue开发工具vs code插件安装详细教程，共有8大插件
使用VisualStudioCode开发Vue
kiba518的博客
09-29 3565
前言 本文主要介绍在VisualStudioCode下开发Vue。 Nodejs、Npm、Vue的项目搭建参考下面文章。 用后台开发的逻辑理念学习VUE 在Windows下学习Nodejs、Npm和VUE VSCode配置 首先为VSCode增加插件，ctrl+shift+X调出扩展管理界面。 Chinese (Simplified) Language Pack for Visual Studi...
Vue开发好伙伴--Visual Studio Code编辑器
Lushengshi的博客
08-18 2184
在vue前端开发中起到了很便利的开发作用，本文主要是讲解一些vscode的使用，非常值得刚刚入门的萌新朋友参考学习。
VS-Code中Vue3-项目创建
zhzjn的博客
12-07 3964
本文适合作为新手小白创建vue项目时的参考，包含了node.js，npm以及npm镜像，vue的使用，谢谢换看
vscode vue开发环境搭建
05-25
要在 VS Code 中搭建 Vue 开发环境，需要进行以下步骤： 1. 安装 Node.js 和 npm 在官网上下载并安装 Node.js，npm 也会随之安装。 2. 安装 Vue CLI 打开终端或命令行工具，运行以下命令： ``` npm install -g @vue/cli ``` 3. 创建 Vue 项目 在 VS Code 中打开终端或命令行工具，进入你想要创建 Vue 项目的文件夹，运行以下命令： ``` vue create <project-name> ``` 其中 `<project-name>` 是你的项目名称。 4. 安装 Vue.js 插件 在 VS Code 中打开 Extensions 侧边栏，搜索并安装 Vue.js 插件。这个插件可以提供语法高亮、错误提示等功能。 5. 运行 Vue 项目 在 VS Code 中打开终端或命令行工具，进入你的项目文件夹，运行以下命令： ``` npm run serve ``` 这样就能在浏览器中看到你的 Vue 项目了。 以上就是在 VS Code 中搭建 Vue 开发环境的步骤。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值