有坑不怕,我们继续安装vue-cli。

本文详细介绍如何安装Vue.js全家桶,包括核心工具vue-cli的安装步骤,从环境准备到项目初始化全过程,适合初学者快速上手。

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

vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。
在这里,我们进行一次vue-cli的安装:
首先打开你的cmd,别告诉我你不会?你不会我告诉你啊!(win+r,输入cmd)。也可已选择你想安装vue-cli的文件夹。
在这里我选择在我桌面的LyuSen文件夹进行
在这里插入图片描述
可使用shift+右键
在这里插入图片描述
接下来正式开始了。
1、检查你自身的node版本号(或是否安装):使用 node -v
在这里插入图片描述
如过你没安装,请出门:http://nodejs.cn/download/
或版本不够:请…
1>.更新node.js版本命令:
npm install -g n
2>.升级node.js到最新稳定版
n stable
在这申明一下:vue-cli目前已经是3.x版本,这里安装3.x。
推荐环境:
node.js 8.10以上 (能用node -v 检测版本)
npm最新版本 (能用npm -v 检测版本)
在这里插入图片描述
顺便检查是否有vue及其版本号:vue -V (V大写)
在这里插入图片描述
如过你的vue没安装,或者版本过低,请…
1>、卸载旧版本(1.x或2.x)
npm uninstall vue-cli -g
2>、安装3.X版本
npm install -g @vue/cli (可用vue --vursion 或 vue -V 来检测版本)
为了演示一遍,我重新装回了2.x:
在这里插入图片描述
卸载:(等待是最漫长的…)
在这里插入图片描述
卸载完了,使用vue -V:
在这里插入图片描述
安装:(再一次等待…)
在这里插入图片描述
安装完成:
在这里插入图片描述
使用vue -V:
在这里插入图片描述

vue init webpack test (名字自定义,在这用test)
在这里插入图片描述

template下载完毕后,进入创建vue-cli
(1)project name 项目名,直接回车采用文件夹名,可自定义(不能有大写)
在这里插入图片描述
(2)Project description,项目描述,直接回车采用()内容,可自定义。

(3) Author,作者名,直接回车采用(),内容可自定义。
(4)vue build,面向对象,采用第一个,面向大多数用户。
(5)Install vue-router,是否安装vue路由,根据自身要求,默认Yes,在这我选yes。
(6) ESLint,eslint语法检查,可能会恶心到人,暂不推荐yes,不过想规范自己的,可以选择yes。在这我选择yes.之后如图,选一,回 车
在这里插入图片描述
(7)Set up unit tests,根据自身要求,可以选no,在这我选no。
(8)Setup e2e tests with Nightwatch。根据自身要求,可以选no,在这我选no。
(9)Should we run npm install for you after the project has been created? (recommended),选一,使用Npm,如图
在这里插入图片描述
然后继续等待吧…
在这里插入图片描述
安装完成后,会提示你根据黄字操作即可使用:
在这里插入图片描述

注意一下,有的人下载文件内容时候,会少下载一些东西,导致安装虽然结束却仍然报错,或者执行npm run dev 的时候报错。打开自己建的文件夹(案例种是test文件夹)
先看一眼你是否有 node_modules:
在这里插入图片描述
如果没有的,别慌,先根据黄字要求,进入自己的文件夹先:
在这里插入图片描述
然后使用 npm install 重新下载!
在这里插入图片描述
为了实例化,以下我将要先删除node_modules,然后重新安装:

删除后运行:npm run dev会是这样的:
在这里插入图片描述

所以使用npm install 重新下载:继续漫长的等待吧。
在这里插入图片描述
安装完后,再次运行npm run dev!!还是要等待!!(箭头指出的是我们输入的命令行啊!)
在这里插入图片描述

苦心人天不负!!!
在这里插入图片描述

http://localhost:8080,根据提供的这个链接,少年啊,快去创造奇迹!

在这里插入图片描述

<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的基础使用,为后续复杂项目开发奠定基础。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值