【前端 19】使用Vue-CLI脚手架构建Vue2项目

终末圆

已于 2024-07-29 21:28:48 修改

阅读量1k

点赞数 15

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 vue.js javascript 前端框架开发语言 ecmascript

于 2024-07-29 21:12:18 首次发布

本文链接：https://blog.youkuaiyun.com/delepaste/article/details/140781347

使用Vue CLI构建Vue 2项目

请添加图片描述

引言

Vue.js 是一个构建用户界面的渐进式JavaScript框架，以其轻量级和易用性受到前端开发者的广泛喜爱。Vue CLI（Vue Command Line Interface）是一个基于Vue.js进行快速开发的完整系统，提供了零配置的项目启动、开发调试、打包部署等功能。本文将详细介绍如何安装Vue CLI，并使用它构建一个Vue 2项目，同时解析Vue CLI构建出的项目目录结构。

安装Vue CLI

首先，确保你的开发环境中已经安装了Node.js和npm（Node.js的包管理器）。你可以通过运行node -v和npm -v来检查它们是否已安装及安装的版本。

接下来，打开你的终端或命令提示符，运行以下命令来全局安装Vue CLI：

npm install -g @vue/cli  
# 或者，如果你使用yarn作为包管理器  
yarn global add @vue/cli

安装完成后，你可以通过运行vue --version来验证Vue CLI

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

终末圆

关注关注

15
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

基于vue-cli创建vue2项目

PY123456PY123456的博客

07-10

850

首先在要创建的vue项目的文件夹进入终端。如图所示，在这里输入cmd进入命令提示符。基于vue-cli快速生成工程化的Vue项目：如图所示，我创建了一个名为demo-first的vue项目。接下来选择项目预设，这里建议手动选择需要安装的预设，选择好后按enter键进入下一步接下来选择预设，这里只选择Babel和css预处理器就好，Router和Linter/Formatter等后面学了再选。Linter/Formatter是来约束代码风格的。（这里空格键来控制选中，enter键进入下一步）接下

0到1搭建前端Vue2项目

热门推荐

逆水行舟不进则退

04-02

1万+

使用vue-cli创建vue2项目（详解）说明！！！：Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。所以使用脚手架创建vue2的项目，需要先全局安装一个桥接工具，然后创建一个vue2的项目：第一步：搭建node运行环境，根据操作系统选择相应安装包下载地址：https://nodejs.org/en/download/ 检验是否安装成功，命令行中直接输入node -v，返回版本号即可。第二步：安装webpack npm i

详解如何使用vue-cli脚手架搭建Vue.js项目

10-19

- 使用vue-cli脚手架创建的项目已经包含了热加载、代码检查、单元测试和CSS分离等现代Web开发所需的功能。 - Vue.js项目的目录结构是预设好的，这包括源码、资源、构建配置等不同部分的文件夹。 - 在进行项目开发时...

浅谈VUE-CLI脚手架热更新太慢的原因和解决方法

01-19

用vue-cli构建了项目之后在webstorm开发，用npm run dev跑本地服务，经常修改之后在浏览器刷新没反应，偶尔才会有刷新，需要重新跑一遍npm run dev才会更新，这是怎么回事呢？解决方法 webstorm保存的时候会先保存...

thinkphp集成前端脚手架Vue-cli的教程图解

01-21

本文主要介绍怎么在Thinkphp中集成后台前端脚手架框架Vue-Cli。一.安装Vue-Cli到Thinkphp中 1.1.1 检查是否安装node 终端输入npm的指令如果没有安装的话会提示未找到指令正确的姿势如下图,说明已经安装了node...

使用Vue-CLI创建vue2项目

hvhchfhfj的博客

04-03

349

使用Vue-CLI创建vue2项目。

使用vue cli创建vue2项目

x65456的博客

04-08

1200

4这几个的意思是选择你需要的东西。Babel的意思把es6降级到浏览器能识别的语法。一般按下面的选就行。六：现在有两种方法创建vue2项目，一种是在cmd里，一种是在vscode或webstorm的集成终端里。4然后就跟cmd里一样输入输入vue create hello-world按回车。1.打开这个文件夹在地址里输入cmd按回车，然后就出来cmd界面。意思是手动选择特性，前几个选项的意思是默认的。2打开vscode，把它拖到左边，然后右击打开集成终端。9.选第一个，意思是代码规则，在保存的时候校验。

使用 vue-cli 脚手架创建一个vue2的项目吧

qq_45437773的博客

04-21

432

使用 vue-cli 脚手架创建一个vue2的项目，配置一些校验问题

使用vuecli创建vue2项目

weixin_44191318的博客

11-23

281

使用vue-cli搭建vue2版本的基础项目

VUE2创建项目

csdn_HPL的博客

04-17

4508

模式：URL 中会带有 “#” 符号，如http://example.com/#/home ，“#” 后面的部分是路由的路径，它的改变不会引起页面的重新加载，浏览器会根据 hash 值的变化触发hashchange事件，Vue Router 利用这个特性实现路由跳转。：也是一款流行的 CSS 预处理器，和 Sass 类似，提供变量、混合、嵌套规则等功能，语法简洁，在大型项目中使用可以有效组织和管理 CSS 代码，并且与许多前端框架和构建工具都有良好的集成。：代表 Vue 2 版本。

Vue-cli创建Vue2项目中的各步骤配置解析

xiaozhong159的博客

03-14

1772

小tips：我们在创建步骤的第九步会提示是否需要将当前选择的配置保存为一个预设模板（preset），保存后，我们可以找到C盘用户目录下的.vuerc文件，对预设的模板进行删除。为了描述各配置含义，不选择脚手架默认提供的模板，选择Manually select features（手动选择配置），使用⬆⬇选择，回车确认。因为本人主攻方向是后端，对前端了解远远不够，出于工作需要，需要自己搭建一个vue2项目，在此对搭建的一些过程进行纪录。如果你的代码不符合规范，会在保存时收到相应的警告或错误提示。

vue-cli创建vue2或vue3新项目步骤【留底收藏】

刻痕

12-24

8359

vue-cli创建vue2或vue3新项目步骤 1. 安装：node(已安装忽略，命令行：node -v 检查是否成功）2.cnpm或 yarn安装（非必须，npm也可以的）yarn安装：npm install -g yarn 查看版本：yarn -v cnpm安装：npm install -g cnpm -registry=https://registry.npm.taobao.org 查看版本：cnpm -v （备注：不要用npm install cnpm -g安装）...

使用vue-cli创建Vue2自定义项目步骤

m0_59250071的博客

11-08

812

Vue CLI 是 Vue 官方提供的一个全局命令工具。Vue2.x使用vue-cli创建Vue项目的步骤

实验二学习Vue-cli的安装和使用实验学时：2 实验类型：设计一、目的与任务目的：学习基于Vue-cli的安装和使用任务: 完成基于Vue-cli脚手架的搭建并使用二、内容、要求与安排方式 1、实验内容与要求：首先需要在官网安装配置、Node.js环境之后安装好NPM包管理工具通过npm指令安装Vue-cli脚手架 安装成功后通过vue create xxx 构建Vue-cli项目项目构建成功之后通过运行指令使用项目要求通过该实验的练习，理解掌握Vue-cli的安装和基本使用，了解Vue-cli脚手架的构建目录具体操作步骤： 1.安装配置node.js和NPM包管理工具 2.通过Npm安装Vue-cli脚手架 3.通过vue指令创建Vue-cli项目 4.通过运行指令使用Vue-cli脚手架 2、实验安排方式：上机编码。

03-18

<think>好的，我现在需要帮用户处理关于“实验二学习Vue-cli的安装和使用”的请求。首先，我要仔细阅读用户提供的实验内容，理解他们的需求。用户希望得到一份详细的实验指导，包括安装步骤、项目创建和运行等。同时，用户可能是一名教师或学生，需要结构清晰、步骤明确的实验指南，方便在课堂上或自学时使用。首先，我需要回顾之前用户的历史对话。上一次用户询问了Vue CLI的安装和使用，我提供了基本的安装步骤和创建项目的方法，并回答了相关问题。现在用户提供的实验要求更详细，包含了实验的目的、任务、内容和具体步骤，可能还需要更结构化的指导，比如分步骤的说明、代码示例以及注意事项。接下来，我需要确保回答符合用户提供的实验要求。实验分为四个主要步骤：安装Node.js和npm、安装Vue CLI、创建项目、运行项目。每个步骤都需要详细的说明和命令示例，确保学生能够按照步骤操作。此外，用户提到要理解目录结构，所以可能需要解释生成的项目目录，帮助学生了解各个文件和文件夹的作用。同时，用户可能希望实验指导中包含验证步骤，比如如何检查安装是否成功，如何确认项目运行正常。需要注意可能的常见问题，例如旧版本Vue CLI的存在如何处理，这在上次对话中已经涉及，可能需要在这里简要提及或引导参考之前的问题。另外，实验安排方式是上机编码，所以步骤需要具体、可操作，避免遗漏关键细节。例如，在安装Node.js和npm时，需要提醒用户下载正确的版本，并验证安装是否成功。安装Vue CLI时，要使用-g全局安装，并检查版本。创建项目时，可能需要解释默认配置和手动配置的区别，但根据实验要求，可能建议使用默认配置以简化步骤。最后，要确保使用中文，代码块使用正确的格式，行内数学表达式用$...$，独立公式用$$...$$，但在这个问题中可能不太涉及数学公式，所以主要关注代码块的正确格式。另外，结构要清晰，分步骤说明，使用标题和子标题，帮助用户逐步完成实验。可能的遗漏点包括：是否需要在安装Vue CLI前卸载旧版本？用户之前的问题中提到过，所以可能需要在这里加入提示，比如如果之前安装过旧版，使用npm uninstall -g vue-cli来卸载，然后再安装新版。此外，项目运行后的访问步骤，可能需要详细说明浏览器访问的URL，以及如何停止服务。总结，我需要按照实验的结构，分步骤详细说明，提供命令示例，解释目录结构，并包含验证步骤和常见问题提示，确保学生能够顺利完成实验，达到理解Vue CLI安装和使用的目的。</think>以下是针对 **实验二：学习Vue-cli安装和使用** 的详细实验指导，按照实验报告格式整理： --- ### **实验二：学习Vue-cli的安装和使用** **实验学时：2** **实验类型：设计** --- #### **一、目的与任务** 1. **目的** - 掌握基于Vue-cli的安装与使用流程。 - 理解Vue-cli脚手架在项目开发中的作用。 2. **任务** - 完成Node.js和npm的环境配置。 - 安装Vue-cli脚手架工具。 - 使用Vue-cli创建并运行一个基础项目。 --- #### **二、实验内容与要求** 1. **核心步骤** - 安装Node.js和npm包管理工具。 - 通过npm全局安装Vue-cli脚手架。 - 使用`vue create`命令创建Vue项目。 - 运行项目并验证结果。 2. **具体要求** - 掌握环境配置与工具安装方法。 - 熟悉Vue-cli生成的项目目录结构。 - 能够独立完成项目创建与启动。 --- #### **三、实验步骤与操作** ##### **步骤1：安装Node.js和npm** 1. **下载Node.js** - 访问官网：[Node.js下载页](https://nodejs.org/zh-cn/) - 选择**长期支持版本（LTS）**下载并安装。 2. **验证安装** - 打开终端（Windows：CMD/PowerShell；Mac/Linux：Terminal），输入以下命令： ```bash node -v # 查看Node.js版本 npm -v # 查看npm版本 ``` - 若显示版本号（如：`v16.14.0`），则安装成功。 --- ##### **步骤2：安装Vue-cli脚手架** 1. **全局安装Vue-cli** - 在终端执行以下命令： ```bash npm install -g @vue/cli ``` - `-g`表示全局安装，确保所有项目均可使用。 2. **验证安装** - 输入命令检查版本： ```bash vue --version ``` - 若显示版本号（如：`@vue/cli 5.0.8`），则安装成功。 --- ##### **步骤3：创建Vue-cli项目** 1. **初始化项目** - 在目标目录下执行命令（以项目名`my-vue-project`为例）： ```bash vue create my-vue-project ``` 2. **选择配置** - **默认配置（推荐）**：按回车键选择`Default (Vue 3)`。 - **手动配置**：选择`Manually select features`（实验可选默认配置）。 3. **等待依赖安装** - 脚手架会自动生成项目文件并安装依赖包。 --- ##### **步骤4：运行项目** 1. **进入项目目录** ```bash cd my-vue-project ``` 2. **启动开发服务器** ```bash npm run serve ``` - 终端会输出本地访问地址（如：`http://localhost:8080/`）。 3. **验证运行结果** - 浏览器打开`http://localhost:8080`，若显示Vue欢迎页面，则项目运行成功。 --- ##### **步骤5：理解项目目录结构** 生成的目录关键文件说明： - `src/`：源代码目录（组件、路由等均在此）。 - `public/`：静态资源（HTML模板、图标等）。 - `package.json`：项目依赖配置。 - `node_modules/`：依赖包存放位置。 --- #### **四、实验总结** 1. **核心掌握** - 环境配置（Node.js、npm、Vue-cli）。 - 脚手架项目创建与运行流程。 - 项目目录结构的含义。 2. **常见问题** - **安装失败**：检查网络或切换npm镜像源（`npm config set registry https://registry.npm.taobao.org`）。 - **旧版本冲突**：卸载旧版Vue-cli（`npm uninstall -g vue-cli`）后重新安装。 --- #### **五、扩展思考** 1. 如何通过`vue ui`图形界面创建项目？ 2. 如何为项目添加Vue Router或Vuex？通过本实验，可快速掌握Vue-cli的基础使用，为后续复杂项目开发奠定基础。