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

【创建vue项目的两种方式】

Vue环境搭建

    • NodeJs安装包
      • 安装淘宝镜像
    • 环境搭建
      • webpack安装
      • 全局安装@vue/cli
      • 查看模板
      • 创建项目
        • 1.webpack
        • 2. vue-cli

NodeJs安装包

下载链接:官网链接
在这里插入图片描述下载下来后,直接傻瓜式的安装即可。
通过在cmd控制台输入以下命令查看是否安装成功

node -v

因为适配某些依赖的原因,我本地使用了16.18.1的版本。
在这里插入图片描述

安装淘宝镜像

npm的服务器是外国的,所以有时候我们安装“模块”会超级慢,所以配置一个国内服务器,速度会很快。

#解决npm速度慢
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后,通过以下命令查看版本

cnpm -v

环境搭建

webpack安装

安装命令:

#不指定版本的命令npm install webpack
# 为了避免版本冲突,尽量指定版本
# cnpm安装速度更快
cnpm install webpack@3.6.0 -g#  -g 表示是否进行全局安装,因为有些项目特有的用特定的版本

查看是否安装成功:

webpack -v

全局安装@vue/cli

官网指南
安装命令:

cnpm install -g @vue/cli#  -g 表示是否进行全局安装,因为有些项目特有的用特定的版本

通过在控制台输入以下命令查看是否安装成功

# vue -V或vue --version
vue --version

npm i -g @vue/cli

如果安装失败,可以使用管理员的身份运行cmd
在这里插入图片描述

查看模板

查看当前可以创建哪些模板的工程

vue list

在这里插入图片描述

创建项目

目前创建vue工程的方式有两种,一种是webpack创建,另外一种是使用vue-cli创建

1.webpack

创建命令:

#注:项目名不能大写,不能使用中文 
vue init webpack myvue1

注意:安装时可能提示(如下)就使用命令安装一下:cnpm i -g @vue/cli-init
需要先安装cli-init

注意:这种方式有时候服务器链接不上。处理方案服务器链接不上

2. vue-cli

另外一种创建项目的方式

vue create myvue2

会要求选择对应的vue版本
在这里插入图片描述
下载完成后,得到下面的目录
在这里插入图片描述

相关文章:

【创建vue项目的两种方式】

Vue环境搭建 NodeJs安装包安装淘宝镜像 环境搭建webpack安装全局安装vue/cli查看模板创建项目1.webpack2. vue-cli NodeJs安装包 下载链接:官网链接 下载下来后,直接傻瓜式的安装即可。 通过在cmd控制台输入以下命令查看是否安装成功 node -v因为适配某…...

2. HarmonyOS应用开发DevEcoStudio准备-1

2. HarmonyOS应用开发DevEcoStudio准备-1 下载 DevEco Studio 进入HUAWEI DevEco Studio产品页产品页。 单击下载列表右侧的按钮,下载 DevEco Studio。 安装 DevEco Studio 下载完成后,双击下载的 deveco-studio-xxxx.exe,进入 DevEco St…...

《二叉树》——3(层序遍历)

目录 前言: 层序遍历: 解析: 前言: 本文主讲链式二叉树的层序遍历,在前面的张篇blog我们初步实现了链式二叉树递归部分的内容,对于递归算法的学习和思维方式我们仍然需要不断加强,所以将对链式二叉树进行…...

HarmonyOS应用开发者基础认证考试答案

HarmonyOS应用开发者基础认证考试答案 一、判断题 1.Ability是系统调度应用的最小单元,是能够完成一个独立功能的组件。一个应用可以包含一个或多个Ability。 正确(True) 2.所有使用Component修饰的自定义组件都支持onPageShow,onBackPress和onPageHide…...

【前端素材】bootstrap3 实现地产置业公司source网页设计

一、需求分析 地产置业公司的网页通常是该公司的官方网站,旨在向访问者提供相关信息和服务。这些网页通常具有以下功能: 公司介绍:网页通常包含有关公司背景、历史、核心价值观和使命等方面的信息。此部分帮助访问者了解公司的身份和目标。 …...

C++ 数论相关题目 博弈论 Nim游戏

给定 n 堆石子,两位玩家轮流操作,每次操作可以从任意一堆石子中拿走任意数量的石子(可以拿完,但不能不拿),最后无法进行操作的人视为失败。 问如果两人都采用最优策略,先手是否必胜。 输入格式…...

机器学习---无偏估计

1. 如何理解无偏估计 无偏估计:就是我认为所有样本出现的概率⼀样。 假如有N种样本我们认为所有样本出现概率都是 1/N。然后根据这个来计算数学期望。此时的数学期望就是我们平常讲 的平均值。数学期望本质就 是平均值。 2. 无偏估计为何叫做“无偏”&#xff1…...

C语言基础13

今天是学习嵌入式相关内容的第十四天,以下是今日所学内容 1.结构体: 1.结构体类型定义 2.结构体变量的定义 3.结构体元素的访问 4.结构体的存储 内存对齐 结构体整体的大小必须为最大基本类型长度的整数倍 5.结构体作为函数参数 值传递 练习:定…...

【Java】Maven配置加载到全局

Maven配置加载到全局 <build><plugins><plugin><artifactId>maven-resources-plugin</artifactId><configuration><encoding>utf-8</encoding><useDefaultDelimiters>true</useDefaultDelimiters></configura…...

右手螺旋线定则

通电螺线管中的安培定则&#xff08;安培定则二&#xff09;&#xff1a;用右手握住通电螺线管&#xff0c;让四指指向电流的方向&#xff0c;那么大拇指所指的那一端是通电螺线管的N极。...

2024 高级前端面试题之 React 「精选篇」

该内容主要整理关于 React 模块的相关面试题&#xff0c;其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。 React模块精选篇 1. 如何理解React State不可变性的原则2. JSX本质3. React合成事件机制4. setState和batchUpdate机制5. 组件渲染和更新过程6. Diff算法相…...

OSPF协议解析及相关技术探索(C/C++代码实现)

OSPF&#xff08;开放最短路径优先&#xff09;是一种用于自治系统&#xff08;AS&#xff09;内部的路由协议&#xff0c;它是基于链路状态算法的。OSPF的设计目的是为了提供一种可扩展、快速收敛和高效的路由解决方案。 OSPF概念和特点 概念 自治系统&#xff08;AS&#…...

如何恢复已删除的照片?

在这篇综合文章中发现恢复丢失照片的有效且免费的方法。无论您使用的是智能手机、iPhone、Windows 计算机、Mac、SD 卡还是数码相机&#xff0c;我们都提供有关如何恢复已删除照片的分步说明。此外&#xff0c;学习一些有价值的技巧&#xff0c;以防止将来意外删除照片。 意外…...

VMware虚拟机安装macOS

VMware虚拟机安装macOS 文章目录 VMware虚拟机安装macOS先看效果一、准备工作①&#xff1a;镜像资源下载②&#xff1a;虚拟机③&#xff1a;安装macOS所必要的插件 二、开始安装①&#xff1a;创建新的虚拟机②&#xff1a;自定义硬件③&#xff1a;开启虚拟机 先看效果 一、…...

API管理协作工具:Apipost

相信无论是前端&#xff0c;还是后端的测试和开发人员&#xff0c;都遇到过这样的困难。不同工具之间数据一致性非常困难、低效。多个系统之间数据不一致&#xff0c;导致协作低效、频繁出问题&#xff0c;开发测试人员痛苦不堪。 API管理的难点在哪&#xff1f; 开发人员在 …...

GPT-SoVITS 本地搭建踩坑

GPT-SoVITS 本地搭建踩坑 前言搭建下载解压VSCode打开安装依赖包修改内容1.重新安装版本2.修改文件内容 运行总结 前言 传言GPT-SoVITS作为当前与BertVits2.3并列的TTS大模型&#xff0c;于是本地搭了一个&#xff0c;简单说一下坑。 搭建 下载 到GitHub点击此处下载 http…...

【教学类-34-02】20240130纸尺2.0 (A4横版5条,刻度25*5=125CM,有图案)

作品展示&#xff1a; 背景需求&#xff1a; 设计了纸尺的基本模板 【教学类-34-01】20240130纸尺1.0 &#xff08;A4横版5条&#xff0c;刻度25*5125CM&#xff09;-CSDN博客文章浏览阅读194次&#xff0c;点赞5次&#xff0c;收藏5次。【教学类-34-01】20240130纸尺1.0 &am…...

iText操作pdf

最近有个任务是动态的创建pdf根据获取到的内容&#xff0c;百度到的知识点都比较零散&#xff0c;官方文档想必大家也不容易看懂。下文是我做出的汇总 public class CreatePdfUtils {public static void create(){//准备File file new File("C:\\code\\base-project-back…...

关于SQLite 的下载与使用。配合python

win系统下&#xff1a; SQLite Download Page Precompiled Binaries for Windows sqlite-tools-win-x64-3450000.zip (4.77 MiB) 解压后&#xff0c;找个位置。然后设置环境变量指定位置。 可以手动建立.db文件。 也可以通过代码建立&#xff1a; 如下代码就是建立一个db文件。…...

java面向对象基础(面试)

一、面向对象基础 1. 面向对象和面向过程的区别 面向过程把解决问题的过程拆成一个个方法&#xff0c;通过一个个方法的执行解决问题。面向对象会先抽象出对象&#xff0c;然后用对象执行方法的方式解决问题。 2.创建一个对象用什么运算符?对象实体与对象引用有何不同? n…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...