vue3项目搭建

news2025/1/15 6:58:10

一、安装 vue3.0 脚手架

(1)node安装(前端开发环境)
打开node官网:https://nodejs.org/zh-cn/
下载node并安装(安装vue3建议node在10.0版本以上)。
输入node -v可显示node版本

(2)安装vue-cli脚手架
如果之前安装了2.0的脚手架,要先卸载掉,输入:npm uninstall vue-cli -g 进行全局卸载

然后重新安装:npm install @vue/cli -g

二、第一种项目搭建过程

1.vue create + 项目名称

vue create crm_vue3

在这里插入图片描述

到默认的yarn注册表的四个连接似乎很慢。使“https://registry.npmmirror.com ”以加快安装速度,输入Y回车。

在这里插入图片描述
请选择一个预设:(使用键盘上下箭头键)
默认([Vue 3]babel,eslint)
默认([Vue 2]babel,eslint)
手动选择功能
我这里选择的是Vue 3,直接回车在这里插入图片描述
请选择一个预设:默认值([Vue 3]babel,eslint)
选择安装依赖项时要使用的包管理器:(使用键盘上下箭头键)
1.1) 使用Yarn

yarn 是 facebook 等公司在 npm v3 时推出的一个新的开源的包管理器,它的出现是为了弥补 npm 当时安装速度慢、依赖包版本不一致等问题。
yarn 有以下优点:安装速度快(并行安装、缓存)、版本统一

1.2) 使用PNPM

高性能的 npm。相比较于 yarn,pnpm 在性能上又有了极大的提升。pnpm 解决了 npm、yarn 重复文件过多、复用率低等问题。pnpm 内部使用基于内容寻址的文件系统来存储磁盘上所有的文件

1.3) 使用NPM

NodeJS 包管理和分发工具,我们可以使用它发布、安装和卸载 NodeJS 包。npm 也是 Node.js 的默认的包管理器。一旦 node 安装,npm 也会被默认安装。

这里我使用的是Yarn。回车创建项目完成
在这里插入图片描述

三、第二种使用vite搭建

执行:
npm create vite@latest
在这里插入图片描述
输入项目名:crm_vue3 回车
在这里插入图片描述选择一个框架: 使用箭头键。返回以提交。
这里选择的是Vue 回车
在这里插入图片描述
选择一个变体,这里选的是TypeScript,
在这里插入图片描述
搭建完成

四、第三种使用yarn + vite搭建

yarn create vite
在这里插入图片描述
yarn 就相当于 npm install 。
启动项目:yarn dev

五、使用pnpm + vite 搭建項目

pnpm create vite
在这里插入图片描述
输入项目名crm_vue3,选择框架vue,选择typeScript回车就搭建好了。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/501562.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用思维链(Chain-of-thoughts)提示在大型语言模型中引出推理

语言模型(LM)在NLP领域的发展速度非常快,特别是在大型语言模型(LLM)方面:当语言模型具有大量参数或权重/系数时,它们被称为“大型”。这些“大型”语言模型拥有处理和理解大量自然语言数据的能力。 LLM被用于一系列自然语言任务,…

【Java EE】-Servlet(三) MessageWall

作者:学Java的冬瓜 博客主页:☀冬瓜的主页🌙 专栏:【JavaEE】 分享: 寂寞会发慌,孤独是饱满的。——史铁生《命若琴弦》 主要内容:前后端交互接口协商,约定好,使用什么数据格式传输&…

变现 起航篇! 手把手交你用chatgpt快速生成视频!

Chatgpt 很多同学都用的非常熟练了,但是都停留在文字阶段,有没有更好玩的用法,可以深度的利用chatgpt做一些事情呢? 今天菜哥就找一个方法可以快速利用chatgpt制作视频,整个过程大概3分钟,非常有趣&#xf…

浪涌保护器的工作类型及其应用

所有电路系统中的电气设备都需要浪涌保护器的保护支持。这主要取决于器件的内部电路如何能够处理电压波动。如果器件出现输入电压波动,则会导致器件损坏,因为电源电压的波动可能对器件有害。在本文中,我们将了解什么是浪涌保护器,…

【源码+个人总结】Spring 的 三级缓存 解决 循环依赖

Spring可以通过以下方法来避免循环依赖: 构造函数注入:使用构造函数注入来注入依赖项,这是一种比较安全的方式,因为在对象创建时就会注入依赖项,可以避免循环依赖。 Setter方法注入:使用Setter方法注入依赖…

云开发谁是卧底线下小游戏发牌助手微信小程序源码

源码下载:https://download.csdn.net/download/m0_66047725/87614365 云开发谁是卧底线下小游戏源码,发牌助手微信小程序源码。 “谁是卧底OL”是一个非常有趣,风靡全国的比拼语言表述能力、知识面与想象力的游戏。 谁是卧底OL是一款由开发…

Notepad++下载安装NppFTP插件

文章目录 一、Notepad内下载安装NppFTP插件1.打开Notepad——插件——插件管理2.找到NppFTP插件——点击安装3.安装完成 二、直接下载安装NppFTP插件1.网盘下载2.将下载好的NppFTP插件放入到Notepad\plugins的插件目录下3.重启Notepad 三、Notepad下载总结 一、Notepad内下载安…

【刷题】142. 环形链表 II

142. 环形链表 II 一、题目描述二、示例三、实现3.1 方法13.2 方法2 142. 环形链表 II 一、题目描述 给定一个链表的头节点 head ,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。 如果链表中有某个节点,可以通过连续跟踪 nex…

前端学习 - 淼哥学Vue

如何判断数据是否受Vue管理,数据(对象,数组,字符串等)能否响应式更新? 即查看数据是否有对应get/set方法,数组没有对应get/set方法,故操作数组要通过其封装好的变更方法 变更方法 …

js高级知识汇总一

目录 1.怎么理解闭包? 2.闭包的作用? 3.闭包可能引起的问题? 4.变量提升 5.函数动态参数 6.剩余参数 ...(实际开发中提倡使用) 7.展开运算符 8.箭头函数 9.解构赋值(数组、对象) 10 创…

一文总结动态规划

动态规划 一、背包问题1 问题定义2 问题分类3 解题模板01背包最值问题剩余背包问题 4 例题分析LeetCode1049.最后一块石头的重量II 二、区间动态规划1 解题模板2 例题分析牛客.石子合并 总结与分析 一、背包问题 1 问题定义 如何确定一个题目是否可以用背包问题解决 背包问题…

给儿童使用护眼台灯怎么样选择更好?专家建议孩子买台灯

随着娃越长越大,虽然还在读幼儿园,但平时免不了要写写画画,之前一直在这个桌子上,台灯是一个赠送的LED货色,那个频闪啊,于是趁着当地商场活动先入了张学习桌椅,至于台灯嘛当然要选个好的了&…

21财经专访徐亚波博士:AI恒纪元时代,数说故事踏浪新征途

21世纪经济报道【创业投资】栏目,一直致力于寻找中国最有生命力和创造力的快速成长公司,探秘其背后的新兴资本推动力。为此,数说故事创始人兼CEO徐亚波博士接受了21世纪经济报道的专访。 近年来,大数据产业已经成为推动数字经济发…

【C语言】都玩过三子棋游戏把,但你知道怎么用C语言实现三子棋游戏吗?让我来手把手教你。

三子棋游戏 1.前言2.功能分析2.1主函数设计及菜单设计2.2打印棋盘与棋盘初始化2.3玩家下棋2.4电脑下棋2.5判断输赢 3.game.h头文件展示4.text.c源文件文件展示5.game.c源文件文件展示 所属专栏:C语言 博主首页:初阳785 代码托管:chuyang785 感…

Android 开发中高阶函数的 10 个实例

Android 开发中高阶函数的 10 个实例 Kotlin 是一种现代编程语言,由于其表现力、简洁性和多功能性而变得越来越流行。它的关键特性之一是支持高阶函数,这使您可以编写更简洁、更灵活的代码。高阶函数是一种将一个或多个函数作为参数或返回一个函数作为结…

python+java+nodejs基于vue的企业人事工资管理系统

根据系统功能需求分析,对系统功能的进行设计和分解。功能分解的过程就是一个由抽象到具体的过程。 作为人事数据库系统,其主要实现的功能应包括以下几个模块: 1.登录模块 登录模块是由管理员、员工2种不同身份进行登录。 2.系统管理模块 用户…

工具抓包Charles配置HTTPS步骤

charles抓取HTTPS设置,详细踩坑版 写这篇文章的背景就是,每次我在一台新电脑上用charles抓包时,总是因为各种原因无法抓到https请求,每个百度出来的回答又不是那么详细,需要通过几篇回答才能解决过程中的各种问题&…

C++程序员的职业前景怎么样?来谈谈我自己的想法

我之前提到了程序员在二线城市的大概待遇。今天,我要说一下普通程序员的职业前景。因为最初阶段的工资可能比较高,但如果没有可持续性,这就不是一个特别好的工作。 从我自身的经验来看,我们公司的程序员主要有两条路线。一条是纯…

【存储数据恢复】NetApp存储WAFL文件系统数据恢复案例

存储数据恢复环境: NetApp存储设备,WAFL文件系统,底层是由多块硬盘组建的raid磁盘阵列。 存储故障: 工作人员误操作导致NetApp存储内部分重要数据被删除。 存储数据恢复过程: 1、将存储设备的所有磁盘编号后取出&…

软考A计划-常用公式复习

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 👉关于作者 专注于Android/Unity和各种游戏开发技巧,以及各种资源分享&am…