当前位置: 首页 > news >正文

Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目

上篇请移步到Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客

上一篇博文已经对Node.js的安装与配置进行了详细介绍。

另外:文中项目存放的路径及项目名称可根据自身实际情况进行更改。

目录

三、Vue安装配置

1、搭建Vue脚手架

2、通过NPM安装Vue

(1)安装Vue脚手架

(2)查看安装的Vue版本

3、安装webpack及webpack-cli

(1)安装webpack

(2)安装webpack-cli

解决问题:webpack -v不显示版本号问题

四、新建一个默认的Vue项目

1、创建项目

2、启动项目


三、Vue安装配置

Vue:是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。

1、搭建Vue脚手架

直接下载并用<script>标签引入,Vue 会被注册为一个全局变量。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2、通过NPM安装Vue

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

(1)安装Vue脚手架

前提是已安装配置了npm或者cnpm,然后在Cmd命令行窗口中输入如下命令安装Vue脚手架,

npm install @vue/cli -g
或者
cnpm install @vue/cli -g

执行cnpm install @vue/cli -g后,如下图所示,

似乎没有成功,不知道为什么。

重新试试,执行npm install @vue/cli -g后,如下图所示,

(2)查看安装的Vue版本

cmd命令行窗口输入vue -V查看@vue/cli是否安装成功,

vue -V

 

3、安装webpack及webpack-cli

(1)安装webpack

由于webpack5及以上的版本变动较大,所以如果是采用vue3创建vue项目,用webpack4的版本更能互相的兼容。此处安装webpack@4.42.0版本,命令如下:

cnpm install webpack@4.42.0 -g
或者
npm install webpack@4.42.0 -g

使用cnpm install webpack@4.42.0 -g安装成功后,cmd命令行窗口如下图所示: 

使用npm install webpack@4.42.0 -g安装成功后,cmd命令行窗口如下图所示:

安装成功后,可以在文件夹路径下找到该模块, 

 

(2)安装webpack-cli

另外:由于webpack的版本需要webpack-cli一起配合使用,执行如下命令安装webpack-cli:

cnpm install webpack-cli -g
或者
npm install webpack-cli -g

使用cnpm install webpack-cli -g,cmd命令行窗口执行结果,如下所示,

使用npm install webpack-cli -g,cmd命令行窗口执行结果,如下图所示,

 

 安装成功后,可以在文件夹路径下找到该模块,

 

(3)检查是否安装成功

cmd命令行窗口输入如下命令:

webpack -v

解决问题:webpack -v不显示版本号问题

原因:webpack 安装后,但是查询不到对应版本号而输出如上信息,显示如下奇怪的内容,说明还是没能成功安装。

尝试(没成功)

(1)试了这种方法,但是没有成功。

npm install webpack@4.42.0 -g  #@后面加上需要安装的版本号

再次查询便能成功查询到 webpack 的版本号了。

(2)运行命令npm list --depth=0 -g 检测下webpack、webpack-cli等版本兼容情况,

webpack是全局安装了的,cmd输入这个命令可以查看版本号,

npm list --depth=0 -g

此时,检测无报错,说明webpack、webpack-cli版本已匹配。

(3)运行npm init -y,在项目的根目录创建一个package.json文件,

# 从当前目录中提取的信息生成默认的package.json
npm init -y
# 或
npm init --yes

出现一串文本表示执行成功。

 目前为止,没找到解决办法。。。。

四、新建一个默认的Vue项目

1、创建项目

(1)首先进入【D:\my\vue-code】路径下(此处创建在D:\my\vue-code下,请根据自身实际情况更改),然后进入此文件夹的cmd命令行窗口,

执行如下命令创建一个名为【hello-vue】的Vue项目:

点击回车后,会自动下载所需文件(包括node_modules),创建成功后,如下图所示,

2、启动项目

(1)首先进入【D:\my\vue-code\hello-vue】文件夹,然后进入此文件夹的cmd命令行窗口,执行如下指令运行该项目:

npm run serve

(2)复制任意一个路径,用浏览器打开,

 App running at:- Local:   http://localhost:8080/- Network: http://172.30.115.152:8080/

在浏览器打开http://localhost:8080/进行访问,效果如下图所示: 

如上图,说明项目启动成功了。

相关文章:

Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目

上篇请移步到Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 上一篇博文已经对Node.js的安装与配置进行了详细介绍。 另外&#xff1a;文中项目存放的路径及项目名称可根据自身实际情况进行更改。 目录 三、Vue安装配置 1、搭建Vue脚手架 2、通过NPM安装Vue …...

TIA博途Wincc中自定义配方画面的具体方法示例

TIA博途Wincc中自定义配方画面的具体方法示例 前面和大家分享了通过TIA博途自带的配方视图组态配方功能的具体方法,具体内容可参考以下链接中的内容: TIA PORTAL wincc中配方recipe组态及配方视图的使用方法 但是,使用配方视图的时候感觉不是很方便,同时一部分使用人员也感…...

Java反射系列--方法大全

原文网址&#xff1a;Java反射系列--方法大全_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Java反射相关的方法。 Class相关方法 方法 说明 getName() 返回String形式的该类的名称。 newInstance() 根据某个Class对象产生其对应类的实例&#xff0c;它调用的是此类的默认构…...

LeetCode 169. 多数元素

LeetCode 169. 多数元素 难度&#xff1a;easy\color{Green}{easy}easy 题目描述 给定一个大小为 nnn 的数组 numsnumsnums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊n/2⌋⌊ n/2 ⌋⌊n/2⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给…...

来了,metaIPC1.0

metaRTC推出metaIPC正式版1.0&#xff0c;基于metaRTC6.0最新版二次开发&#xff0c;metaIPC是为嵌入式/摄像头量身打造的webRTC版IPC Camera&#xff0c;可安装在国内大多数Soc芯片上&#xff0c;如在君正/瑞芯微/MSTAR/海思等等已经有多个成熟产品应用。 New Feature 支持M…...

WireShark如何进行USB包协议分析

USB协议学习的步骤之一就是从抓包看协议通信,进而学习usb设备开发是怎么回事。这里发现一个工具就是wireshark。 WireShark如果要抓取usb设备的包,需要在安装的时候,选择usbpcap一并进行安装。...

蒙特卡洛随机模拟

蒙特卡洛随机模拟 简介 蒙特卡洛模拟是在计算机上模拟项目实施了成千上万次&#xff0c;每次输入都随机选择输入值。由于每个输入很多时候本身就是一个估计区间&#xff0c;因此计算机模型会随机选取每个输入的该区间内的任意值&#xff0c;通过大量成千上万甚至百万次的模拟…...

Android从屏幕刷新到View的绘制(三)之Handler异步消息与同步屏障

0. 相关分享 Android从屏幕刷新到View的绘制&#xff08;一&#xff09;之 Window、WindowManager和WindowManagerService之间的关系 Android从屏幕刷新到View的绘制&#xff08;二&#xff09;之Choreographer、Vsync与屏幕刷新 1. 相关类 Handler Handler中维护着它所在的…...

最新版axios@1.3.x取消请求-AbortController-初体验-番茄出品

最新版axios1.3.x取消请求-AbortController-初体验-番茄出品 start 前文提到&#xff0c;axios 中的取消请求&#xff0c;包含两种方式&#xff1a; AbortController&#xff1b;CancelToken&#xff1b; 上篇文章讲解了 CancelToken&#xff0c;今天这篇文章来了解一下 Abor…...

Git的简述

Git 文章目录GitGit概述版本控制工具集中式管理控制工具分步式管理控制工具控制机制Git和代码托管中心安装Git软件Git常用命令Git概述 Git是一个免费的、开源的分步式版本控制系统&#xff0c;可以快速的处理从小型到大型的各种项目 Git 易于学习&#xff0c;占地面积小&…...

webpack实战,手写loader和plugin

序言 对于 webpack 来说&#xff0c; loader 和 plugin 可以算是需求程度最为广泛的配置项了。但是呢&#xff0c;单单止步于配置可能还不够。如果我们自己有时候想要 diy 一个需求&#xff0c;但是 webpack 又没有相关的 loader 和 plugin 。那这个时候我们可能就得开始造点轮…...

STM32CubeMX按键模块化 点灯

本文代码使用 HAL 库。 文章目录前言一、按键原理图二、CubeMX 创建工程三、代码讲解&#xff1a;1. GPIO的输入HAL库函数&#xff1a;2. 消抖&#xff1a;3. 详细代码四&#xff0c;实验现象&#xff1a;总结前言 我们继续讲解 stm32 f103&#xff0c;这篇文章将详细 为大家讲…...

C#专栏目录(长期更新)

文章目录C# 基础C#进阶C#应用WPF基础WPF 3D小游戏C# 基础 1996年&#xff0c;微软用年薪三百万美刀的价格从Borland挖来了大神海尔斯伯格&#xff0c;开始了J开发&#xff0c;用以对抗Java。但SUN公司认为此举违反了Java开发平台的中立性&#xff0c;对微软提出诉讼。C#正是在…...

BurpSuite配置抓取HTTPS数据包

简介 我们在渗透测试的过程中&#xff0c;经常会遇到HTTPS的网站&#xff0c;Burp默认是没有办法抓取HTTPS的包的&#xff0c;想要让Burp抓取Https的包也很好办&#xff0c;只需要浏览器安装相关的证书即可&#xff0c;接下来将配置过程做一个记录。 前置条件&#xff1a; 1.J…...

图片转base64格式返回给前端,前端如何展示?

图片以base64形式在页面上展示出来在这里要说到Data URI scheme&#xff0c;它可以直接将一些小的数据直接嵌入到网页中&#xff0c;不需要再引入。支持格式如下data:, 文本数据data:text/plain, 文本数据data:text/html, HTML代码data:text/html;base64, base64编码的HTML代码…...

C++入门知识【超详解】

目录1.认识Chello worldC关键字2.命名空间3.std标准库4.输入输出5.缺省参数6.函数重载7.引用7.1引用的概念7.2引用的场景1.作参数2.作返回值7.3引用的注意点7.4指针和引用的区别8.auto关键字9.基于范围的for循环10.内联函数10.1概念10.2特征11. C98中的指针空值1.认识C hello …...

零基础、非计算机系学Python该如何上手?

首先我觉得要放平心态&#xff0c;不用过多去纠结是不是专业出身这回事。 想学那就认真去学&#xff0c;我们最终目标是掌握Python这门技能。 非计算机专业同时零基础&#xff0c;想自学Python该如何上手&#xff1f;分享我自学Python的几点建议吧。 1、重视基础 Python是一…...

关于 vue3 模板引用

文章目录前言1.访问模板引用2.v-for中的模板引用3.组件上的ref前言 如果我们需要直接访问组件中的底层DOM元素&#xff0c;可使用vue提供特殊的ref属性来访问 1.访问模板引用 在视图元素中采用ref属性来设置需要访问的DOM元素 a. 该ref属性可采用字符值的执行设置 b. 该ref属…...

Redis | 安装Redis和启动Redis服务

目录 一、Redis简介 1.1 简介 二、Redis安装 2.1 Windows安装Redis 2.2 Linux安装Redis 三、Redis服务启动和停止 3.1 Windows启动Redis服务 3.2 Linux启动Redis服务 四、Redis设置密码远程连接 4.1 为Redis登陆设置密码 4.2 设置Redis允许远程连接 五、Redis常…...

博客要考虑的最佳WordPress主题

有太多的选择会瘫痪你做决定的能力。有太多的WordPress主题&#xff0c;但仅仅只需要一个并且它是要合适的。我们建立了数十个 WordPress 博客并安装了数百个主题。根据我们所有的经验&#xff0c;我们发现Newspaper是大多数用户的最佳WordPress博客主题。这个自适应、强大的主…...

C 学习笔记 —— 函数指针

函数指针 上面的第二个char (* f) (int);写法就是函数指针的声明&#xff1b; 首先&#xff0c;什么是函数指针&#xff1f;假设有一个指向 int类型变量的指针&#xff0c;该指针储存着这个int类型变量储存在内存位置的地址。 同样&#xff0c;函数也有地址&#xff0c;因为函…...

FastDDS-3. DDS层

3. DDS层 eProsima Fast DDS公开了两个不同的API&#xff0c;以在不同级别与通信服务交互。主要API是数据分发服务&#xff08;DDS&#xff09;数据中心发布订阅&#xff08;DCPS&#xff09;平台独立模型&#xff08;PIM&#xff09;API&#xff0c;简称DDS DCPS PIM&#xf…...

9.2 IGMPv2

实验目的 &#xff08;1&#xff09; 熟悉IGMPv2的应用场景 &#xff08;2&#xff09; 掌握IGMPv2的配置方法 实验拓扑 实验拓扑如图9-17所示&#xff1a; 图9-17&#xff1a;IGMPv2 实验步骤 配置IP地址&#xff08;请参考上一个实验&#xff09;运行IGP&#xff…...

巨头混战,抢着“兜底”自动驾驶安全

诚然&#xff0c;中国汽车行业的发展绝对不会拘泥于电动化&#xff0c;必定会在电动化的基础上&#xff0c;迎接下半场的快速智能化。 2021年6月&#xff0c;长城汽车线控底盘全球首次发布。 彼时&#xff0c;长城汽车技术副总裁宋东先宣布&#xff0c;整合了线控转向、线控制…...

RightCapital 第一轮面试题

现在我们就马上开始吧&#xff01; 答案在文末 JavaScript 是一门单线程的静态类型语言&#xff08;单选题&#xff09; 正确 错误 在 JavaScript 中下面哪种类型的值是不可变的&#xff08;immutable&#xff09;&#xff08;单选题&#xff09; Object Symbol Array Date …...

Python曲线肘部点检测-膝部点自动检测

文章目录一. 术语解释二. 拐点检测肘部法则是经常使用的法则。很多时候&#xff0c;可以凭人工经验去找最优拐点&#xff0c;但有时需要自动寻找拐点。最近解决了一下这个问题&#xff0c;希望对各位有用。一. 术语解释 **肘形曲线(elbow curve)**类似人胳膊状的曲线&#xff…...

【算法题】最大矩形面积,单调栈解法

力扣&#xff1a;84. 柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 题意很简单&#xff0c;翻译一下就是&#xff1a;求该图中…...

活动策划|深度分析年货节活动该如何策划!

四月初&#xff0c;不平凡的初春开始恢复往日的平静。对于新零售行业&#xff0c;疫情的缓解也逐渐平稳生态链的运转。2020年新零售的格局在洗礼后&#xff0c;业务的聚焦点也从前端促销转移到后端履约的体验闭环&#xff0c;同时很大程度的推进企业在危机公关下的应对。618大促…...

Idea启动遇到 Web server failed to start. Port 8080 was already in use. 报错

Idea启动遇到问题-记录 报错英文提示&#xff1a; APPLICATION FAILED TO START Description: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to liste…...

Python3中zip()函数知识点总结

1.引言 在本文中&#xff0c;我将带领大家深入了解Python中的zip()函数&#xff0c;使用它可以提升大家的工作效率。 闲话少说&#xff0c;我们直接开始吧&#xff01; 2. 基础知识 首先&#xff0c;我们来介绍一些基础知识点&#xff1a; Python中的某些数据类型是不可变的…...