使用VS code 打开Vue项目

最新推荐文章于 2025-03-20 11:12:13 发布
最新推荐文章于 2025-03-20 11:12:13 发布
阅读量1w 收藏 13
点赞数
分类专栏： Vue 文章标签： VUE VScode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43540696/article/details/103122407
版权

本文目录

开始工作

在这里插入图片描述

初始界面为英文 将它界面设置成中文

在这里插入图片描述

快捷键【Ctrl+Shift+P】弹出的搜索框中输入【configure language】

在这里插入图片描述

打开了locale.json文件修改locale属性为zh-cn

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

保存（CTRL+S）locale.json文件，重新启动VSCode软件
locale.json中的代码配置的意思是说软件启动加载语言配置包为中文
实际上刚刚安装的VSCode并没有中文语言包

在这里插入图片描述

按照图中红色箭头指示位置点击步骤1在弹出的搜索框中输入Chinese
选择【Chinese （Simplified）Language Pack for Visual Studio Code】，然后点击右侧的【Install】
安装好后重启vs就可以看见熟悉的中文了！

在这里插入图片描述

打开项目

在这里插入图片描述
在这里插入图片描述

根据自己创建的项目路径打开

在这里插入图片描述

给项目添加Element ui插件吧！
在该项目目录下cmd输入命令

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

等待安装成功后

在这里插入图片描述

在VS code 里修改webpack.config.js文件

在这里插入图片描述

添加以下element框架特殊的文件格式eot|woff|woff2|ttf在这里插入图片描述
在main.js里导入element ui框架

在这里插入图片描述

可以上网:http://element-cn.eleme.io/#/zh-CN/component/installation

查找所需要的组件:在app.vue中安排布局

如果项目需要使用router

在项目cmd命令窗口输入npm install vue-router
在VS Code中创建和运行Vue项目
DpgrMl的博客
10-07 910
通过安装Node.js和Vue CLI，创建Vue项目，并使用VS Code进行编辑和开发。在VS Code中创建Vue项目的下一步是使用Vue CLI创建一个新的项目。当您完成对Vue项目的开发并准备进行部署时，可以使用Vue CLI进行项目构建。在VS Code中，选择“文件”>“打开文件夹”，然后导航到您的Vue项目文件夹并打开它。接下来，我们需要安装Vue CLI（Vue命令行界面），它是用于创建和管理Vue项目的工具。首先，打开终端或命令提示符，并导航到您的Vue项目文件夹。
使用VS Code搭建Vue项目
DpgrMl的博客
09-24 1813
只需安装Node.js和npm，安装Vue CLI，创建Vue项目，打开项目文件夹，启动开发服务器，编辑Vue组件，保存并查看更改，最后构建生产版本。使用Vue CLI，您可以轻松创建一个具有现代开发工具链的Vue项目。您可以使用VS Code的菜单选项“文件”>“打开文件夹”，或使用命令行切换到项目目录。您将看到一个URL，可以在浏览器中打开以查看您的应用程序。现在，您可以使用VS Code来编辑Vue组件文件（以.vue扩展名结尾）。这会将Vue CLI安装到您的计算机上，并使您可以在命令行中使用。
VS code运行vue项目
各类程序设计成品、文档、学习资料
10-25 2万+
请注意，以上步骤假设您的Vue项目已经配置好了相应的构建脚本（如package.json中的"scripts"字段）。命令时出现"无法将'npm'项识别为cmdlet、函数、脚本文件或可运行程序的名称"的错误消息，这可能是因为您的计算机上没有正确安装Node.js和npm，或者系统环境变量配置不正确。2.在VS Code的侧边栏中，选择您的Vue项目文件夹，或者使用菜单中的“文件”->“打开文件夹”选项来打开项目文件夹。3.打开终端（菜单中的“视图”->“终端”），确保终端位于您的Vue项目文件夹下。
巧用 VSCode 开启 Vue 开发之旅
最新发布
Smell_of_earth的博客
03-20 1289
Vue以简洁高效受前端开发者喜爱，VS Code功能强大。借助VS Code开发Vue，从环境搭建到项目创建、运行，能极大提升开发效率，开启高效开发之旅。
vs启动vue项目
m0_37108602的博客
07-28 5216
1.安装node.js 2.安装vs启动vue项目插件 3.搭建环境并创建vue项目
简单上手入门级创建vue项目，vscode打开vue项目，vue使用element-ui组件
weixin_48128217的博客
03-25 2888
如果运行有报错则将 packeage.json下的 "@vue/cli-plugin-eslint": "~5.0.0",删除。等待完成后再次进入创建好的文件vue01，输入npm run serve开始运行。然后cd到vue01目录下npm run serve运行。然后打开 http://localhost:8080/在D盘创建文件vs，在vs下创建vuedemo。输入以上命令进入到vuedemo创建vue01。点击文件，选择打开文件夹，打开刚刚创建的项目。快捷键ctrl+c终止批处理操作。
Visual Studio执行vue项目
snumous的博客
05-12 4239
运行命令yarn serve启动项目。-g 是全局安装的意思。，表示状态是禁止的;
使用vs code搭建vue项目1
09-04
使用 VS Code 搭建 Vue 项目 VS Code 是一款功能强大且灵活的代码编辑器，它提供了丰富的扩展插件和功能，可以满足各种开发需求。Vue 是一款流行的前端框架，使用它可以快速构建复杂的 Web 应用程序。本文将指导...
VS Code创建VUE项目（一）工具安装与项目创建
shuang的博客
10-14 3669
安装Node.js或下载后一步步安装就好（安装过程基本一路直接“”就可以了，直到Finished），我之前已经安装了，详细步骤大家可以百度npm安装或Node.js安装（Node.js会自动安装npm。
VS Code上搭建Vue项目
weixin_73060959的博客
08-08 525
通过以上步骤，你就可以在VS Code上成功搭建并运行一个Vue项目了。记得根据项目需求，不断学习和探索Vue及其生态系统的更多功能和最佳实践。
VS code上创建Vue项目详细化教程1-配置VScode与Vue
Charles_Clark的博客
06-06 5369
VS code上创建Vue项目详细化教程1-配置VScode与Vue
VSCode打开已有vuejs项目
热门推荐
Yoryky的专栏
10-19 5万+
今天公司培训使用VSCode来编写vuejs项目，拿了一个范例来展示，讲的比较快，没怎么听清楚。于是下来自己动手配置一下。下载安装并配置VSCode随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。1、vetur插件的安装该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选
VS Code下VUE项目启动
songshuguowang的专栏
01-28 2037
首先VUE的插件要安装的 ESLint、Vetur、vue 2 Snippets、 vueVSCodeSnippets等等 然后问 文件-》打开文件夹，选择你的项目目录 Ctrl+shift+Y调出控制台 在终端标签页，输入npm run dev，项目就启动啦。。。 ...
从安装node js到构建一个vue并启动它
weixin_30426065的博客
06-21 359
1、安装node js 　　下载地址：http://nodejs.cn/download/2、安装完成后运行Node.js command prompt（node -v查看安装版本） 　　3、安装npm（由于现在版本的nodejs已经集成npm所以无需安装，可以用npm -v 查看版本） 　　4、注册cnpm来代替npm 　　使用命令：npm install cnpm -g --reg...
使用Visual Studio Code 导入并运行vue项目
songjlei的博客
08-17 1万+
打开VSCode, 快键键Ctrl+Shift+P ,搜索 Configure Display Language，选择安装其他语言，安装完成选择zh-cn，重启就变成中文了。4.我们再打开我的电脑(右键)->属性->高级->环境配置->添加自己的npm安装路径 ，就是以上第3步获取的路径，一路确定即可。打开控制台（Ctrl+shift+Y）,选择终端，在控制台终端输入npm install添加包依赖 ，可能会出现报错，如下。三、vue插件的安装（方便开发）（Ctrl+shift+X）若有问题，欢迎指正！
在VS Code上搭建Vue项目教程（Vue-cli 脚手架）
明静致远
07-12 1万+
搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备就像Java开发要依赖JDK环境一样。
使用vs code启用vue项目
weixin_44262390的博客
04-20 6074
一 环境 git.exe node.js 注意检查环境变量配置。 检查方式：cmd VS Code开发软件 二 用git clone项目 打开vs code， Ctril+~快捷键打开命令窗口， 打开到要下载项目的位置，例如： 输入命令git clone 项目git地址下载项目。 下载完成后， ...
vscode运行vue项目
代上老码的专栏
04-08 7108
通过以上步骤，你应该能够在VSCode中成功运行和开发Vue项目。记得利用VSCode的扩展市场来安装一些有用的扩展，比如Vetur或Volar，它们可以提供语法高亮、代码片段、格式化和Linting等功能，以提高你的开发效率。： 在VSCode中，打开项目根目录后，你会看到一个提示，要求你安装项目依赖。： 使用VSCode打开你的Vue项目。你可以通过VSCode的“文件”菜单选择“打开文件夹...”，然后导航到你的Vue项目目录。默认情况下，你的Vue应用将在。，你应该能够看到你的Vue项目正在运行。
VSCode导入Vue项目入门部署与启动
m0_54230514的博客
03-04 1万+
PS：没有node.js的需要下载，官网提供的版本过高，下载安装后容易出现一些问题导致不能运行，建议下载与项目适配的版本，node.js历史版本可参考以下博客。后者需要将npm下载镜像，使用淘宝镜像- 命令就改为了cnpm，会加快项目的启动速度。@后的数字可以更改为想要的版本 若不加上@6 就默认下载最新版本的镜像cnpm。设置全局模块的安装路径到 “node_global” 文件夹，配置npm的全局模块的存放路径 以及 cache缓存的路径。与idea导入项目一致，选择前端项目的文件夹进行导入。
vs建的vue项目能用vs code打开吗
02-15
是的，你可以使用 Visual Studio Code 打开用 Visual Studio 建立的 Vue 项目。 Visual Studio Code 是一款功能强大的跨平台文本编辑器，它可以打开各种类型的项目，包括 Vue 项目。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值