有坑不怕,我们继续安装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,根据提供的这个链接,少年啊,快去创造奇迹!

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值