VSCode中运行vue代码及启动vue项目的图文教程

CSDN 2024-10-19 20:21:03编程技术
151

Visual Studio Code (VSCode) 是许多前端开发者的首选编辑器,因其强大的扩展性和对现代前端框架的良好支持而备受青睐。Vue.js作为一个流行的前端框架,广泛应用于构建单页面应用和复杂的用户界面。本文将通过图文教程的形式,详细介绍如何在VSCode中运行Vue代码以及启动Vue项目,帮助开发者快速上手Vue开发。

要在VS Code中启动Vue项目,您可以按照以下步骤进行操作:

正常情况

打开界面后,创建一个vue文件夹

VSCode中运行vue代码及启动vue项目的图文教程

打开终端,输入npm install vue命令,下载代码

VSCode中运行vue代码及启动vue项目的图文教程

等待文件下载完成后,找到dist文件夹,双击其中的vue.js 文件运行即可

VSCode中运行vue代码及启动vue项目的图文教程

新手如何用vsCode运行vue项目

安装Node.js

下载地址:https://nodejs.org/en/,安装过程一路next就行

检查安装是否成功:

(1)node -v,出现版本号

VSCode中运行vue代码及启动vue项目的图文教程

(2)node -e “console.log(‘Hello world!’)”

VSCode中运行vue代码及启动vue项目的图文教程

说明安装成功了。

打开vsCode左侧栏的扩展,搜索并安装 Vetur

VSCode中运行vue代码及启动vue项目的图文教程

英文不熟练的小伙伴可以在拓展商店搜索chinese安装中文插件

VSCode中运行vue代码及启动vue项目的图文教程

左上角打开要运行的项目所在文件夹 在vsCode按住ctrl+`呼出终端,输入 npm install 回车(正常运行直接跳到文章结尾)

VSCode中运行vue代码及启动vue项目的图文教程

如果结果出现无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称...

这说明没有设置环境变量,这时候应该:

(1)在“我的电脑”右键打开“属性”——>高级系统设置——>环境变量

(2)在用户变量点击“新建”,变量名输入NODE_PATH,变量值输入你node.js安装的路径

VSCode中运行vue代码及启动vue项目的图文教程

VSCode中运行vue代码及启动vue项目的图文教程

 

(3)修改系统变量中的Path,添加 %NODE_PATH%

VSCode中运行vue代码及启动vue项目的图文教程

(4)在node.js的安装路径下创建文件夹“node_global”及“node_cache

VSCode中运行vue代码及启动vue项目的图文教程

(5)在终端运行

npm config set prefix “D:\software\nodeJs\node_global”

npm config set cache “D:\software\nodeJs\node_cache”

npm config set registry=http://registry.npm.taobao.org

VSCode中运行vue代码及启动vue项目的图文教程

(6)设置vsCode为管理员身份运行

VSCode中运行vue代码及启动vue项目的图文教程

(7)用管理员方式运行 powershell

执行:get-ExecutionPolicy

执行:set-ExecutionPolicy RemoteSigned

输入Y回车

VSCode中运行vue代码及启动vue项目的图文教程

VSCode中运行vue代码及启动vue项目的图文教程

在vsCode终端重新输入npm install,可以看到成功了

VSCode中运行vue代码及启动vue项目的图文教程

继续输入npm run dev运行项目

成功运行的话,恭喜你到这里结束了!http://localhost:8080就可以打开项目了~

VSCode中运行vue代码及启动vue项目的图文教程

总结

通过本文的图文教程,我们详细介绍了在VSCode中运行Vue代码及启动Vue项目的各个步骤。从环境配置到项目创建,再到代码编辑和运行调试,本文涵盖了所有关键环节。掌握这些技巧后,开发者可以在VSCode中高效地进行Vue开发,充分利用VSCode的强大功能和便捷操作。希望本文的内容能为初学Vue或希望提升Vue开发效率的读者提供有价值的指导。

vscode vue
THE END
ZhanShen
把烦恼扔进夕阳里,和星星一起沉沦。

相关推荐

Vue中异步函数async和await的使用方法详解
为了简化异步代码的编写和维护,JavaScript引入了async和await关键字,它们使得异步操作看起来更像是同步操作,从而提高了代码的可读性和可维护性。本文将深入探讨Vue中异步函...
2024-11-19 编程技术
112

Vue3插槽(slot)的使用方法全解
Vue3作为一款渐进式JavaScript框架,以其简洁、灵活和高效的特点赢得了广大开发者的青睐。插槽(slot)是Vue3中一个非常实用的特性,它允许我们在组件中定义可替换的内容区域,...
2024-11-19 编程技术
119

vue3使用videojs播放m3u8格式视频的方法详解
在现代Web开发中,视频播放已经成为不可或缺的一部分。随着Vue 3的发布,开发者们对新特性的探索和应用也在不断深入。Videojs作为一款流行的开源视频播放器,因其丰富的功能和...
2024-11-14 编程技术
141

在Vue3中正确引入和使用ElementPlus组件库的示例代码
随着Vue 3的发布,开发者们对新特性的探索和应用也在不断深入。ElementPlus作为一款基于Vue 3的UI组件库,因其丰富的组件和易用性,受到了广大开发者的青睐。本文将详细介绍如...
2024-11-14 编程技术
114

深入解析Vue移动端项目中Vant组件库的Tag组件
Vant是专为Vue移动端项目打造的轻量级组件库,提供了丰富且易于使用的UI组件。在移动应用开发中,标签(Tag)组件常用于标记、分类和过滤等场景。本文将深入解析Vant组件库中的...
2024-11-05 编程技术
126

ElementUI:饿了么前端团队开源的一套基于 Vue.js 的桌面端组件库
ElementUI 是饿了么前端团队开发的一套基于 Vue.js 的桌面端组件库。其提供了一系列经过精心设计和测试的 UI 组件,涵盖了从基本的输入框、按钮到复杂的表格、导航菜单等各个...
2024-11-01 编程技术
173