创建一个vue2的脚手架项目（超详细）

最新推荐文章于 2025-04-11 19:52:21 发布
原创 最新推荐文章于 2025-04-11 19:52:21 发布 · 9.5k 阅读 · 46 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #前端 #javascript #npm
本文详细介绍如何使用npm安装Vue2脚手架并创建项目。包括安装步骤、验证版本、项目创建、启动本地服务器及项目目录说明等内容。

创建一个vue2的脚手架项目（超详细）

0.前言

在用npm安装vue脚手架之前需要安装node，前面博客有详细安装过程，请读者安装node之后再进行脚手架的安装

1 npm vue2的安装脚手架

//安装命令
npm i -g @vue/cli     
//查看vue版本
vue -V

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.创建vue2脚手架项目

//创建项目
vue create myvue

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.开启服务器

//开启服务器
npm run serve

在这里插入图片描述
在这里插入图片描述

4.在浏览器中输入端口地址

localhost:8080

在这里插入图片描述

5.项目目录介绍

在这里插入图片描述

Vue教程｜搭建vue项目｜Vue-CLI2.x 模板脚手架
baidu_21035953的博客
11-29 1778
通过实战方式，介绍基于Vue-CLI2.x 模板脚手架搭建vue2.x项目的完整构建过程，从环境搭建、脚手架搭建到脚手架构建项目，另外分享了工程结构各文件的具体用途，方便大家了解和掌握
开始学习Vue2（脚手架，组件化开发）
Mangcun_tutu的博客
01-23 1385
在声明自定义属性时，可以通过1ype来定义属性的值类型。是组件的自定义属性，在封装通用组件的时候，合理地使用。当组件在使用中，标签中不需要嵌套东西可以使用单标签。，所有的功能与交互都在这唯一的一个页。的意思时谁用我这个组件就必须要传递。是一个支持组件化开发的前端框架。在组件复用的时候，就使用双标签。，从而方便项目的开发和维护。声明组件、注册组件、使用组件。以极大的提高组件的复用性!要做的事情很单纯：通过。中规定：组件的后缀名是。中的数据都是可遗可写的!组件化开发指的是：根据。的值，如果不传就会报错。
Vue入门及脚手架搭建
m0_56383660的博客
02-24 599
跟着青戈戈做毕设
Vue2基础教程(脚手架版)
qq_57319760的博客
09-14 6465
本文讲解使用Vue脚手架进行Vue2学习，适合学习完一遍vue2基础的人进行复习
Vue2.0搭建脚手架（vue-cli）
Phils的博客
10-10 1万+
Vue2.0搭建脚手架（vue-cli）
Vue2脚手架创建项目
qq_39593914的博客
04-11 5579
Vue2脚手架创建项目 一、使用脚手架 1.安装 @vue/cli ​ 简述 cli ===> command line interface (命令行接口) // 安装 npm install -g @vue/cli # OR yarn global add @vue/cli // 升级 npm update -g @vue/cli # OR yarn global upgrade --latest @vue/cli // 版本查看 vue --
如何安装Vue2脚手架，并使用脚手架创建一个项目？解析创建项目各个文件的作用，内容超详细，通俗易懂。
Asigerg的博客
03-19 584
首先确保您的电脑上下载过Node.js，这样才可以使用npm进行下载。如果没有安装过请先自行安装node.js 1. 打开命令终端 右键windows窗口标志，找到Windows终端（管理员），点击运行 2. 输入指令npm i @vue/cli -g 稍等片刻等待下载完成。 3. 待下载完成后，输入vue --v查看是否成功安装 ps: 我在安装时出现报错：Vue : 无法加载文件 C:\Users\Asiger\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运
vue-cli（vue脚手架）2.0 搭建项目超详细教程
TeroZhang的博客
05-17 1881
1.安装vue-cli ① 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 ② 全局安装vue-cli，在cmd中输入命令: npm install --global vue-cli 安装成功： 安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安
Vue脚手架搭建以及创建Vue项目流程
weixin_68658847的博客
04-25 3万+
Vue脚手架的创建以及用脚手架创建项目的全套流程
vue脚手架安装以及vue脚手架创建项目（详细步骤），看这篇文章就行了，小白也能创建自己的项目
weixin_48179599的博客
06-20 1万+
vue脚手架安装及vue脚手架创建项目（详细步骤） vue是前端非常火的框架，学会这个框架麻麻再也不用担心我获取不到dom的了 废话不多说，直接开整。 首先，我们要先到nodejs官网下载与电脑适配的nodejs文件到电脑上并安装 下载node安装包之后，直接傻瓜式安装就行 安装好nodejs之后，在电脑创建一个新文件夹，并在里面打开cmd窗口 cmd窗口打开之后，输入npm install nrm -g命令回车，全局安装npm工具 显示这个提示，就说明npm安装成功了 接下来继续输入
搭建Vue脚手架（vue-cli）并创建一个项目
热门推荐
kivet 的博客
08-30 7万+
1、 安装nodejs环境 官网下载：https://nodejs.org/en/download/ 一直默认就行，路径可以改变但要记得到 安装完成后cmd，输入 node -v npm -v 如果能看到node和npm的版本号了，说明已经安装成功 注：node版本最好高一点，保险的话直接安装最新版本的，因为vue运行需要基于npm一定的版本（最好是3.x.x以上），版本低了...
Vue2 通过脚手架（cli）创建项目方式
weixin_45703831的博客
04-30 2059
【注意，创建的文件夹名字最好不要与项目名同名】
前端-Vue2使用脚手架
最新发布
2302_80490510的博客
04-11 1936
Vue CLI 的全称是 Vue Command Line Interface，即 Vue 命令行界面。它是一个强大的工具，用于帮助开发者快速搭建、配置和管理 Vue.js 项目。项目创建：Vue CLI 提供了一个图形化界面和命令行工具，可以快速创建新的 Vue.js 项目，并且可以选择不同的配置和功能预设。项目配置：允许开发者自定义项目的构建配置，例如配置 Babel、PostCSS、Webpack 等工具，以及添加额外的插件和功能。插件生态系统：Vue CLI 拥有一个丰富的插件生态系统，开发者可以通
vue2脚手架搭建项目流程
记不住代码的前端混子
10-25 2096
使用环境：node版本16.16.0。
用脚手架新建一个vue2的项目
sinat_34896766的博客
01-05 1611
2、在项目新建路径的外层文件夹下打开cmd，输入vue create 项目名(需要安装node，node安装完成后，可用node -v查看安装版本。项目名不能包含大写母，否则会提示以下错误。注意此时的v是大写的V。
vue2搭建脚手架（vue-cli）并创建一个项目
所行皆坦途
07-31 1711
学习使用 vue2脚手架（vue-cli） 创建vue项目，附详细代码、图片解析。
Vue脚手架的安装以及创建Vue2，Vue3、Vite+Vue3项目
weixin_53752776的博客
09-30 1868
Vue CLI 是 Vue.js 官方提供的脚手架工具，用于快速搭建 Vue.js 应用程序。它提供了一套完整的工具链来帮助开发者高效地构建复杂的应用程序。Vue CLI 包括了创建新项目、提供内置的现代化构建设置、支持热重载（HMR）、以及一个插件系统来扩展其功能等特性。对于第一次接触Vue小伙伴的温馨提示：在我们安装vue之前我们需要先安装Node.js，我们需要在node环境中来安装和运行Vue。
如何创建一个Vue项目（Vue2脚手架的安装）
m0_48806387的博客
12-29 1万+
安装脚手架 如何创建vue项目
Vue开发项目入门——Vue脚手架
m0_67495466的博客
04-12 3万+
Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程。
Vue脚手架搭建以及创建Vue项目流程_脚手架创建vue项目
2401_89609610的博客
01-14 1610
node_cache和node_global是后面创建的文件夹，后面有讲到，创建的位置，我在这里放到了node.js文件夹下，也可以自定义文件夹路径四个path分别代表：添加了NODE_PATH这个变量名，添加这个名下面的两个文件夹等，最后那个路径也要配一下，不然安装淘宝镜像会有问题效果：提示：如果碰到下面情况可能原因：可能是C:\Users\Administrator(users)目录下的.npmrc里的配置问题,把里面的文件改成自己需要的路径，比如我想放到node.js文件夹下。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值