Windows 环境下搭建Vue脚手架

最新推荐文章于 2024-07-05 23:07:33 发布
原创 最新推荐文章于 2024-07-05 23:07:33 发布 · 454 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue搭建脚手架 #vue脚手架 #vue搭建

步骤一：安装node.js

     安装就不做介绍了，说一下怎么测试安装是否成功。

     

步骤二：安装全局的CLI

到这里，基本就安装完成了。

然后需要创建一个放项目的文件夹。用命令符进入该文件夹

安装完成以后，打开该文件夹会看到以下内容

至此已经全部安装完成，最后一步开始运行。

在浏览器中输入http://localhost:8080，看到如下界面就证明搭建成功。

如有错误，欢迎指正

如有问题，欢迎提问

壹加贰
关注
最全vue脚手架搭建教程
suny8的专栏
06-23 1375
Vue CLI是一个基于Vue.js进行快速开发的完整系统，可以自动生成Vue.js+ webpack的项目模板。Vue CLI提供了强大的功能，用于定制新项目、配置原型、添加插件和检查webpack配置。@vue/cli3.x版本可以通过 vue create 命令快速创建一个新项目的脚手架，不需要像vue2.x那样借助于webpack来构建项目。
win11下Vue环境搭建（脚手架初始化+项目启动）教程（详解多图）
weixin_46447549的博客
02-27 5001
初学Vue 搭环境快把我整死了QAQ 差点入门即入土 记录一下~。
windows10系统搭建vue.js 脚手架
wwyywwsaber的博客
04-02 1633
1.安装NodeJS NodeJS 提供方便的NPM依赖管理和编译打包工具，所以NodeJS是很好的选择。 下载地址：http://nodejs.cn//download/ 下载后解压放到合适位置，然后配置系统变量 打开cmd命令行，输入npm -v 出现版本信息即安装成功 2.设置淘宝镜像 因为npm使用的是国外中央仓库，下载慢，所以配置镜像； 安装成功后用cnpm代替npm命令 npm install -g cnpm --registry=https://registry.n
使用 Vue-cli 脚手架创建项目
Sun_blog
07-14 2423
文章目录使用Vue CLI创建项目第一步，安装Node.js第二步，进入命令行第三步，安装脚手架工具第四步，切换目录第五步，创建项目总结 使用Vue CLI创建项目 本次以WIN10系统为例，其他系统略有差异。 第一步，安装Node.js Node.js官网 下载左侧的版本，根据提示安装即可。没什么特殊注意的情况，这里就不做演示了，安装过的同学可以跳过这一步。 第二步，进入命令行 按下键盘 WIN+R 键，输入 cmd 回车进入命令行。 安装过的同学，可以输入node -v 查看 node.js 的
006-windows本地node.js和Vue脚手架安装步骤
Allure泽宇的博客
06-28 590
1 下载node.js Node.js中文官网：https://nodejs.org/zh-cn/download/ 2 安装node.js 一路下一步安装即可. 3 检测node.js版本 node -v 4 检查NPM版本号 npm -v 5 切换淘宝NPM库 方式1： npm install -g cnpm --registry=https://registry.npm.taobao.org 方式2：(建议使用第二种) npm config set registry https://regi
Windows下安装Vue脚手架(详解)
热门推荐
小夏陌的博客
05-14 3万+
简介 网上现有的安装教程，有的有很多坑，有的不够详细，所以打算整理一下，也方便自己以后查看 安装Node.js 1.下载地址 https://nodejs.org/en/ NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题 2.下载好后运行 3.接受条款 4.换目录 5.之后一路Next下去就安装好了 安装Vue脚手架 1.使用淘宝镜像安装cnpm np...
windows下安装vue搭建脚手架工程
Lelouch_66的博客
05-26 271
转载自：https://www.jianshu.com/p/e215a33aed40 三个概念 npm：Nodejs下的包管理器。 webpack：它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。 vue-cli：用户生成Vue工程模板。 一。下载安装node Node.js官网https://nodejs.org/en/。 本次安装目录为D:\nodejs。安装后目录如下： 1. 检查安装是否正常 进入cmd输入指令 ec.
windows下vue-cli及webpack搭建安装环境
08-30
Windows 下 Vue-cli 及 Webpack 搭建安装环境 在现代 Web 开发中，Vue-cli 和 Webpack 是两个非常重要的工具，前者是 Vue.js 的脚手架工具，可以快速构建 Vue 项目，而后者是目前最流行的模块打包工具。本文将详细...
windows下vue.js开发环境搭建教程
10-20
Vue.js是一种流行的前端JavaScript框架，尤其在Windows环境下搭建Vue.js的开发环境对于初学者来说可能会遇到一些挑战。本文将详细讲解如何在Windows操作系统上搭建Vue.js的开发环境，包括必要的工具和步骤。 首先，...
Windows10安装vue脚手架
迎接小天使
08-21 826
第一步、安装nodejs 相关链接 https://blog.youkuaiyun.com/qq_37554565/article/details/107815437 第二步、安装Vue脚手架 1.使用淘宝镜像安装cnpm npm install -g cnpm –registry=https://registry.npm.taobao.org 注：国外的源下载会很慢，只要你慢你就可以换成国内淘宝的源，加**–registry=https://registry.npm.taobao.org** 即可 2.出现以下
Windows搭建vue开发环境(windows安装vue脚手架)
小诸葛的博客
07-02 796
1.下载、安装node 下载地址：https://nodejs.org/en/download/ 2.查看node版本 npm -v 3.安装vue脚手架vue-cli npm install --global vue-cli 4.查看vue版本 vue --version 参考自：https://jingyan.baidu.com/article/e4511cf39ba...
Vue脚手架安装配置-windows
Linux学习与应用
06-14 443
最近要开发自动化运维的一个平台，需要用到前台的技术，经过了解，最后选型为Vue框架来实现。 下载npm包管理器，为了安装vue组件做准备。 nodejs下载地址：https://nodejs.org/en/download/ 注：如果安装时候，指定安装目录，配置相关组件的全局安装目录，在安装时候也需要配置对应的环境变量，验证npm -v。 在Nodejs的主安装目录下创建一个node_...
vue的脚手架安装
优快云lele666的博客
01-04 2038
vue脚手架安装,组件组件练习从0-1
windows安装vue环境并安装vue-cli脚手架
怪咖莫雨IT技术咖
05-10 699
作者是写这篇文章的时候是个vue小白，根本不知道vue2、vue3。一脸懵。找了好多教程最后终于弄好了这个环境。做个记录。。。。
windows环境下搭建vue-cli 脚手架环境
wangxionglichuanju的博客
11-02 229
windows环境下搭建vue-cli 脚手架环境 1.下载node.js 网址:[node.js中文网址](http://nodejs.cn/) 一般一直next安装就行，注意不要安装在中文目录下 下载成功后在cmd命令窗口输入 npm -v,出现版本号，说明下载成功。 ![](https://img-blog.csdnimg.cn/20201102235600282.png#pic_center) 2.更换下载地址为国内的淘宝镜像 输入命令： npm install vue-cli ![
Vue脚手架安装(一套超详细的流程)
weixin_74941202的博客
05-23 8908
1.浏览器搜索node.js官网下载自己电脑系统所对应的版本号（我这里是windows11）,windows11以下的node.js的版本要更低一点。2.下载完成解压，点击安装，然后就是大家最喜欢的一键无脑点击next了，安装之前最好是先创建一个文件夹3.win+r输入cmd，在命令窗口分别输入 node -v 和 npm -v，出现了对应的版本号，恭喜你安装成功啦！
vue学习笔记——1{搭建脚手架}
zhouchao1964的博客
07-05 384
新手入门
vue脚手架搭建项目（详细教程）
weixin_65855560的博客
06-19 1万+
vue的自动化构建工具是node.js帮我们做的，这就是我们为什么要下载node的原因。npm install < name > --save：安装的同时，将信息写入package.json中，项目路径中若是有。Vue脚手架指的是vue-cli，它是一个快速构建**单页面应用程序（SPA）**环境配置的工具）命令行界面。npm list：查看当前目录下已安装的node包。npm ls：查看当前目录下已安装的node包。npm -v：查看npm安装的版本。：是一个开源的前端打包工具。1.进入终端执行命令。
windows搭建vue环境
最新发布
03-27
### 如何在 Windows 系统中搭建 Vue.js 开发环境 #### 1. 安装 Node.js 为了构建 Vue.js 的开发环境，首先需要安装 Node.js。Node.js 是 JavaScript 运行时环境，它包含了 npm（Node.js 包管理器），这是用于管理和运行 Vue CLI 所需的关键工具[^2]。 下载并安装最新版本的 Node.js 可以通过访问其官方网站完成。确保选择适合 Windows 平台的 LTS 版本（长期支持版）。安装完成后，在命令提示符下验证安装是否成功： ```bash node -v npm -v ``` 如果上述两个命令均返回对应的版本号，则说明 Node.js 和 npm 都已正确安装。 --- #### 2. 全局安装 Vue CLI Vue CLI 是一个官方提供的脚手架工具，可以快速创建和初始化 Vue 项目。全局安装 Vue CLI 命令如下所示： ```bash npm install -g @vue/cli ``` 执行此命令后，可以通过以下方式确认 Vue CLI 是否安装成功： ```bash vue --version ``` 如果显示了 Vue CLI 的版本号，则表示安装无误[^3]。 --- #### 3. 初始化 Vue 项目 一旦 Vue CLI 成功安装，就可以利用该工具来创建一个新的 Vue 项目。以下是具体操作流程： - 使用 `vue create` 命令启动交互式向导程序，输入以下指令： ```bash vue create my-vue-project ``` 在此过程中，可以根据需求自定义配置选项，比如 Babel、ESLint 或其他插件的支持。对于初学者来说，默认设置通常已经足够满足基本功能的需求[^1]。 当项目生成完毕之后，进入该项目目录，并启动本地服务器进行测试： ```bash cd my-vue-project npm run serve ``` 此时浏览器会自动打开页面展示默认的应用界面，表明整个环境搭建顺利完成。 --- #### 4. 更新 NPM 包（可选） 有时可能遇到某些依赖项无法正常加载的情况，这可能是由于缓存或者网络原因引起的。因此建议定期清理 npm 缓存以及更新所有包至最新状态： ```bash npm cache clean --force npm update ``` 这样能够有效减少因外部因素而导致的问题发生几率。 --- ### 注意事项 在整个环境中涉及到多个软件组件之间的协作配合，所以在实际操作当中可能会碰到各种各样的挑战。例如防火墙阻止连接、代理设置错误等问题都需要逐一排查解决。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值