Visual Studio Code 中创建并运行vue项目

最新推荐文章于 2024-07-12 16:09:07 发布
最新推荐文章于 2024-07-12 16:09:07 发布
阅读量4.6k 收藏 40
点赞数 12
分类专栏： vue 文章标签： vue visual studio code 安装 创建项目 运行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27081015/article/details/117296421
版权
本文介绍了如何配置Vue开发环境，包括安装Node.js、设置VisualStudioCode、解决执行权限问题、安装Vue脚手架vue-cli，以及创建和启动Vue项目。在过程中可能遇到环境变量配置问题，解决后通过npm命令安装依赖并启动项目。
摘要由CSDN通过智能技术生成

安装前先配置vue的原型环境node.js
下载安装就可以了 ，默认安装就没问题，会自动配置好环境变量
安装vue的脚手架，vue-cli

1.安装Visual Studio Code 软件
2.可以社会语言为中文
在这里插入图片描述3.安装完成之后 电脑重新建一个文件夹存放vue项目
4. 在这里插入图片描述在这里插入图片描述
按住啊 ctrl+shift+~ 启动命令行工具

  1. 在命令行中输入vue init webpack test
    输入命令行之后可能会出现一个问题，无法加“vue”项识别为cmdlet、函数、脚本或可运行程序的名称
    在这里插入图片描述
    需要打开
    在这里插入图片描述
    输入命令查看get-ExecutionPolicy，显示Restricted（表示状态是禁止的），则执行命令set-ExecutionPolicy RemoteSigned最后输入命令查看get-ExecutionPolicy，显示RemoteSigned表示可以用了

还有一种可能就是环境变量配置有问题
6. 重启软件继续执行 vue init webpack test
在这里插入图片描述
一路回车就好表示创建成功
7. 创建成功之后 cd到项目路径下执行npm install
8. 然后执行npm run dev 启动项目
9. 在这里插入图片描述
在这里插入图片描述

项目启动成功

砥砺-前行
关注
  • 12
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
使用Visual Studio Code工具创建Vue项目并运行
喷他Q
07-05 9005
目录 1.下载并安装Visual Studio Code 2.Visual Studio Code设置中文界面 3.创建项目 4.运行项目 1.下载并安装Visual Studio Code 2.Visual Studio Code设置中文界面 1.打开Visual Studio Code，点击左侧扩展（Ctrl+Shift+X）文本框中输入“Language Packs”，选择需要的语言点击Install，如图所示 2.安装完成后，重启Visual Studio Code 3..
使用Visual Studio Code编写第一个Vue
柳老师的博客
07-04 3043
在components文件夹下创建:child.vue文件,代码由两部分组成,js和template(也就是html代码)3) index.html 引用main.js,利用其将vue组件加载到页面.在你准备放置项目的地方创建一个文件夹,例如:D:\VSCodeProject。js是由vue框架书写,负责数据和逻辑,template负责内容的呈现.src/App.vue :父组件,引用了HelloWorld.vue。2) src/main.js 将组件加载到页面的一个对象.cd
VS code运行vue项目
各类程序设计成品、文档、学习资料
10-25 2万+
请注意，以上步骤假设您的Vue项目已经配置好了相应的构建脚本（如package.json中的"scripts"字段）。命令时出现"无法将'npm'项识别为cmdlet、函数、脚本文件或可运行程序的名称"的错误消息，这可能是因为您的计算机上没有正确安装Node.js和npm，或者系统环境变量配置不正确。2.在VS Code的侧边栏中，选择您的Vue项目文件夹，或者使用菜单中的“文件”->“打开文件夹”选项来打开项目文件夹。3.打开终端（菜单中的“视图”->“终端”），确保终端位于您的Vue项目文件夹下。
在VS Code上搭建Vue项目教程（Vue-cli 脚手架）
最新发布
明静致远
07-12 3792
搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备就像Java开发要依赖JDK环境一样。
使用Visual Studio Code 导入并运行vue项目
songjlei的博客
08-17 9672
打开VSCode, 快键键Ctrl+Shift+P ,搜索 Configure Display Language，选择安装其他语言，安装完成选择zh-cn，重启就变成中文了。4.我们再打开我的电脑(右键)->属性->高级->环境配置->添加自己的npm安装路径 ，就是以上第3步获取的路径，一路确定即可。打开控制台（Ctrl+shift+Y）,选择终端，在控制台终端输入npm install添加包依赖 ，可能会出现报错，如下。三、vue插件的安装（方便开发）（Ctrl+shift+X）若有问题，欢迎指正！
vscode运行vue项目
代上老码的专栏
04-08 5085
通过以上步骤，你应该能够在VSCode中成功运行和开发Vue项目。记得利用VSCode的扩展市场来安装一些有用的扩展，比如Vetur或Volar，它们可以提供语法高亮、代码片段、格式化和Linting等功能，以提高你的开发效率。： 在VSCode中，打开项目根目录后，你会看到一个提示，要求你安装项目依赖。： 使用VSCode打开你的Vue项目。你可以通过VSCode的“文件”菜单选择“打开文件夹...”，然后导航到你的Vue项目目录。默认情况下，你的Vue应用将在。，你应该能够看到你的Vue项目正在运行。
【Visual studio Code】运行Vue项目 nodejs
少莫千华
04-22 5078
确认Visual Studio Code 版本 第一步、选则项目主文件夹 选则资源管理器（Explorer），选中项目主文件夹 第二步、打开终端 使用以下组合键终端 Ctrl + ~ 第三步、输入运行指令 输入下列运行指令进行编译、运行。 npm run dev 第四步、打开网址 浏览器打开 http://localhost:9528 ...
前端开发部署：Visual Studio Code + vue
xingshanchang的博客
06-10 1583
本教程全部采用默认安装路径，因为在进行自定义路径安装的时候，需要配置各种环境变量，在这个配置过程中，可能出现各种很混乱的问题。 ==C:\Program Files\nodejs== 这里不勾选，后续需要什么tools的时候，再进行安装即可。 Win + R 打开 CMD 输入版本查看命令，查看安装是否成功 2 输入下面指令查看路径 webpack用来项目构建、打包、资源整合等。 注意这里安装新的脚手架。 出现warn没关系，继续执行即可。 查看vue版本及是否成功： 四 基于上述vue创
Vue无法加载文件,cmd报错的解决方案.并如何在Visual Studio Code中创建Vue项目
DDDDHai的博客
12-14 408
Vue项目创建及一些问题
浅析Visual Studio Code断点调试Vue
08-27
通过配置Visual Studio Code和Chrome，可以实现直接在VS Code中断点调试代码，并在VS Code的调试窗口看到Chrome中console相同的值。 一、设置Chrome远程调试端口 要使用Visual Studio Code断点调试Vue，首先需要在...
Vue基础阶段入门：使用Visual Studio Code新建项目-基本框架
gin_xin的博客
08-04 636
使用Visual Studio Code新建项目
Visual Studio执行vue项目
snumous的博客
05-12 3827
运行命令yarn serve启动项目。-g 是全局安装的意思。，表示状态是禁止的;
Vue.js 在Visual Studio Code中启动
ai_bi的博客
03-01 3487
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。 从Vi...
简单上手入门级创建vue项目，vscode打开vue项目，vue使用element-ui组件
weixin_48128217的博客
03-25 2079
如果运行有报错则将 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终止批处理操作。
VS Code上搭建Vue开发环境
interest_ing_的博客
07-13 1万+
介绍：VS Code上搭建Vue开发环境——超简单你女朋友都可以看得懂的教程，Vue是指一个用于创建用户界面的渐进式框架，旨在更好地组织与简化Web开发；vue也可指iOS和Android平台上的一款视频拍摄和美化工具app，是一个手机端的视频拍摄及编辑工具以及原创Vlog短视频平台，允许用户通过简单的操作实现Vlog的拍摄、剪辑、细调、和发布，记录与分享生活。注：这里可能遇到问题，PowerShell用于控制加载配置文件和运行脚本的条件，为了防止恶意脚本的执行，可能遇到无法运行脚本的问题；
在 Visual Studio Code 中使用 Vue
大强博客
10-28 2万+
Vue.js是一个流行的 JavaScript 库，用于构建 Web 应用程序用户界面，Visual Studio Code 内置了对HTML、CSS和JavaScript的 Vue.js 构建块的支持。对于更丰富的 Vue.js 开发环境，您可以安装支持 Vue.js IntelliSense、代码片段、格式等的Vetur扩展。 欢迎使用 Vue# 我们将在本教程中使用Vue CLI。如果您是 Vue.js 框架的新手，您可以在vuejs.org网站上找到很棒的文档和教程。 要安装和使用 Vu.
使用vscode运行vue项目
热门推荐
洋葱专栏-有灵魂的程序员
02-01 2万+
！！学习完vue环境搭建并创建项目后下面我们介绍使用vscode运行vue项目。！！文章参考：https://www.csdn.net/gather_29/OtTagg3sNzA2LWJsb2cO0O0O.html&https://www.jianshu.com/p/80ae9b1b8fae 【如果你和我一样是菜鸟的话，点进来的时候不要被文章长度吓到了，因为我写的特别详细所以看起来篇幅比较长，加上截图比较庞大。我怀疑之前由于截图较小 博客没自动给我加水印，导致文章发不出去，咱就是怀疑，咱也...
vs建的vue项目能用vs code打开吗
weixin_42590539的博客
02-14 155
是的，你可以使用 Visual Studio Code 打开用 Visual Studio 建立的 Vue 项目。 Visual Studio Code 是一款功能强大的跨平台文本编辑器，它可以打开各种类型的项目，包括 Vue 项目。 ...
在 visual studio code 运行vue项目
08-29
要在Visual Studio Code中运行Vue项目，可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Node.js和Vue的脚手架工具vue-cli。Node.js是Vue项目的运行环境，而vue-cli是用于创建和管理Vue项目的命令行工具。 2. 打开Visual Studio Code，并打开存放项目的文件夹。在左侧的导航栏中，选择“文件”>“打开文件夹”，然后选择你的项目文件夹。 3. 在Visual Studio Code中打开终端。选择“视图”>“终端”，或使用快捷键Ctrl+`（反引号）打开终端。 4. 在终端中执行以下命令来安装项目的依赖项：npm install。这将根据项目中的package.json文件自动安装所需的依赖项。 5. 安装完成后，在终端中执行以下命令来运行Vue项目：npm run serve。这将启动一个开发服务器，并在浏览器中打开项目的默认网址。 6. 现在，你可以在Visual Studio Code中进行开发和调试Vue项目了。你可以在代码中编辑、保存文件，并在浏览器中实时查看更改的效果。 总结起来，要在Visual Studio Code中运行Vue项目，你需要先安装Node.js和Vue的脚手架工具vue-cli，然后在Visual Studio Code中打开项目文件夹，安装项目依赖项并运行项目。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [浅析Visual Studio Code断点调试Vue](https://download.csdn.net/download/weixin_38632916/12763097)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Visual Studio Code 中创建并运行vue项目](https://blog.csdn.net/qq_27081015/article/details/117296421)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Visual Studio Code 创建vue项目](https://blog.csdn.net/qq_34410726/article/details/125707001)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值