Vue-cli安装与配置

最新推荐文章于 2025-10-25 20:39:11 发布
原创 最新推荐文章于 2025-10-25 20:39:11 发布 · 714 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了Node.js的下载、安装及环境配置过程，包括如何使用npm和cnpm安装包，以及如何通过@vue/cli脚手架快速搭建Vue.js项目并运行。适合Node.js和Vue.js初学者快速上手。

Node.js的下载与安装

node.js官网：https://nodejs.org/zh-cn/

注意：安装node要选择自动路径配置，后面就不要进行环境变量的配置。

验证是否安装成功

查看node版本命令node -v
查看npm是否安装命令 npm -v

在这里插入图片描述

安装cnpm

在命令行窗口输入
命令npm install -g cnpm -registry=https://registry.npm.taobao.org

验证是否安装成功
命令 cnpm -v

在这里插入图片描述

安装vue-cli脚手架

安装命令npm install -g @vue/cli
验证是否安装成功命令 vue --version

在这里插入图片描述

在这里插入图片描述

搭建第一个项目

进入D盘命令：d:
切换目录命令cd vueProgram

在这里插入图片描述
在这里插入图片描述
创建目录mkdir shop
进入项目cd shop
在这里插入图片描述
初始化
在项目全局安装
然后初始化
初始化时会提示要输入信息（一直enter）
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

进入项目目录cd shop

在这里插入图片描述
运行项目npm run dev

在这里插入图片描述

在这里插入图片描述

在浏览器地址栏输入http://localhost:8080

在这里插入图片描述

vue-cli（vue脚手架）安装 详细教程
m0_54853503的博客
02-23 7271
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。 一.安装vue-cli 1、 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 注意：webpack 4.
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请参考 vue add multiple-page 命令 以下是此插件的 3 个命令： init-...
vue-cli 安装
m0_72674204的博客
09-26 498
npm全称 Node Package Manager，基于Node.js的包管理器，也是整个Node.js社区最流行、支持第三方模块最多的包管理器。在Vue项目中，网页不再书写html文件、CSS文件、js文件，都用后缀名为XXXX.vue文件代替。运行成功之后，在cmd中，再输入npm config list 查看是否设置成功。在终端，如果处于工作区目录下，可以通过 cd 项目名称，进入到项目所在的目录，在vue项目中，把一个vue文件，叫做单文件组件。插件3：vetur -- vue插件。
Vue-vue-cli的安装
莫莫
06-19 890
Vue脚手架---vue-cli的安装安装vue-cli1. 安装node.js2. 全局安装nrm（用来切换下载源）3. 全局安装脚手架（vue-cli)4. 创建项目进入创建好的项目文件夹运行项目---不要关闭命令窗口浏览器运行---命令窗口会给出运行地址 安装vue-cli 1. 安装node.js 下载Node.js Node.js地址 键盘win+R键 打开运行，输入cmd 输入：node -V 查看版本，如果安装成功则可以查看 2. 全局安装nrm（用来切换下载源） npm i
安装 Vue CLI (vue脚手架搭建)
最新发布
qq_36710118的博客
10-25 291
本文介绍了Vue项目环境的安装与搭建步骤：首先需要安装Node.js和npm作为基础运行环境；其次通过npm全局安装Vue CLI；然后使用Vue CLI创建新项目并启动开发服务器；最后还介绍了可选安装的Vue CLI图形界面工具。全文提供了从环境配置到项目创建的具体命令行操作指南，帮助开发者快速搭建Vue开发环境。
vue-cli安装教程
inticaler的博客
04-10 1549
vue-cli安装教程 vue-cli详细安装教程，首次写博客，记录一下 一、使用npm安装vue-cli之前，需要配置node环境。 node安装 去node官网（https://nodejs.org/en/download/）下载node安装包，安装。 npm安装 在终端框中输入命令：npm install npm -g，然后回车，如图 npm安装完成 二、安装vue-cli 在命...
[VUE] Vue-CLI的安装、使用及环境配置（超详细）
热门推荐
leo的博客
11-20 4万+
Vue-CLI的安装、使用及环境配置的详细步骤（超详细）
vue-cli脚手架-bulid下的配置文件
08-27
Vue-cli脚手架bulid下的配置文件 Vue-cli脚手架bulid下的配置文件是Vue.js开发过程中的一部分，主要用于创建和配置Vue.js项目。通过学习和掌握这些配置文件，可以帮助开发者更好地理解Vue.js项目的结构和工作原理，...
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠...
vue-cli-plugin-qiankun:适用于微前端千库应用程序的vue-cli3插件
05-05
* vue-cli-plugin-qiankun* An Vue-cli3 Plugin for micro-frontend qiankun application 结合 qiankun 快速生成微前端应用的脚手架插件 Features qiankun 接入，子应用打包配置接入 修改 qiankun 官网 demo 中 vue ...
vue-cli2与vue-cli3在一台电脑共存的实现方法
10-16
对于Vue CLI3，其下载安装步骤与Vue CLI2基本相同。不同之处在于，安装Vue CLI3的命令是`npm install -g @vue/cli`或者简写为`npm install -g @vue/cli@版本号`。这里使用了`@vue/cli`作为包名来区别Vue CLI2，而且...
vue-cli的安装
夏小小的博客
07-17 1292
vue-cli的安装 1.安装github和node.js node自带npm，如果你想升级npm为最新，键入npm install npm -g “http://www.jianshu.com/p/03a76b2e7e00 npm install vue 3能查看vue的版本之后记得安装webpack” npm install webpack -g 2.
脚手架vue-cli系列一：安装与规范
weixin_30741653的博客
09-26 222
我很喜欢Vue的一个重要原因就是因为它的vue-cli，这个工具可以让一个简单的命令行工具来帮助我快速地构建一个足以支撑实际项目开发的Vue环境，并不像Angular和React那样要在Yoman上找适合自己的第三方脚手架。vue-cli的存在将项目环境的初始化工作与复杂度降到了最低。 1.安装vue-cli vue-cli是一个npm的安装包，我们希望它能在本机的任意目录下创建项目，那么就得...
window下 ，vue-cli安装
weixin_42803027的博客
03-04 1029
安装开始 在安装vue-cli之前，请确保你电脑中下载了node.js。 如果没下，请点击链接跳转到官网下载node.js，node.js安装就比较容易路径最好修改一下，其他都是默认一路next，到finish。然后，去命令行输入 node -v 和npm -v检查是否安装成功。 正式开始 首先下载淘宝的镜像cnpm，至于为什么，我这里就不叙述了，主要原因就是npm国外服务器太慢，淘宝made i...
VUE脚手架（vue-cli）安装
Hemameba的博客
07-12 2396
本篇文章主要用于介绍如何在计算机上安装VUE脚手架。
vue-cli（vue脚手架）项目安装
weixin_44979432的博客
10-09 455
一、安装node.js node.js官网：https://nodejs.org/zh-cn/ 从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）输入cmd。然后输入node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。安装完node.js之后，npm也会自动安装 查询是否安装成功的命令：node -v 与 npm -v 二、安装vue vue-cli官网：https://cli.vuejs.o
Vue-Cli安装和配置（全）
qq_44709970的博客
02-21 4558
安装、配置、淘宝镜像、可能出现的问题
vue-cli安装
zhipengit
09-21 241
一. 提前准备工作 1.Node.js环境 2.Windows10 3.npm（前端包管理工具） 4.webpack（前端资源加载/打包工具） 二. 开始安装 1.下载并安装Node.js 下载地址：https://nodejs.org/en/download/ 2.在cmd中查看node.js是否安装成功，以及是否安装npm 3.由于npm安装资源时速度慢，推荐使用淘宝的镜像及其命令cnpm 大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 淘宝 NPM 镜像是一个
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值