您的当前位置：首页>全部文章>文章详情

【VUE】Windows系统使用vite创建vue项目

CrazyPanda发表于：2025-07-24 22:33:22浏览：2次TAG： #Vue

1. 准备

环境：

windows 11

nodejs：v22.17.0

2. 安装vite

我本地安装的yarn，所以我使用yarn安装vite

yarn global add create-vite

3. 创建项目

切换到要参加的项目目录，执行命令 yarn create vite

输入项目名称

选择vue作为开发模板

选择变种语言TS

项目创建成功

创建好的项目目录如下

4. 运行项目

根据提示，使用 cd myapp2 命令切换到项目根目录，执行yarn命令，加载组件，最后使用yarn dev 运行项目组件加载完成

安装完成后，项目目录如下

yarn dev运行成功后，会显示如下信息，在浏览器输入此链接即可打开页面

项目运行成功页面

猜你喜欢

: 【VUE】Windows系统使用vite创建vue项目; 1.准备环境：windows11nodejs：v22.17.02.安装vite我本地安装的yarn，所以我使用yarn安装viteyarnglobaladdcreate-vite3.创建项目切换到要参...; 发表于：2025-07-24 浏览：3 TAG： #Vue

: 【VUE】Vue3+Vite+TypeScript常用项目模块详解;  目录1.Vue3+Vite+TypeScript 概述1.1 vue3 1.1.1 Vue3  概述1.1.2 vue3的现状与发展趋势1.2 Vite1.2.1 现实问题1.2 搭建vite项目1.3 TypeScript1.3.1 TypeScript 定义1.3.2 TypeScript 基本数据类型 1.3.3 TypeScript语法简单介绍2. 项目配置简单概述2.1 eslint 校验代码工具配置2.1.1 eslint定义2.1; 发表于：2024-02-21 浏览：455 TAG：

: 【Vue】Vue中的组件生命周期以及应用场景介绍; vue是一款流行的javascript框架，它以其简化开发过程和高度可扩展性而闻名。vue的核心理念之一就是组件化，使得我们可以将应用程序拆解成一系列独立、可复用的组件。每个组件都有一个生命周期，它定义了组件被创建、被使用、被销毁的各个阶段。这个生命周期可以帮助我们更好地理解组件的工作原理，并在应用程序中使用不同的生命周期钩子完成特定的任务。在本文中，我们将详细介绍vue中的组件生命周期，以及如何应用生命周期钩子函数。组件生命周期在Vue中，组件有三个周期阶段：初始化阶段、运行阶段和销毁阶段。每; 发表于：2024-04-29 浏览：319 TAG：

: 【Vue】Vue3 开发实战分享——打印插件 Print.js 的使用（Vue3 + Nodejs + Print.js 实战）以及 el-table 与 el-pagination 的深入使用（上）; 文章目录📋前言🎯关于 Print.js🧩PDF 打印🧩网页（HTML）打印🧩图像打印🧩JSON 打印🧩下载并安装使用🧩相关配置🎯 Vue3 中使用 Print.js 实战🎯Vue3 + Nodejs + Print.js 模拟打印实战案例🧩启动 Nodejs 服务🧩启动 Vue 项目📝最后📋前言今天久违的更新一下关于 Vue 的文章了，本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享，实战内容包括有打印插件 Print.js 的; 发表于：2023-12-10 浏览：335 TAG：

: 【Vue】vue中的$set的作用; $set 的作用是响应式地设置对象或数组的属性，确保更改被 vue.js 追踪和更新，从而触发视图重新渲染。其用法包括：vue.set(target, key, value)，适用于直接赋值不起作用、添加或删除对象或数组属性的情况。Vue.js 中 $set 的作用$set 是 Vue.js 中一个用于响应式地设置对象或数组属性的函数。它的主要作用是确保对对象或数组的更改能够被 Vue.js 追踪和更新，从而触发视图的重新渲染。如何使用 $set$set 函数有以下用法：Vue.set(targ; 发表于：2024-05-13 浏览：257 TAG：

: 【Vue】如何在 Vue 中直接引入 JS 文件; 直接在 Vue 组件中引入外部 JS 文件有以下步骤：1. 在 <script> 标签中引入 JS 文件</script><script> // 直接导入 JS 文件 import myModule from '@/path/to/myModule.js'; // 使用导入的模块 console.log(myModule.someFunction()); </scri; 发表于：2024-05-19 浏览：241 TAG：

: 【Vue】Vue中如何使用v-for指令循环输出对象; 在vue中，v-for是一种指令，在模板中使用它可以对数组或对象进行循环操作。v-for指令用于循环渲染数据，它是vue中非常有用的指令之一。在vue中，使用v-for指令循环输出对象的方式和循环输出数组的方式类似，只需要稍作区别即可。如何使用v-for指令循环输出对象呢？下面我们将分以下几个部分进行讲解。一、v-for指令的基本使用v-for指令的基本语法如下：<div v-for="(item,index) in items">{; 发表于：2024-04-30 浏览：384 TAG：

: 【Vue】vue3比vue2好在哪里; vue 3 优于 vue 2 的关键优势包括：性能提升：响应式系统重写，优化更新速度虚拟 dom 优化，提高渲染效率代码组织和可维护性：组合式 api，提升可维护性teleport 和 suspense，提高代码灵活性和可读性开发者体验：更好的调试工具，简化调试过程typescript 2.7 支持，增强代码提示和类型检查Vue 3 与 Vue 2 的优势对比核心性能提升响应式系统重写：Vue 3 引入 Reactivity API，优化了响应式系统的性能，提升了更新速度。虚拟 DOM 优化：采; 发表于：2024-04-28 浏览：322 TAG：

: 【VUE】Vue3 实现文件预览 Word Excel pdf 图片视频等格式大全!!!!; 先上效果图  插件安装先说 word 文件是docx-preview插件          excel文件是用 xlsx 插件    介绍后端返回的数据因为在拦截器处做了对数据的处理最后你调接口拿到的数据是一个对象里面包含:url : blob对象转换的用于访问Blob数据的临时链接。这个链接可以被用于在网页中展示二进制数据，比如显示图像或者播放音视频文件blobs:&; 发表于：2023-12-28 浏览：315 TAG：

: 【Vue】Vue定义全局变量的方法; 在Vue项目中我们需要使用许多的变量来维护数据的流向和状态，这些变量可以是本地变量、组件变量、父子组件变量等，但这些变量都是有局限性的。在一些场景中，可能需要在多个组件中共享某个变量，此时全局变量就派上了用场。定义全局变量的方法1. 使用Vue.prototype定义全局变量通过在 vue 的原型上定义属性，可以在所有组件中访问该属性。在main.js定义全局变量// main.jsVue.prototype.baseUrl = "https://www.example.com/api; 发表于：2024-04-22 浏览：362 TAG：

栏目分类全部>

推荐文章

