开始通过vsCode构建第一个vue项目！

最新推荐文章于 2025-06-20 19:59:00 发布
原创 最新推荐文章于 2025-06-20 19:59:00 发布 · 1.4k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这篇博客详细介绍了如何从零开始通过VSCode构建Vue项目。首先，参照Vue官网进行安装，然后安装vue-cli。在VSCode中，无需额外配置，通过vue init webpack命令初始化项目，并解释了各项配置选项的含义。最后，通过npm run dev启动项目，并解决了可能出现的启动问题和端口占用问题。

第一步请参照vue官方网站，https://cn.vuejs.org/v2/guide/installation.html

vue官网上的介绍、安装和使用教程相当的详细，对于初步接触vue的新人格外友善，值得认真查看！

第二步进行安装vue-cli，一样请参照大神的网站进行搭建：https://blog.youkuaiyun.com/wulala_hei/article/details/85000530

第三步：开始使用VsCode搭建第一个vue项目

（1）因为在第二步中已经搭建好了vue所需要的环境，所以暂且不需要在vsCode中进行额外配置，所以直接开始上手！

（2）通过快捷键 Ctrl+~打开中断，输入命令行 vue init webpack yourProjectName ,其中yourProjectName为自定义项目名称

 

现在贴上第二步中表述的关于各个选项的意思

  • Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写<
最低0.47元/天 解锁文章

新学期VIP享超值加赠
VS Code创建VUE项目（一）工具安装与项目创建
shuang的博客
10-14 3914
安装Node.js或下载后一步步安装就好（安装过程基本一路直接“”就可以了，直到Finished），我之前已经安装了，详细步骤大家可以百度npm安装或Node.js安装（Node.js会自动安装npm。
JavaWeb：VsCode创建Web项目
qq_55038440的博客
05-11 4203
其中java是放java代码的，resources是放资源文件的，lib是放jar包的。在settings.xml的mirrors标签下添加mirror标签，具体为以下代码。建好文件夹后，打开conf文件夹，打开settings.xml，这步是设置本地依赖存储仓库的。这里的包添加的是Maven打包成的war包用来发布项目，当然也可以上传文件。之前安装的服务器插件，在vscode上配置tomcat服务器。先在官网上下载tomcat，解压到自己设定的文件夹。Java的运行插件和Maven的运行插件。
vscode 开发Vue项目的方法步骤
12-09
下载地址： vscode https://marketplace.visualstudio.com/VSCode或者本地地址：https://www.jb51.net/softs/606746.html 开始安装插件 Vetur : vue的文件代码高亮 Atom One Dark Theme ： 好看的代码颜色主题 Simple icon theme ：清爽文件夹主题 Prettier – code : 代码格式化 ESLint ：代码规范检查 Debugger for Chrome ：断点调试 配置 ESLint 打开用户设置文件 // vscode默认启用
使用 VSCode 开发 Vue
最新发布
likuoelie的博客
06-20 1269
Vue 是一个流行的 JavaScript 框架，用于构建 Web 应用和用户界面。VSCode 是微软开发的一个免费、开源代码编辑器，支持多种编程语言，并提供代码高亮、智能代码补全、调试等功能。调研发现，VSCode 内置支持 Vue 的核心构建块（HTML、CSS、JavaScript），但为了获得更丰富的开发体验，需安装特定扩展，如 Volar 和 Volar for TypeScript。调研中，菜鸟教程、VSCode 官方文档和 优快云 博客提供了丰富的中文资源，适合初学者和高级开发者。
使用VSCode创建第一个vue项目
weixin_42857359的博客
09-04 1016
下载node.js点击左侧稳定版下载，右侧为最新版下载http-server。
使用VScode创建第一个Vue项目
ghgxm520的博客
02-12 2897
文章目录使用VScode创建第一个Vue项目一、确认必要环境已安装二、创建一个项目目录并使用VScode打开文件三、 安装vue-cli脚手架（如果之前装了，跳过）四、 安装webpack打包工具（如果之前装了，跳过）五、 创建VUE项目六、运行项目七、项目打包发布线上 使用VScode创建第一个Vue项目 一、确认必要环境已安装 vscode和nodejs必须安装好 vscode下载地址：https://code.visualstudio.com/Download nodejs下载地址：https:/
vscode建立第一个vue项目
03-20
### 如何在 VSCode 中创建和配置首个 Vue 项目 要在 VSCode 中创建并配置首个 Vue 项目，需按照以下方式操作： #### 准备工作 确保已安装必要的软件环境。这包括 Visual Studio Code (VSCode)[^3] 和 Node.js[^3]...
VSCode创建Vue项目完整教程
热门推荐
embelfe_segge的博客
07-31 2万+
第一次写博客，希望能给刚学vue的新手一点小小帮助。先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。httpshttps。..
uniapp - 第一集 创建uni-app项目(vscode+vue3+ts 附代码)
05-23
在本指南中，我们将探讨如何在Visual Studio Code(VSCode)开发环境中使用Vue.js框架的最新版本Vue 3和TypeScript语言创建一个uni-app项目。uni-app是一个使用Vue.js开发所有前端应用的框架，能够编译到iOS、Android...
vscode创建第一个Vue项目
m0_63845261的博客
04-21 2385
记录以下，用vscode创建的第一个vue空项目创建成功！！！ 中间遇到很多错误，原因其实就是环境变量没有配置好，导致全局安装vue-cli(脚手架)或webpack不能正常安装，进而导致不能成功创建vue项目。所以，一定要按照步骤，依次进行安装，一次创建成功。 1.安装vscode和node.js 安装完VScode后,再安装vue插件vetur和ESLint. 傻瓜式安装就行. 打开cmd,进行查看node是否安装成功,此时，npm也自动安装好了。 可以使用淘宝镜像源npm。 npm instal
vscode创建第一个vue项目
myTiLife的博客
07-15 641
总结 首先要装好vscode和node.js 打开终端执行npm install -g vue-cli 安装webpack ：npm install -g webpack 找到项目目录:vue init webpack vue_test 启动项目:npm run dev 打包:npm run build
VSCode创建第一个Vue项目
m0_52457734的博客
12-16 1182
VSCode创建第一个Vue项目
在vscode上创建你的第一个vue项目
Hhzccccc的博客
08-09 1813
vscode上创建你的第一个vue项目，vue的安装和配置以及项目创建一次说完！小白狂喜。
VS Code新建VUE项目
zhujun2008的博客
02-09 2595
1、首先打开vscode官网,下载地址：Visual Studio Code - Code Editing. Redefined 2、按住Ctrl+shift+p在vscode软件就会出现一个搜索框，搜索configure display language设置 3、如果上面没有这个选择可以在扩展中搜索Chinese language 进行安装 4、下载安装NODE.JS下载地址：Download | Node.js下载运行文件并安装。完成安装后查看版本 5、安装cnpm npm i..
Vs code搭建vue项目
重生之我不会写代码
06-21 2452
一、安装配置nodejs nodejs配置：nodejs安装教程 二、安装配置vscode 去网上下载vscode进行安装 三、安装vuecli 命令窗口或者vscode终端输入命令： npm i -g @vue/cli 或者 cnpm i -g @vue/cli 注意： 如果出现这个，根据给出的路径，把那个文件（vue.ps1）删除就行 四、创建项目 1）创建 1、先创建存放项目的文件夹，我创建的是VscodeProject 2、从这里打开创建的文件夹，或者在终端cd进去 3、创建项目命令：v
使用VScode工具搭建第一个Vue项目
weixin_42483368的博客
08-04 625
一.软件安装 1.下载vscode软件 官网下载：https://code.visualstudio.com/Download 2.安装插件 1>安装vue的vetur插件，可让vue代码部分高亮展示，找到插件的对应版本install安装即可。 2>安装vue的ESLint插件，ESLint插件提供一个插件化的JavaScript代码检测工具，找到插件对应版本后install安装即可。 3.安装node.js 官网下载：https://nodejs.org/en/dow.
VsCode创建第一个Vue项目
weixin_55712638的博客
12-14 512
vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。这个错误消息表明您的系统执行策略（Execution Policy）禁止运行脚本文件，因此无法加载 Vue CLI 的脚本文件。这通常是因为您没有正确安装Vue.js的命令行工具或者没有将其添加到系统的环境变量中。（3）要允许运行脚本文件，可以将执行策略设置为。
VScode搭建第一个Vue项目
qq_43198224的博客
09-29 290
点击终端——新终端，调出命令输出框 输入命令安装vue脚手架 npm install -g vue-cli 随后输入命令安装js打包工具 npm install -g webpack 创建新的文件夹存放项目，用VScode打开该文件夹，然后在终端cd到该目录下，输入命令创建项目 vue init webpack hello 其中hello是项目名称，可以自行修改 创建过程会出现一些配置项，可根据需要选择Y/N，也可按回车默认配置 安装完成后，执行以下命令运行项目 cd hello n..
VS Code创建第一个VUE项目
Web3 & Basketball
01-03 734
I、安装VUE及依赖 执行npm命令安装webpack npm install webpack -g 安装VUE npm install vue vue-cli -g
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值