VSCode搭建vue项目

已于 2023-10-24 13:47:49 修改
阅读量346 收藏
点赞数 6
分类专栏： vscode 文章标签： 1024程序员节 vscode vue
于 2023-10-24 13:46:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44434232/article/details/134005963
版权
本文详细介绍了如何在已经安装Node.js和cnpm的基础上，通过vue-cli搭建Vue3项目，包括安装vue-cli、创建新项目以及启动项目的步骤。
摘要由CSDN通过智能技术生成

1. vue的安装

1. 1 安装node.js——已安装

到 node官网下载并安装node.js（默认安装）
查看node.js是否安装成功，打开cmd，输入node -v和npm -v，如果显示版本信息则安装成功。
在这里插入图片描述

1. 2 配置cnpm镜像——已安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

通过执行npm config get registry 命令查看淘宝镜像是否安装成功
在这里插入图片描述

1. 3 安装vue-cli脚手架构建工具——已安装

cnpm install -g @vue/cli

通过执行vue -V命令查看vue-cli脚手架是否安装成功，出现版本号即为成功
在这里插入图片描述

2. 搭建vue项目

2. 1 使用vue-cli脚手架构建工具构建项目

执行vue create demo_aaa命令创建项目，demo_aaa是项目名，选择Vue3
在这里插入图片描述
在这里插入图片描述

3. 启动项目

进入新建项目cd demo_aaa，执行npm run serve命令执行项目，出现以下画面即为运行成功
在这里插入图片描述
运行成功

翎刖
关注
专栏目录
vscode搭建vue项目
g_101912的博客
12-16 481
在窗口分别敲入node -v，npm -v，查看安装的版本，代表安装成功。在菜单里面找到终端-新建终端，在打开的终端里面输入 npm install -g vue-cli，回车，等待安装。等上面转圈安装完之后，查看自己定义的安装路径看，我的在d:/vueDemo, 如下图，vue-demo项目ok了。根据提示开始输入信息，具体参考下图，基本搭建参考下图选择，具体含义详见百度。最后，打开终端，找到对应项目目录，输入npm run dev。1. 先下载vscode,开源的，可以自己去官网下载；
Vue在VSCode中的安装
qq_42572858的博客
06-03 1732
打开VSCode，点击File -> Open Folder 点击新建文件夹 修改文件夹名，例如vue5，作为工程名。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210603105100511.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTcyODU4,size_16,c.
Visual Studio Code搭建VUE开发环境
最新发布
Nicky's blog
08-07 3568
Vue.js 是一款易学易用，性能出色，适用场景丰富的 Web 前端框架。它基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档
使用vscode快速搭建Vue项目步骤
m0_68218656的博客
01-15 1万+
①Win+R指令，打开命令框输入cmd②检查nvm是否安装成功(安装成功会显示对应的版本）nvm -v。
VSCode 创建Vue项目完整过程
aystl_gss的博客
05-13 816
注：node.js安装完后会同步安装npm,一般不需要再下一次npm。按自己需求可以创建Vue2或Vue3，自行选择即可 ，安装需等待一会。在浏览器运行该地址后出现如下页面即为成功。1. 安装 [Node.js](2. 安装 [npm](cd 到项目名下运行。
在VS Code上搭建Vue项目教程（Vue-cli 脚手架）
明静致远
07-12 7817
搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备就像Java开发要依赖JDK环境一样。
VSCode搭建Vue项目的方法
10-15
VSCode搭建Vue项目的知识点: 一、基础知识准备 1. VSCode介绍 VSCode全称Visual Studio Code，是微软推出的一款轻量级且功能强大的代码编辑器。它支持多种编程语言的语法高亮、智能代码补全、自定义热键、Git控制...
VSCode搭建Vue Element Admin的项目环境
04-11
### VSCode搭建Vue Element Admin的项目环境 #### 版本说明 - **Node**: v18.20.2 - **NPM**: 10.5.0 - **Git**: 2.19.1 - **Vue Element Admin**: [官网链接]...
使用vscode搭建vue项目并引用element-ui
lifeisaclimb的专栏
04-20 1万+
1.环境准备 Visual studio code，nodejs，vue-cli，yarn 2.新建项目 1)打开Visual studio code,打开一个你想要创建项目的文件夹 2）打开集成终端如下图所示或者使用快捷键 3）在终端中输入如下命令新建项目 vue init webpack projectName projectName为你想要取的项目名称，需要注意的是项目的名称不...
vscode 中搭建Vue.js
weixin_30652879的博客
05-20 271
一. 首先安装node环境，并配置： 地址：https://nodejs.org/en/ 安装完成后执行：node --version 在这里我安装的是：12.2.0版本 二、安装Git 直接到以下地址https://git-scm.com/download/win下载安装Git，安装完成后找到bin路径，将路径添加单PATH中， 保存返回，CMD中运行...
VSCode搭建Vue项目
小草的博客
04-15 1062
1.假设Vscode、nodejs等已经安装好了。 2.全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目。 安装命令：npm install -g vue-cli 3.安装webpack，它是打包js的工具 安装命令： npm install -g webpack 4.安装完成之后就可以开始创建vue项目，首先创建一个文件夹用来存放你的项目，用vscode打开...
VScode中vue的安装及项目的搭建
热门推荐
ShootingStar_1998的博客
11-29 2万+
VScode中vue的安装及项目的搭建一、vue的安装1. 1 安装node.js1.2 配置淘宝cnpm镜像1.3 安装vue-cli脚手架构建工具二、VScode中搭建vue项目2.1 VScode安装插件2.2 使用vue-cli脚手架构建工具构建项目三、启动vue-element-admin工程 一、vue的安装 1. 1 安装node.js 从node.js官网下载并安装node.js...
VScode安装启动vue项目简易步骤
小火的博客
09-29 322
安装VScode; 安装node.js; 进入VScode,调出终端，输入git clone 代码仓库地址； 在终端中更换npm淘宝源： npm config set registry https://registry.npm.taobao.org 验证源更改是否成功 npm config get registry 更新依赖， npm install 启动项目 npm run test ...
VSCode导入Vue项目入门部署与启动
m0_54230514的博客
03-04 8630
PS：没有node.js的需要下载，官网提供的版本过高，下载安装后容易出现一些问题导致不能运行，建议下载与项目适配的版本，node.js历史版本可参考以下博客。后者需要将npm下载镜像，使用淘宝镜像- 命令就改为了cnpm，会加快项目的启动速度。@后的数字可以更改为想要的版本 若不加上@6 就默认下载最新版本的镜像cnpm。设置全局模块的安装路径到 “node_global” 文件夹，配置npm的全局模块的存放路径 以及 cache缓存的路径。与idea导入项目一致，选择前端项目的文件夹进行导入。
vsCode搭建vue环境,（亲身经历，真实可靠）
qq_65255086的博客
02-02 804
6.我建议切换到D盘，尽量不要装在C盘，因为vue的文件比较大，如果要改盘的话，直接输入D：回车就可以直接改盘。然后我们开始创建新的项目输入命令：vue init webpack my-vue 回车，my-vue是我自己的文件夹的名字，（建议项目名称不要大写不然会报错，听别人说的我没试过哈），输入之后就一直回车，直到出现‘’是否要安装vue-router‘’，这个我们在项目要用到，所以就输入y 回车就好。5.输入Vue - V,显示版本号表示安装成功。4.安装完后输入Vue，显示信息即可。
vscode之vue-cli安装和vue项目搭建
YuanBug的博客
03-01 5648
1.确认已安装好node，中文官网如下，未安装可按需下载。下载好之后，打开文 件直接一直下一步，根据需要更改安装位置即可： http://nodejs.cn/download/ 2.node安装好后，默认带有npm，查看安装是否成功 ①win+R 打开命令窗口 ②输入node -v查看版本 ③输入npm -v查看版本 3.vscode中安装vue-cli ①打开vscod...
vscode安装vue3环境
小白的笔记
01-07 1158
vscode安装vue3环境
vscode下搭建vue项目
小猪家的胖企鹅的博客
09-10 2736
最近开始学习前端知识，就先从vue开始入手吧，既然要学习，那么环境的搭建是不可缺少的步骤，下面就介绍一下，windows下是如何搭建vue项目的吧！ 1.第一步：安装node.js，官网自行百度下载即可，查看node.js是否安装成功，进入cmd命令行输入node -v显示出版本号，就表示安装成功，如下图所示。 2.第二步：安装vue，进入命令行输入vue list，如果没有出现以下信息，则表......
如何用vscode搭建vue项目
05-21
搭建 Vue 项目的步骤如下： 1. 安装 Node.js 和 npm。 2. 全局安装 Vue CLI：`npm install -g @vue/cli`。 3. 在终端中进入项目所在文件夹，使用 Vue CLI 创建项目：`vue create project-name`。 4. 根据提示选择需要的配置，可以选择手动配置或者默认配置。 5. 创建完成后，在终端中进入项目目录：`cd project-name`。 6. 启动开发服务器：`npm run serve`。 7. 在浏览器中打开 `http://localhost:8080` 即可查看项目。 在 VS Code 中打开项目，可以使用 Vue 插件进行开发，例如： 1. Vue.js Extension Pack：包含了多个 Vue 相关插件，如 Syntax Highlighting、Linting、Debugger 等。 2. Vetur：Vue 开发必备插件，提供了语法高亮、错误提示、代码格式化、自动补全等功能。 3. ESLint：代码风格检查工具，可以帮助团队统一代码规范。 4. Prettier：代码格式化工具，可以自动格式化代码，让代码风格更加整齐。 以上插件都可以在 VS Code 的插件市场中搜索并安装。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值