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

Vue2脚手架搭建
最新推荐文章于 2025-09-12 22:08:52 发布
原创 最新推荐文章于 2025-09-12 22:08:52 发布 · 9.4k 阅读 · 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 1636
通过实战方式，介绍基于Vue-CLI2.x 模板脚手架搭建vue2.x项目的完整构建过程，从环境搭建、脚手架搭建到脚手架构建项目，另外分享了工程结构各文件的具体用途，方便大家了解和掌握
最全vue脚手架搭建教程
suny8的专栏
06-23 1345
Vue CLI是一个基于Vue.js进行快速开发的完整系统，可以自动生成Vue.js+ webpack的项目模板。Vue CLI提供了强大的功能，用于定制新项目、配置原型、添加插件和检查webpack配置。@vue/cli3.x版本可以通过 vue create 命令快速创建一个新项目的脚手架，不需要像vue2.x那样借助于webpack来构建项目。
VUE2脚手架创建及基础框架搭建
l1002670137的博客
09-14 2640
VUE2脚手架创建，router、axios、饿了么、vuex的引入和使用
【Vue2手录11】Vue脚手架（@vue_cli）详解（环境搭建+项目开发示例）
最新发布
qq_45925548的博客
09-12 1230
Vue 脚手架环境搭建指南 核心需求：Vue 脚手架（@vue/cli）解决手动搭建项目的痛点，包括依赖管理复杂、配置繁琐、开发体验差等问题，提供一键初始化能力。 环境准备： 安装 Node.js（LTS 版本）并配置环境变量 验证安装：node -v 和 npm -v 显示版本号 关键工具： npm：用于安装管理前端依赖 package.json：项目说明书，记录依赖和脚本 package-lock.json：锁定依赖版本保证一致性 脚手架安装使用： 全局安装：npm install -g @vue/cl
Vue2脚手架创建项目
qq_39593914的博客
04-11 5528
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的项目
sinat_34896766的博客
01-05 1555
2、在项目新建路径的外层文件夹下打开cmd，输入vue create 项目名(需要安装node，node安装完成后，可用node -v查看安装版本。项目名不能包含大写母，否则会提示以下错误。注意此时的v是大写的V。
Vue2 通过脚手架（cli）创建项目方式
weixin_45703831的博客
04-30 1905
【注意，创建的文件夹名字最好不要与项目名同名】
vue2脚手架搭建项目流程
记不住代码的前端混子
10-25 1988
使用环境：node版本16.16.0。
超详细使用vue cli脚手架自定义创建项目教程
weixin_44012320的博客
06-09 1366
超详细使用vue cli脚手架自定义创建项目教程 安装和检查node版本 输入 node -v 查看npm版本 输入npm -v 使用npm安装脚手架 输入 npm install -g @vue/cli 查看vue脚手架是否安装完成 输入vue -v 创建一个vue项目，进入到准备放置项目的文件夹中 格式 vue create XXX项目名 输入 vue create hellw-world 进入到选项 => 1、defalut 默认设置 Manually 自
2024最新：关于基于vue-cli脚手架创建vue项目（图文版）
m0_69097184的博客
09-21 809
它确保各种构建工具与合理的默认值一起顺利运行，因此您可以专注于编写应用程序，而不是花费数天时间争论配置。同时，它仍然提供了调整每个工具配置的灵活性，而无需弹出。TypeScript 是一个 JavaScript 的超集，包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript 在浏览器运行。代码风格检查和格式化（如：ESLint）【建议选择】vue-router（Vue 路由）【建议选择】。vuex（Vue 的状态管理模式）。E2E（端到端）测试。概述（来源于官方文档）
Vue--》超详细教程——vue-cli脚手架的搭建与使用
ztK63LrD的博客
11-14 5532
它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。，基于vue-cli这个系统，我们就可以快速搭建好“（英文名：Singleagepplication）简称SPA，顾名思义指的是，所有的功能与交互都在这唯一的一个页面内完成。
使用 Vue CLI 创建 Vue.js 项目的详细指南
chaosweet的博客
12-31 2100
千里之行，始于足下。
VUE-脚手架搭建
xhmico的博客
12-15 3580
vue 有两个大版本，分别是 vue-2 和 vue-3，目前新项目的话用 vue-3 的会比较多以下我会分别提供搭建 vue-2 和 vue-3 脚手架的过程。
Vue2使用脚手架创建项目
codefan※的博客
07-18 2701
先解释一下关于脚手架的概念        可以理解为像我们盖房子，需要打牢地基，也就是做一些前提准备工作，例如webpack的配置文件、node一些包的下载等等，形成项目的基本构架，这样就大大提高了项目的开发效率。试想一下，如果在你想要写一个项目的时候，需要你自己配置这些东西，心态先崩掉 前提准备——脚手架安装 可以使用编译器的终端或者cmd：npm install @vue/cli(@version) -g 建议安装cli3以上，不然
《基础篇第4章：vue2基础》：使用vue脚手架创建项目
刘大猫
05-27 1251
文章目录4.1初始化脚手架4.1.1说明4.1.2具体步骤4.1.3模板项目的结构4.1.4 创建第一个vue项目分析index.html组成部分4.1.5render函数4.1.6修改默认配置 4.1初始化脚手架 4.1.1说明 Vue脚手架是Vue官方提供的标准化开发工具（开发平台） 最新的版本是4.x 官网文档：https://cli.vuejs.org/zh/ CLI：Command Line Interface 4.1.2具体步骤 第一步（仅第一次执行）：全局安装@vue/cli。.
Vue2系列教程——vue-cli脚手架创建项目
DTCloud
05-20 1264
Vue2 vue-cli脚手架创建项目 1. 安装vue-cli npm install -g @vue/cli #安装vue-cli 3.0 vue --version #安装完vue-cli，就可以使用vue命令查询vue/cli版本，最新版4.x 2. 创建项目 vue create myapp 选择 “Default ([Vue 2] babel, eslint)”，（babel是用来将ES6的语法翻译成ES5的语法） 选择"Manually selec
VUE2 脚手架项目的基本创建，运用
qq_63730939的博客
09-09 992
主要为vue基础技术的记载运用
创建一个vue2的脚手架
May_OneDay的博客
12-06 961
首先看vue版本，使用 vue -V 来查看你的vue版本 1.打开npm命令行工具，cd到你想要的某个目录中，并输入： vue init webpack projectname (开始创建名为projectname的脚手架，官方提供了webpack-simple和webpack两种) 2.敲完命令后会引导你创建最基本的脚手架 之后基本项目结构就创建好了： 只需要关心src目录中的内容就好: assets: 存放图片、音频等一切静态资源 components: 存放所有的vu.
Vue2基础教程(脚手架版)
qq_57319760的博客
09-14 6363
本文讲解使用Vue脚手架进行Vue2学习，适合学习完一遍vue2基础的人进行复习
Vue脚手架仿写购物街项目详细解析
1. **Vue脚手架（Vue CLI）**: Vue脚手架是Vue.js官方提供的标准化开发工具（CLI），可用来快速搭建Vue项目的基础结构、开发环境和构建流程。它提供了一系列预设的配置选项，使得开发者可以方便地创建Vue应用。 2. ...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值