利用vite创建vue项目

创建vue项目步骤

  1. 打开HBuilder X工具,创建空白项目

  2. 进入终端(鼠标点击文件进行选择,然后终端)
    在这里插入图片描述
    在这里插入图片描述

  3. 利用vite脚手架创建项目
    (前提要将HBuilder X工具属性设为管理员运行状态(属性==》兼容==》管理员身份运行此程序)

npm create vite@latest
  1. 起名字,选择Vue项目工程,采用TypeScript脚本语言
    在这里插入图片描述

  2. 进入项目,执行初始化命令

cd .\vite-project\
npm insatll

当你运行 npm install 命令时,npm会读取 package.json 文件中的依赖项列表,并下载这些依赖项及其依赖项到 node_modules 文件夹中。这样,你的项目就可以使用这些包提供的功能。
在运行 npm install 命令之后,npm 还会自动更新 package.json 文件中的 package-lock.json(或 yarn.lock)文件,以记录确切的包版本和依赖关系。这样,当你的项目被复制到其他环境中时,可以确保安装相同版本的依赖项
package,json相当于maven项目的pom文件,install相当于更新依赖

  1. 安装额外的项目依赖库(如果package.json文件中缺少我们需要的库,则要进行额外的安装)
  • 安装LESS库

在命令行我们进入刚创建的项目文件夹,运行命令安装常用插件。由于less插件只是在开发阶段会用到,前端项目编译发布的之后,LESS代码就被编译成CSS文件了,所以不再需要LESS插件。故此我把less相关插件安装到临时依赖中。-D代表安装临时依赖

npm install less less-loader -D
  • 安装Reactivity 和 Shared库

为了能使用Vue3.0特有的Composition语法(例如setup函数),我们需要安装 @vue/reactivity;
为了能使用Vue3.0的工具函数,我们要安装 @vue/shared 。下面是要执行的安装命令

npm install  @vue/reactivity @vue/shared
  • 安装Router库

Vue的路由技术非常重要,它可以让Vue页面include其他页面的内容,类似于HTML的 《ifiame》标签。为了能 自使用Vue的路由技术,我们需要给前端项目安装vue-router库。

npm install vue-router
  1. 配置运行环境变量

在HBuilderX工具上打开刚刚创建前端项目,修改 vite.config.ts 文件中的项目启动端口号,添加如下内容,然后保存文件 (Ctrl+s)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server:{host:"localhost",port: 7600}
})

vite.config.ts 文件是在使用 Vite 构建工具时,用于配置项目构建和开发环境的文件。Vite 是一个面向现代浏览器的构建工具,用于快速开发 Vue.js 单页面应用(SPA)和普通的 JavaScript/TypeScript 项目。
在 Vite 项目中,vite.config.ts 文件是一个 TypeScript 文件,位于项目根目录下。它用于定义各种构建和开发选项,以自定义项目的行为。
以下是一些常见的配置选项,你可以在 vite.config.ts 文件中进行设置:

  • 插件配置:你可以通过 plugins 选项配置 Vite 的插件。插件可以用于添加额外的功能,例如处理样式表、压缩代码、自动生成 HTML 文件等。
  • 别名配置:通过 alias 选项,你可以设置模块的别名,以简化模块的导入路径。
    构建输出配置:你可以使用 build 选项配置构建输出的相关设置,例如输出目录、文件名格式、是否进行代码压缩等。
  • 开发服务器配置:通过 server 选项,你可以配置开发服务器的相关设置,例如端口号、代理配置、自动打开浏览器等。
  • 环境变量配置:你可以通过 define 选项设置全局的环境变量,这些变量可以在项目中访问到。
    CSS 预处理器配置:如果你使用了 CSS 预处理器(如 Less、Sass),你可以通过 css.preprocessorOptions 选项配置预处理器的相关设置。

vite.config.ts 文件中的配置选项可以根据项目需求进行自定义设置,以适应不同的开发和构建需求。当你对配置进行更改后,可能需要重新启动 Vite 服务器才能使更改生效。
需要注意的是,vite.config.ts 文件是可选的。如果你不创建该文件,Vite 会使用默认的配置选项来构建和运行你的项目。

vite.config.ts相当于maven项目的application.yml文件

  1. 运行项目
npm run dev

打开浏览器,访问本地主机7600端口,就能看到欢迎画面,就说明前端项目启动成功
在这里插入图片描述

注意一旦创建了项目,不要轻易移动项目已经更改项目名字

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

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

相关文章

Ubuntu22.04配置ROS2+PX4仿真环境

Ubuntu22.04配置ROS2PX4仿真环境 主要参考源: https://blog.csdn.net/weixin_44174421/article/details/135827130 https://blog.csdn.net/Zecet/article/details/130474620 一、准备工作 确保网络能够连接到github,出错主要源自于此;确保…

【Qt 学习笔记】Qt常用控件 | 按钮类控件Check Box的使用及说明

博客主页:Duck Bro 博客主页系列专栏:Qt 专栏关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ Qt常用控件 | 按钮类控件Check Box的使用及说明 文章编号:…

C# 两种方法截取活动窗口屏幕,实现窗体截图

方法1,截屏内容仅包括活动窗口界面,而方法2是从屏幕范围取图,截屏内容会包括屏幕上所有内容。例如有一些程序在桌面顶层显示半透明的悬浮窗,用方法2截屏就会包括这些内容,并不是单纯的活动窗口内容。 方法1&#xff0c…

解决 MSYS2 Qt 6.7 默认 stylesheet 在 windows 11 下的显示故障

项目场景: MSYS2 升级到 Qt6.7.0,发现显示故障,所有Qt6程序以及 QtCreator的SpinBox都显示不全,Combox的底色不对。 问题描述 2024年4月1日,pacman升级MSYS2后,Qt6遇到风格错误。如果使用官方的 Qt onlin…

【PostgreSQL里insert on conflict do操作时的冲突报错分析】

最近在巡检PostgreSQL的数据库的时候,发现部分数据库里存在大量的如下报错 ERROR: ON CONFLICT DO UPDATE command cannot affect row a second time HINT: Ensure that no rows proposed for insertion within the same command have duplicate constrained val…

Winform重难点笔记

FrmMain.cs 中的 partial(部分的) 和 FrmMain.Designer.cs 中的 partial 一样,不是一个类的修饰符,是限定这个类本身的组成部分,叫做部分类。当程序在编译和运行时,会把 FrmMain.cs 中的 FrmMain 类 和 Frm…

前端console用法分享

console对于前端人员来讲肯定都不陌生,相信大部分开发者都会使用console来进行调试,但它能做的绝不仅限于调试。 最常见的控制台方法 作为开发者,最常用的 console 方法如下: 控制台打印结果: 今天我分享的是一些 co…

RabbitMQ Stream插件使用详解

2.4版为RabbitMQ流插件引入了对RabbitMQStream插件Java客户端的初始支持。 RabbitStreamTemplateStreamListener容器 将spring rabbit流依赖项添加到项目中&#xff1a; <dependency><groupId>org.springframework.amqp</groupId><artifactId>sprin…

java-spring 图灵 04

在Spring框架中&#xff0c;可以使用org.springframework.core.io.support.ResourcePatternResolver接口的resolveBasePackage方法来将指定的基础包解析为用于包搜索路径的模式规范。 例如&#xff0c;如果基础包是com.example.app&#xff0c;则可以使用resolveBasePackage方法…

微信小程序-绘制图片并分享下载(painter)

1、引入painter插件 painter官网地址 1.1 可通过官网的方法引入painter插件&#xff0c; 官方插件下载地址 1.2 可下载本文附带的插件包直接引入 1.2.1 复制下载下来的文件中的painter文件夹&#xff0c;将其放在components目录下 1.2.2 页面中引入并使用 .json {"…

Mac版2024 CleanMyMac X 4.15.2 核心功能详解 cleanmymac这个软件怎么样?cleanmymac到底好不好用?

近些年伴随着苹果生态的蓬勃发展&#xff0c;越来越多的用户开始尝试接触Mac电脑。然而很多人上手Mac后会发现&#xff0c;它的使用逻辑与Windows存在很多不同&#xff0c;而且随着使用时间的增加&#xff0c;一些奇奇怪怪的文件也会占据有限的磁盘空间&#xff0c;进而影响使用…

如何在 VM 虚拟机中安装 OpenEuler 操作系统保姆级教程(附链接)

一、VMware Workstation 虚拟机 若没有安装虚拟机的可以参考下篇文章进行安装&#xff1a; 博客链接https://eclecticism.blog.csdn.net/article/details/135713915 二、OpenEuler 镜像 点击链接前往官网 官网 选择第一个即可 三、安装 OpenEuler 打开虚拟机安装 Ctrl …

家居网购项目(手写分页)

文章目录 1.后台管理—分页显示1.程序框架图2.编写数据模型Page.java 3.编写dao层1.修改FurnDao增加方法 2.修改FurnDaoImpl增加方法 3.单元测试FurnDaoTest 4.编写service层1.修改FurnService增加方法 2.修改FurnServiceImpl增加方法3.单元测试FurnServiceTest 5.编写DataUtil…

计算机系列之操作系统的系统

2、大话操作系统的启动 当按下开机键时&#xff0c;BIOS 就会开始执行 ​ BIOS 就是放在主板上 ROM 里面的一段程序。 ​ ROM Read Only Memory&#xff08;只能读取的内存&#xff09; ​ 所以 BIOS 在出厂的时候就可以直接写死在 ROM 里面。 ​ 每次开机的时候&#xff…

windows下已经创建好了虚拟环境,但是切换不了的解决方法

用得多Ubuntu&#xff0c;今天用Windows重新更新anaconda出问题&#xff0c;重新安装之后&#xff0c;打开pycharm发现打开终端之后&#xff0c;刚开始是ps的状态&#xff0c;后面试了网上改cmd的方法&#xff0c;终端变成c盘开头了 切换到虚拟环境如下&#xff1a;目前的shell…

ROS 2边学边练(26)-- 监测参数变化(C++)

前言 通常&#xff0c;一个节点需要对其自身参数或另一个节点的参数的更改做出响应。ParameterEventHandler类使监听参数更改变得容易&#xff0c;这样代码就可以对它们做出响应。 动动手 创建一个包 进入工作空间根路径的src下&#xff08;ros2_ws/src&#xff09;&#xff…

【Python基础】—— scipy.spatial.KDTree、matplotlib.pyplot、imageio

scipy.spatial参考博客&#xff1a;Python点云处理——建立KDtree 1 KDtree算法原理 KDtree构建出了一种类似于二叉树的树形数据存储结构&#xff0c;每一层都对应原始数据中相应的维度&#xff0c;以K层为一个循环&#xff0c;因此被称为KDtree。 每一层的左右子树的划分依据…

视频自定义字幕,中英文,彩色的,你也可以,不会不知道吧

前言 关于【SSD系列】&#xff1a; 前端一些有意思的内容&#xff0c;旨在3-10分钟里&#xff0c;有所获&#xff0c;又不为所累。 字幕&#xff0c;大家见过吧&#xff0c;其实你也可以&#xff0c;真的可以&#xff0c;真的真的可以。不难&#xff0c;不难&#xff0c;真的…

如何评估一个RAG(检索增强生成)系统

本文首发自博客文章 如何评估一个RAG&#xff08;检索增强生成&#xff09;系统 RAG 概念最初来源于 2020 年 Facebook 的一篇论文&#xff0c;这是 Facebook 博客对论文内容的进一步解释 &#x1f449;《检索增强生成&#xff1a;简化智能自然语言处理模型的创建》。大家都知…

【C++对于C语言的扩充】函数重载、引用以及内联函数

文章目录 &#x1f680;前言&#x1f680;函数重载注意&#xff1a;✈️为什么C可以实现函数重载&#xff0c;而C语言却不行呢&#xff1f; &#x1f680;引用✈️引用的特性✈️C中为什么要引入引用✈️引用与指针的区别 &#x1f680;内联函数✈️内联函数特性 &#x1f680;…