VSCode如何搭建Vue项目？详细步骤

2024-05-06 20:30:14

使用项目构建工具vue-cli搭建一个全新的Vue项目。

如何搭建？

1、下载node.js

官网下载地址：

Node.js

选择对应版本下载即可。

安装成功后运行命令node-v：

2、安装npm

由于NPM的仓库资源在国外，传输速度慢。所以使用淘宝镜像源npm。

win+R快捷键cmd进行终端。

运行以下命令进行安装：

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

查看是否安装成功

#检验是否成功
npm config get registry

如下为安装成功

3、全局安装webpack

运行命令：

npm install -g webpack

安装成功后运行命令：webpack -v

4、开始搭建vue项目

安装完成后，创建文件夹vue001。

先进入终端，然后进入你想要把文件vue001放在的地址（即路径）。

创建项目：

vue init webpack vue001

蓝线是文件vue001将存在的地方，红线是创建项目命令，紫色为文件夹vue001名字。

然后出现一些配置项，可自行配置可默认，直接回车即可。

vue项目就搭建完成了。

项目初始化完成之后按照命令行提示：

cd vue001

npm run dev

上面两个命令执行后出现一个地址

复制该地址在浏览器打开效果：

看到这个界面说明项目搭建成功并且启动成功，然后就可以开始书写代码了。

在VSCode上File>Open Folder选择对应文件夹进行打开就能看到目录，其中main.js是入口。

总结：4步操作完成项目搭建，下一篇详写vue目录结构用法。

vsCode如何搭建Vue项目？

VSCode如何搭建Vue项目？详细步骤相关推荐

使用veu-cli3/4搭建vue项目详细配置
文章目录使用vue-cli4 搭建vue项目一.安装vue-cli4 二.创建一个vue项目三.预设选项四.启动项目五.可视化UI 使用vue-cli4 搭建vue项目一.安装vue-cl ...
vue-cli创建vue项目详细步骤
一.安装node环境(建议使用LTS) Download | Node.js 二.下载vue和vue-cli脚手架命令:npm i -g vue ; npm i -g @vue/cli 三.在想要创 ...
VSCode搭建Vue项目及服务器部署
一.安装nodeJs 在我之前的博客<idea搭建vue-cli项目>里有详细安装教程,这里进入! 二.在VSCode搭建Vue项目 1.安装全局脚手架 npm i -g @vue/cli ...
MacOS 搭建一个vue项目(完整步骤)
搭建一个Vue项目一.安装node环境二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目三.vu ...
搭建 vue项目（Windows + 命令行 + vsCode）
1.win键 + R ,输入CMD打开命令行. 2.输入node -v 查看node.js是否安装,如果输出版本号,则进行下一步,否则安装node.js. 下载地址:https://nodejs.or ...
Vue项目打包步骤详细流程，新手必需掌握的知识点！
Vue项目打包步骤 Vue项目打包流程介绍生成打包报告修改默认配置指定打包入口通过external加载外部CDN资源优化组件库的打包首页内容定制路由懒加载 Vue项目打包流程介绍新手必 ...
搭建一个Vue项目(完整步骤)
一.安装Node环境具体请参考:http://www.dinganan.cn/nodej安装和配置/ 二.搭建vue项目环境 1.全局安装vue-cli npm install --global v ...
搭建vue项目环境以及创建一个简单的vue的demo
一.vue-cli脚手架的搭建步骤 1.首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,则需要安装node.js 这个很简单默认点击安装 ...
Vue-CLI + Webpack 搭建 Vue 项目最全分析
一.vue-cli介绍 vue-cli是一个用于快速搭建vue项目的脚手架. 二.vue-cli安装.更新安装过nodeJs .cnpm 后,全局安装vue-cli(以后其他项目可直接使用): c ...
Win10 + VSCode踩坑 + vue项目开发：设置vscode终端为管理员权限
win10系统如何设置vscode的终端为管理员权限? 一次一次的授权太麻烦! 这里直接更改授权为管理员运行即可. 操作与设置步骤: "桌面找到"VSCode"程序图标 ...

最新文章

热门文章