怎样创建vue项目(分别基于vue-cli和vite两种的创建方式)

一、基于vue-cli脚手架创建

1、安装node.js

1、首先需要安装node.js,推荐下载地址:Node.js

2、检查是否安装成功,使用打开黑窗口的快捷键window+R,输入cmd,在黑窗口输入node -v,如果输出版本号,就说明安装node环境成功,

2、vue-cli搭建Vue开发环境

Vue CLI:命令行界面,俗称脚手架,Vue CLI 是一个基于webpack实现的,Vue CLI 是一个官方发布vue.js项目脚手架,使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置

vue-cli的使用前提:安装过Node环境和Webpack

webpack的全局安装:黑窗口输入npm install webpack -g

(1)安装Vue CLI:命令行输入npm install -g@vue/cli
npm install -g @vue/cli
(2)检查是否安装成功:命令行输入vue --version,输出版本号就说明安装成功

3、创建vue项目

(1)、在想要创建项目的文件夹中输入cmd打开命令行并输入vue create "文件名"

(2)进入该页面,按需进行选择和配置

(3)出现以下页面,即为创建成功

4、启动vue项目

两种启动方式:

(1)命令行启动:

(2)把项目拉到vscode中,打开终端

首先,使用npm i 或npm install :安装依赖,根据项目中的package.json文件自动下载项目所需的全部依赖。

查阅了其他文章发现这两种有些许区别:

(2)运行:不同的项目的运行命令不同,可以在package.json中进行查看

可得该项目的运行命令为:npm run serve

 二、基于vite创建(官方推荐)

1、什么是vite?

vite是新一代前端构建工具,和webpack是等价的,构建速度比webpack要快,对TypeScript、JSX、CSS等不用配置什么东西,可以直接进行使用。vite的创建过程是按需编译。

 2、创建命令:

npm create vue@latest

 3、具体配置:

 1.创建命令
npm create vue@latest

 2.具体配置
配置项目名称
Project name: vue3_test


是否添加TypeScript支持
 Add TypeScript?  Yes


是否添加JSX支持
Add JSX Support?  No


是否添加路由环境
Add Vue Router for Single Page Application development?  No


是否添加pinia环境
Add Pinia for state management?  No


是否添加单元测试
Add Vitest for Unit Testing?  No


是否添加端到端测试方案
Add an End-to-End Testing Solution? » No


 是否添加ESLint语法检查
Add ESLint for code quality?  Yes


是否添加Prettiert代码格式化
Add Prettier for code formatting?  No

 

 

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

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

相关文章

基于STM32的温室大棚环境检测及自动浇灌系统设计

需要全部资料请私信我! 基于STM32的温室大棚环境检测及自动浇灌系统设计 一、绪论1.1 研究背景及意义1.2 研究内容1.3 功能设计 二、系统方案设计2.1 总体方案设计 三、系统硬件设计3.1 STM32单片机最小系统3.2 环境温度检测电路设计3.3 土壤湿度检测电路设计3.4 光…

“三指针法“合并两个有序数组(力扣每日一练)

我的第一想法确实是:先合并数组,再排序,搞完。 哈哈哈,想那么多干嘛,目的达成了就好了。 力扣官方题解是双指针: 还有糕手: Python: def merge(nums1, m, nums2, n):# 两个指针分别…

Golang基础入门及Gin入门教程(2024完整版)

Golang是Google公司2009年11月正式对外公开的一门编程语言,它不仅拥有静态编译语言的安全和高性能,而 且又达到了动态语言开发速度和易维护性。有人形容Go语言:Go C Python , 说明Go语言既有C语言程序的运行速度,又能达到Python…

C# winform应用

C# winform应用 需求:导入Excel文件时需要执行其他操作,实现如果取消导入就不执行其他操作 C#代码实现 private bool DLimport0(string tablename, string datebasename, string buttonname){string xxx "";string Tag "";stri…

C++核心编程——类和对象(一)

本专栏记录C学习过程包括C基础以及数据结构和算法,其中第一部分计划时间一个月,主要跟着黑马视频教程,学习路线如下,不定时更新,欢迎关注。 当前章节处于: ---------第1阶段-C基础入门 ---------第2阶段实战…

美易官方:诡异一幕!美国通胀数据超预期上升降息预期却不降反升

美国通胀数据超预期上升,降息预期却不降反升,这一诡异一幕引发了市场对于美联储政策走向的猜测和担忧。在经济全球化的大背景下,美国作为全球最大的经济体,其货币政策对于全球经济具有重要影响。因此,这一诡异一幕不仅…

为什么选择CRM系统时,在线演示很重要?

想要知道一款CRM管理系统是否满足企业的需求,操作是否简单,运行是否流畅,最直观的方式就是远程演示。否则,光凭厂商的销售人员介绍一下产品,企业就盲目下单,最后发现功能不匹配,还要赔钱赔时间重…

销售团队如何实现业绩增长?CRM系统的线索管理功能有什么用?

随着“以客户为中心”观念的逐渐普及,销售团队的客户比过去更复杂,交易周期更久,竞争也更激烈。假如没有明确的销售计划,团队可能陷入混乱,最后导致客户&公司之间的负面结果。在这种情况下,人工智能驱动…

Open CV 图像处理基础:(一)Open CV 在windows环境初始化和 Java 动态库加载方式介绍

Open CV 在windows环境初始化和 Java 动态库加载方式介绍 目录 Open CV 在windows环境初始化和 Java 动态库加载方式介绍OpenCV安装opencv-4.4.0下载安装 加载opencv-4.4.0.jar包jar包引入mavn-init.cmdjar包装载到本地maven仓库pom.xml加载动态库 加载动态库opencv_java440.dl…

基于Python实现身份证信息识别

目录 前言身份证信息识别的背景与意义自动识别身份证的需求 实现环境与工具准备Python编程语言OpenCV图像处理库Tesseract OCR引擎 身份证信息识别算法原理图像预处理步骤(图像裁剪、灰度化 、二值化、去噪)信息提取与解析 Python代码实现通过OCR提取身份证号码代码解析身份证信…

AI分割迁移绘画-neural-style

🏡 个人主页:IT贫道-CSDN博客 🚩 私聊博主:私聊博主加WX好友,获取更多资料哦~ 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 1. 二值化展示图像代码…

docker、docker-compose 离线安装、shell脚本一键安装、卸载

注:二进制包,与脚本在同级目录 docker 离线安装: 包下载:https://download.docker.com/linux/static/stable/x86_64/ docker_install.sh: #!/bin/bash# 指定 Docker 版本和文件名 DOCKER_VERSION"24.0.7" D…

电位器

一、电位器简介 电位器是一种可调的电子元件。它是由一个电阻体和一个转动或滑动系统组成。当电阻体的两个固定触电之间外加一个电压时,通过转动或滑动系统改变触点在电阻体上的位置,在动触点与固定触点之间便可得到一个与动触点位置成一定关系的电压。…

如何将Redis、Zookeeper、Nacos配置为Windows系统的一个服务

说明:当我们在Windows上开发时,不可避免的会用到一些中间件,如Redis、Zookeeper、Nacos等等,当在项目中使用到本地的这些服务器时,我们需要把本地的服务器启动,会开启下面这样的一个窗口。 Redis服务器&am…

uniapp中uview组件库丰富的CountTo 数字滚动使用方法

目录 #平台差异说明 #基本使用 #设置滚动相关参数 #是否显示小数位 #千分位分隔符 #滚动执行的时机 #API #Props #Methods #Event 该组件一般用于需要滚动数字到某一个值的场景,目标要求是一个递增的值。 注意 如果给组件的父元素设置text-align: cente…

C++力扣题目112,113--路径总和,路径总和II

112路径总和 给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径,这条路径上所有节点值相加等于目标和 targetSum 。如果存在,返回 true ;否则,返回 false 。 叶子节点 是…

以太网交换机——稳定安全,构筑数据之桥

交换机,起源于集线器和网桥等网络通信设备,它在性能和功能上有了很大的发展,因此逐渐成为搭建网络环境的常用的设备。 随着ChatGPT爆发,因为用户量激增而宕机事件频频发生,云计算应用催生超大规模算力需求,…

java通过okhttp方式实现https请求的工具类(绕过证书验证)

目录 一、引入依赖包二、okhttp方式实现的https请求工具类2.1、跳过证书配置类2.2、okhttp方式的 https工具类 三、测试类 一、引入依赖包 引入相关依赖包 <!--okhttp依赖包--> <dependency><groupId>com.squareup.okhttp3</groupId><artifactId>…

Vue、uniApp、微信小程序、Html5等实现数缓存

此文章带你实现前端缓存&#xff0c;利用时间戳封装一个类似于Redis可以添加过期时间的缓存工具 不仅可以实现对缓存数据设置过期时间&#xff0c;还可以自定义是否需要对缓存数据进行加密处理 工具介绍说明 对缓存数据进行非对称加密处理 对必要数据进行缓存&#xff0c;并…

php通用后台开发框架源码

php通用后台开发框架源码 基于ThinkPHPBootstrap的快速后台开发框架。 基于Auth验证的权限管理系统&#xff0c;支持无限级父子级权限继承&#xff0c;父级的管理员可任意 增删改子级管理员及权限设置&#xff0c;支持单管理员多角色&#xff0c;支持管理子级数据或个人数据。 …