如何使用vue脚手架（vue-cli) 搭建项目

已于 2022-06-30 15:45:12 修改
阅读量553 收藏
点赞数 1
分类专栏： vue-cli 文章标签： npm vue.js javascript 前端 node.js
于 2022-06-30 15:19:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjskmdm/article/details/125540378
版权
本文介绍了如何使用vue脚手架（vue-cli）搭建前端项目。首先，确保安装了npm和vue-cli，通过npm -version检查。然后全局安装vue-cli，如果下载慢，可以使用nrm切换镜像源。接着，创建项目文件夹并使用vue create命令创建项目，选择vue2或vue3版本。最后，通过npm run serve启动项目，项目将在8080端口运行。
摘要由CSDN通过智能技术生成

使用vue脚手架创建项目（可参考官方文档）

首先你得检查你的环境：npm、vue-cli 没有npm的需要下载node.js,下载完成后再终端命令行输入npm -version 或者npm -v查看是否安装成功，成功会显示版本号。

在这里插入图片描述
安装脚手架，在终端里输入npm install -g @vue/cli，安装完成会显示
changed 898 packages in 17s
在这里插入图片描述
安装过程中下载慢的，需要切换镜像源，使用npm下载nrm，在终端输入npm i nrm -g
在这里插入图片描述
装好后，输入nrm ls 查看全部可用镜像源
``在这里插入图片描述
测试一下速度，切换到最快的镜像源即可，*表

最低0.47元/天 解锁文章
@沈墨卿
关注
专栏目录
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
vue项目实战（一）之vue-cli脚手架搭建项目
abcwanglinyong的博客
10-17 4734
首先假如你已经安装了node和npm,如果没有的话自己百度安装一下。 如果感觉npm下载速度慢，可以使用淘宝镜像cnpm,链接地址： http://npm.taobao.org/ 安装cnpm 方式一： npm install -g cnpm --registry=https://registry.npm.taobao.org 方式二： alias cnpm="npm --...
vue-cli搭建项目过程
最新发布
2302_78078800的博客
08-25 1877
前端js框架 vue-cli的使用
vue脚手架安装报错
i_bilibili的博客
09-18 1962
安装脚手架总是报Python环境变量的一大串错误 我去安装了Python2.7,然后配置环境变量(百度就可以) 再次安装脚手架,依旧报错,但不是Python的错误了,删除下面路径中的两个文件再次安装脚手架 安装成功 ! PS D:\桌面\ooo> npm install -g @vue/cli npm notice Beginning October 4, 2021, all connections to the npm registry - including for package insta
【Vue】脚手架搭建
z914020826的博客
11-03 1961
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。
vscode搭建vue开发环境(vue入门)
JSH的博客
03-20 2万+
一.安装VScode 从官网下载，安装就行。以下操作在win+r -> cmd 命令行界面讲解， 在vscode中就是在项目空白处右键open in Integrated Terminal(在内部终端中打开)执行即可。 二.安装node.js 从nodejs官网下载。安装就行。 安装完成之后，可以在命令行中输入node -v ，如果出现相应的版本号，则说明安装成功。 npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。 其中npm
使用vue脚手架（vue-cli）搭建一个项目详解
10-17
因为Vue CLI是基于Node.js运行的，所以它是搭建项目的前提条件。你可以通过官方网站下载并按照提示进行安装。 2. **全局安装Vue CLI** 安装完Node.js后，打开终端或命令提示符，使用npm（Node包管理器）全局安装...
Vue 脚手架(vue-cli) 环境搭建
weixin_61562639的博客
08-11 2841
vue 脚手架指的是 vue-cli 它是 vue 官方提供的一个快速构建单页面（SPA）环境配置的工具，cli 就是(command-line-interface ) 命令行界面。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。a. 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。...
【Vue】使用Vue脚手架(vue-cli)构建Vue3项目
早睡早起长头发的博客
08-17 1989
一、利用cmd和vscode创建 二、利用cmd和webstorm创建
Vue脚手架搭建项目【小白看了都会】
m0_67372185的博客
11-20 1173
新手小白搭建vue项目
hexo安装时报错提示packages are looking for funding run `npm fund`` for details found 0 vulnerabilities
m0_67390379的博客
03-03 3521
$ npm install -g hexo-cli changed 57 packages, and audited 58 packages in 10s 11 packages are looking for funding run `npm fund`` for details found 0 vulnerabilities 反正最后我也重装解决的。 node.js安装及环境配置超详细教程【Windows系统安装包方式】 ...
VUE-脚手架搭建
xhmico的博客
12-15 2966
vue 有两个大版本，分别是 vue-2 和 vue-3，目前新项目的话用 vue-3 的会比较多以下我会分别提供搭建 vue-2 和 vue-3 脚手架的过程。
Vue脚手架搭建以及创建Vue项目流程
热门推荐
weixin_68658847的博客
04-25 3万+
Vue脚手架的创建以及用脚手架创建项目的全套流程
Vue-Cli 脚手架 搭建 Vue项目
灵魂学者的博客
02-03 2237
本篇主讲如何通过vue提供的vue-cli脚手架来搭建vue项目，自此开始进行Vue基于项目中的介绍，Vue-cli 是官方提高用于搭建基于 Vue、Webpack、ES6 项目目的脚手架工具，通过脚手架创建项目势必会较为高效！
Vue脚手架安装&搭建Vue项目
BHK
04-03 1304
Vue脚手架项目构建
laotouzi001的博客
09-21 333
Vue 脚手架项目的创建
vue脚手架与创建vue项目
qq_48843954的博客
05-28 880
vue脚手架的安装与创建vue项目需要先行安装配置node与npm，详情可以看node、npm的下载、安装、配置_node 下载安装-CSDN博客。
快速上手：Vue脚手架搭建Vue-webpack项目指南
本文详细介绍了如何使用vue脚手架工具（vue-cli）来搭建一个基于webpack的vue项目，这对于初学者和需要高效开发的企业级vue应用开发者都非常实用。以下是关键知识点的详述： 1. **Node.js环境准备**： - 首先确保...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值