Vue--》超详细教程——vue-cli脚手架的搭建与使用

最新推荐文章于 2025-04-03 10:46:39 发布
最新推荐文章于 2025-04-03 10:46:39 发布
阅读量5k 收藏 72
点赞数 69
分类专栏： vue开发 文章标签： vue.js javascript 前端 npm 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53123067/article/details/127723337
版权
本文详述了如何使用vue-cli搭建Vue项目，包括vue-cli的安装、创建项目、项目目录结构解析、运行流程及组件使用。针对安装中可能遇到的问题提供了解决方案，如网络问题、权限问题、环境变量配置等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

vue-cli

vue-cli 的安装 (可能出现的问题及其解决方法)

vue-cli 创建 Vue 项目

Vue项目中目录的构成

Vue项目的运行流程

Vue组件的使用

vue-cli

vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。其官网如下：vue-cli官网 ，基于vue-cli这个系统，我们就可以快速搭建好“单页面应用程序” ：

单页面应用程序（英文名：Single Page

了解本专栏 订阅专栏 解锁全文 超级会员免费看
贼 Cool：使用脚手架 vue-cli 来搭建 Vue 环境
菩提小猿的博客
02-16 581
文章目录1. 介绍搭建 Vue 环境的方法2. 使用 vue-cli 搭建 Vue2.1 设置 Node 环境2.2 基于 Node.js 安装 cnpm（淘宝镜像）2.3 安装vue2.4 安装webpack2.5 安装vue命令行工具。即：vue-cli2.6 安装webpack-cli2.7 检测安装是否成功3. 使用 vue-cli 创建项目 1. 介绍搭建 Vue 环境的方法 搭建 Vue 环境常用的有两个方法： 1、在 Vue.js 的官网上直接下载 vue.min.js，并用 “script”
vue-cli脚手架搭建
SuaSUA_He的博客
04-14 422
1.安装node.js http://nodejs.cn/download/ 在cscode终端/cmd中输入 node -v查安装好的版本号 2.安装cnpm（npm的镜像） https://npmmirror.com/ 3.安装yarn npm install yarn 4.安装vue-cli脚手架 cnpm install -g@vue/cli@版本号 验证是否安装成功： vue -V查版本号 5.vue create 项目名（小写字母） 6.引入element-ui npm i e
Vue-cli（Vue脚手架）vue脚手架搭建项目
胡迪警长的博客
08-27 1677
vue脚手架搭建 1.Vue.js是一套构建用户界面的渐进式框架。 2.Vue 只关注视图层，采用自底向上增量开发的设计。 3.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 前言 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 实现的交互式的项目脚手架 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发 一个运行时依赖 (@vue/cli-service)，该依赖： 可升
Vue CLI创建项目指南
最新发布
weixin_74417835的博客
04-03 646
确保已安装Node.js（建议版本12.0.0或更高）
Vue-cli(vue脚手架)上万字总结，超详细教程
热门推荐
weixin_45647685的博客
04-02 3万+
1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g @vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录，然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架 显示如图所示说明创建成功 如图命令所示 我们进入myvue工程，执行命令 npm run serve 然后浏览器访问http://localhost:8080/ 到这
vue-cli（vue脚手架）超详细教程
qq_41611829的博客
07-04 669
目录 前言 1.安装vue-cli 2.用vue-cli来构建项目 3.启动项目 4.vue-cli的webpack配置分析 5.打包上线 前言 都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件。。。。（确实很烦）。vue的官方文档还是不错的，由浅到深，如果不使用构建工具确实用的
vue-cli脚手架的搭建
zmyalh的博客
08-05 277
** 前端搭建vue-cli项目的两种教程 ** 第一种搭建方法（默认） 1、打开node.js官网https://nodejs.org/en/下载当前版本node.js并安装到电脑中，安装方式为"无脑安装之下一步" 安装完成后检验是否安装node.js: win+r输入cmd打开dos窗口输入node -v回车之后会显示node.js版本号，证明电脑安装成功了！ npm集成在node.js中，在dos窗口输入npm -v回车之后会显示npm版本！ 2、利用淘宝镜像安装cnpm，在命令行中输入npm i
使用vue-cli脚手架工具搭建vue-webpack项目
12-10
为了解决这个问题，Vue 官方提供了 `vue-cli` 这个脚手架工具，它可以帮助开发者快速地生成一个包含所有必需配置的项目模板。 1. **安装Node.js环境**： 在搭建Vue项目之前，首先确保你的计算机上安装了Node.js。...
webstorm建立vue-cli脚手架的傻瓜式教程
01-18
2、点击 create 后出现以下选项，按键盘上下键选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），这里我选择手动 3、选择配置，这时你会...
详解如何使用vue-cli脚手架搭建Vue.js项目
10-19
- 使用vue-cli脚手架创建的项目已经包含了热加载、代码检查、单元测试和CSS分离等现代Web开发所需的功能。 - Vue.js项目的目录结构是预设好的，这包括源码、资源、构建配置等不同部分的文件夹。 - 在进行项目开发时...
vuecli脚手架的搭建
IT12345666的博客
05-20 675
安装nodejs 并搭建环境 去nodejs的官网进行下载 和jdk的环境配置一样： 打开电脑高级系统管理： 配置新建 NODEHOME 刚才拷贝的路径 并在path里面添加 %NODEHOME%\bin 打开cmd 输入 npm -version 出现这个 就证明node 环境变量配置成功了！ 安装vue项目 请严格按照步骤来 避免踩坑：搭建完环境变量之后 在全局中进行安装依赖： 前面请在桌面上直接打开cmd进行安装： 首先进行nodejs的初始化 npm init -y 在您的计
搭建vue-cli手脚架
weixin_62868636的博客
10-23 606
在【系统变量】中选择【Path】点击【编辑】后点击新建【%NODE_PATH%】，随后一直点击【确定】直到关闭所有窗口即可。在刚安装的目录下，新建俩个新的文件夹 【node_global】和【node_cache】变量值：复制刚刚的node_global路径并在后面添加\node_modules。b、选择你项目开发时使用的vue版本（上下键选择，回车确认），这里用vue2。设置--系统--系统信息--高级系统设置--环境变量。回车选中后会创建项目，按照命令行上的提示--运行项目。感觉没有用的环境变量。
Vue-cli搭建脚手架
QiGeS的博客
11-19 188
1.安装node.js 从node官网https://nodejs.org/en/，下载安装node，一路next 安装完，win+R进入cmd，输入node-v,看是否有版本号 npm包管理器，cmd中输入npm-v，显示npm版本号 2.安装淘宝镜像-cnpm 淘宝镜像网址http://npm.taobao.org/ 或者输入 $ npm install -g cnpm --registry=...
VUE-CLI脚手架的搭建
小二来一只葫芦
05-09 226
本文来自博客园：https://www.cnblogs.com/yshang/p/11238513.html 1、安装node js 　　下载地址：http://nodejs.cn/download/ 2、安装完成后运行Node.js command prompt（node -v查看安装版本） 　　 3、安装npm（由于现在版本的nodejs已经集成npm所以无需安装，可以用npm -v查看版本） 　　 4、注册cnpm来代替npm 　　使用命令：npm install cnpm -g --reg.
5-1.Vue-cli脚手架的搭建
落叶的博客
02-01 175
Vue-cli脚手架搭建 Vue-cli是vue官方出品的快速构建单页应用的脚手架，在安装vue-cil之前需要安装npm，安装npm时可以直接下载node的安装包，根据自己系统选择合适的版本。 下载地址：http://nodejs.cn/download/ 我这里选的是64位的Windows安装包 下载好node安装包后，按照相关提示进行安装即可。 注意：可以在命令行工具里输入npm -v 检...
vue-cli（vue脚手架）搭建教程
Seven_Amber的博客
06-19 403
1.安装vue-cli ①使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g ②全局安装vue-cli，在cmd中输入...
使用vue-cli3搭建TS基础脚手架与Webpack优化
"本文主要介绍了如何使用vue-cli3搭建一个基于TypeScript的脚手架，包括项目的准备工作，如安装Node.js、使用nrm管理npm源，以及安装vue-cli3。接着，详细阐述了创建Vue项目的过程，特别是选择TypeScript和相关插件...
评论 58
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亦世凡华、

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值