搭建Vue脚手架（vue-cli）并创建一个项目

最新推荐文章于 2024-10-09 16:27:07 发布
最新推荐文章于 2024-10-09 16:27:07 发布
阅读量803 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Vue.js 项目实战经验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39089928/article/details/87735201
本文详细介绍了如何搭建Vue脚手架，包括安装Node.js环境，使用npm或cnpm全局安装vue-cli，以及通过vue-cli创建基于webpack模板的新项目。在创建项目后，还指导了如何安装项目依赖并运行项目，确保在本地浏览器中能正常访问。

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

 

 

1、 安装nodejs环境

官网下载：https://nodejs.org/en/download/ 
一直默认就行，路径可以改变但要记得到

安装完成后cmd，输入

node -v

npm -v

如果能看到node和npm的版本号了，说明已经安装成功 

2、安装vue-cli

有npm和cnpm两种方式

首先利用淘宝镜像安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org</
了解本专栏 订阅专栏 解锁全文 超级会员免费看
最全vue脚手架搭建教程
suny8的专栏
06-23 897
Vue CLI是一个基于Vue.js进行快速开发的完整系统，可以自动生成Vue.js+ webpack的项目模板。Vue CLI提供了强大的功能，用于定制新项目、配置原型、添加插件和检查webpack配置。@vue/cli3.x版本可以通过 vue create 命令快速创建一个新项目的脚手架，不需要像vue2.x那样借助于webpack来构建项目。
Vue教程｜搭建vue项目｜Vue-CLI2.x 模板脚手架
最新发布
baidu_21035953的博客
11-29 1512
通过实战方式，介绍基于Vue-CLI2.x 模板脚手架搭建vue2.x项目的完整构建过程，从环境搭建、脚手架搭建到脚手架构建项目，另外分享了工程结构各文件的具体用途，方便大家了解和掌握
如何搭建一个vue项目(完整步骤)
m0_67392661的博客
06-22 4972
查看版本的两种方式 出现版本号则说明安装成功（最新的以官网为准） 这里注意：安装vue-cli对node.js的版本是有要求的 装的两种方式：输入cmd命令 查看安装的版本（显示版本号说明安装成功） 如果你原来有版本或者版本比较低，可以升级...
Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）
meinanqihao的博客
05-12 2701
Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli） Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星，足以说明其以悄然成为主流。16年10月Vue发布了2.x版本，经过了一段时间的摸索和看官方的教程和api，才了解到2.0版本在1.0版本的基础上做了好多调整，废弃了好多api。。。废话不多说了，把我踩过的坑，在这里跟大家说说，希望
用vue-cli搭建vue项目
08-10 430
首先需要明确的是：Vue.js 不支持 IE8 及其以下 IE 版本，一般用与移动端，基础：开启最高权限的DOS命令（否则会出现意外的错误提示） 一.安装node.js,检测版本node -v,还要检测包管理工具npm -v 这里需要说明下，因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上，以免对后续产生...
vue脚手架搭建流程
热门推荐
ermaner666的博客
01-07 3万+
搭建vue项目之前你需要安装vue的脚手架和node.js，一起去看看怎么搭建一个vue环境吧。（学编程语言最爱看见的就是用这个先写一个helloworld，只想说我对世界友好可是现实是残酷的。。。。。。） 1&安装node.js（安装网址点击下面链接） node.js下载网址 安装完以后桌面上什么都没有是不是有点慌啊！不急，你先打开Dos窗口，输入以下命令， 如...
使用vue脚手架搭建一个项目
qq_56893858的博客
11-30 273
此文章认为读者已经有nodejs以及vue cli的环境了 1.创建项目 在某个文件目录下，进入到cmd界面 vue create 项目名 随机开始漫长的等待，注意，这个时候需要你的网络比较好，要不可能会造成失败 完成后的显示页面如下： 2.添加一些项目依赖 下载axios:cnpm install axios --save 下载qs:cnpm install qs --save 下载element-ui:cnpm i element-ui -S 3.修...
使用vue脚手架（vue-cli）搭建一个项目详解
10-17
Vue CLI，全称为Vue.js命令行工具，是Vue生态系统中的一个重要组成部分，用于快速搭建复杂的Vue项目。它提供了自动化构建、配置管理和预设等便捷功能，极大地提高了开发效率。本篇文章将详细讲解如何使用Vue CLI搭建...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
通过上述步骤，我们就能够使用Webpack 4和Vue搭建一个基本的Vue-cli项目，并对项目的构建过程有所了解。在实际开发中，对于更复杂的需求，比如代码分割、热模块替换等，Webpack提供了丰富的插件和工具来支持。只有...
Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解
08-28
本文介绍了 Vue 的实例、生命周期和 Vue 脚手架（vue-cli）的基本概念，并通过示例代码来演示如何创建一个 Vue 实例，并将其挂载到 DOM 上。同时，我们也讨论了 Vue 的响应式系统和生命周期的各个阶段。
新建Vue项目（脚手架）
qq_43776195的博客
06-07 609
新建Vue项目（脚手架）
创建vue脚手架项目
maowencai的博客
07-30 302
vue创建项目
Vue创建脚手架项目
aa
04-06 988
vue脚手架创建项目要使用Vue脚手架创建一个新的项目，请按照以下步骤操作：确保你已经安装了Node.js和npm。安装Vue CLI（Vue的官方命令行工具）：这里我已经安装完了 从创建项目开始演示打开vscode终端（ctrl + ~）直接输入以下命令我这里创建到C盘上了，你可以切换到别的盘符此时屏幕会显示?选择你要创建vue2或者vue3项目，这里我选的是vue2（键盘上下按键就可以选择,完毕后按回车）此时屏幕会显示一些信息等待即可。
使用vue-cli脚手架创建项目
NY1007的博客
09-06 277
webpack创建项目，基于vue脚手架2系列
Vue CLI快速创建一个项目
夏微微的博客
12-21 379
1、使用npm或yarn安装vue cli yarn的安装 npm i yarn -g vue cli的安装 npm install -g @vue/cli or yarn global add @vue/cli 安装完成就可以使用vue命令了，可以使用vue -V查看版本 2、创建新项目 project为创建的项目名 vue create project 默认添加上babel和eslint，我门可以手动设置更多的选项，我一般添加这几项 3、项目运行 cd project npm run
vue创建一个cli项目
qq_52139881的博客
03-05 274
1.安装node.js 从 node 官网 直接下载（可以自己调整一个环境目录）一直安装即可（会自动配置 path 环境变量，不像某些 Java 害 搞半天），安装后，打开命令行工具（win+R），输入 node -v 查看版本，出现版本号则成功。注意：（下载完完 node 是自带 npm 的，可以使用 npm -v 查看）。 但是我们还要安装 npm 国内的镜像 - cnpm，因为有些资源被屏蔽或是国外的原因。 可以打开文件管理器查看隐藏目录，要先将 查看中的选项确认。 就会发现 C盘->用户
脚手架vue-cli创建Vue项目手把手教学
H524268015wsw的博客
11-18 4754
Default是默认选择（vue2,vue3）,Manually select features 是自己手动选择，可以选择你需要的。通常都是自己手动选择,键盘上下键选择，enter确定。用vue -V检查版本，如果出现“vue” 不是内部或外部命令，也不是可运行的程序或批处理文件，就说明你电脑没有安装vue。像这种要选择yes还是no的一般情况下都是选择no，可以避免下次写特殊项目不好配置。再然后也是一些选项，按照翻译选择自己需要的，我这里选的倒数第二个。选择自己需要的以后，按下回车再次选择自己需要的。
Vue脚手架项目创建 --保姆级教程
Broken_x的博客
10-09 1693
创建好后，可以看到下载了一堆文件，我们用VScode 打卡，来逐个了解一下这些文件我们详细探讨了如何使用 Vue CLI 创建和启动 Vue 项目，从项目的配置到结构的理解，再到实际的运行和端口修改。希望通过这篇文章，您能够轻松上手 Vue 开发，探索更多前端技术的可能性。无论是构建小型项目还是大型应用，掌握这些基础知识都是至关重要的。如果您有任何问题或建议，欢迎在评论区留言，让我们一起交流学习！
安装VueCli脚手架并创建Vue项目
xiaouncle的博客
02-28 1369
一、安装脚手架 1、在https://nodejs.org/zh-cn/download/下载node.js并安装 2、检查node和npm的版本（node -v、npm -v），如果在cmd中可以查看node和npm的版本，但是在VSCode中无法识别node、npm，以管理员身份重启VSCode即可 3、查看镜像库地址，如果不是国内地址可以设置为淘宝镜像 npm config get registry npm config set registry https://regi...
快速上手：Vue脚手架搭建Vue-webpack项目指南
本文详细介绍了如何使用vue脚手架工具（vue-cli）来搭建一个基于webpack的vue项目，这对于初学者和需要高效开发的企业级vue应用开发者都非常实用。以下是关键知识点的详述： 1. **Node.js环境准备**： - 首先确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

吴小花的博客

1分也是爱

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

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

打赏作者

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

抵扣说明：

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

余额充值