用vite创建一个vue3项目

最新推荐文章于 2025-02-17 20:49:18 发布
原创 最新推荐文章于 2025-02-17 20:49:18 发布 · 426 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

本文介绍如何通过Vite快速创建Vue3项目。主要内容包括：环境要求、创建项目的步骤、依赖安装及项目启动等。适合希望快速上手Vue3应用开发的前端开发者。

用vite创建一个vue3项目

vite官网：Vite | 下一代的前端工具链

黑窗口：win+r  cmd    环境要求：已装node环境16以上

第一步 创建命令

npm init vite-app (project 项目名) 或者

【建议用yarn创建比较快】

  yarn create vite-app  (project 项目名)

第二步 切换到目录

cd project

第三步 安装依赖包

 npm install   |  yarn

第四步 启动项目

 npm run dev  |  yarn dev

第五步 输入以上网址打开

 

vue3-vite搭建、运行
前端-尔嵘
02-22 1万+
1.首先得保证你的电脑安装的node版本是12+的 2.输入以下命令自动化搭建vite-vue3项目 # npm 6.x npm init vite@latest vue3-admin --template vue # npm 7+, 需要额外的双横线： npm init vite@latest vue3-admin -- --template vue # yarn yarn create vite vue3-admin --template vue # pnpm pnpm create vit
Vue3 - Vite 安装与创建 vue3 项目（使用 vite 创建 vue 项目）
热门推荐
🏆 前端领域优质创作者
08-24 1万+
前言 为什么使用vite（官方解释）：https://vitejs.cn/guide/why.html 它是一款由尤雨溪开发的新工具，旨在代替webpack，利用浏览器现已支持ES6的基础，遇到import会发送一个请求去加载文件，vite拦截这些请求做一些预编译，省去了冗长的打包时间，从而提升开发体验，具体详见官方网站。 第一步：安装vite 也可使用yarn进行安装，本篇基于npm进行。 在任意位置终端执行如下代码： npminstall-gcreate-vit
使用Yarn + Vite + Vue3搭建前端项目
BlogPan的专栏
07-30 4582
Vite是一个新型前端构建工具，启动快构建快速度惊人，开发体验比Webpack好得多，主要由两部分组成：1. 一个开发服务器，它利用了现代浏览器的原生ES模块解析能力，可以实现非常快速的热更新(HMR)，从而大大加快了构建速度。2. 一套构建指令，使用打包代码，在生产环境使用预配置可以将所有的模块预打包，生成高性能的静态资源，可以大大加快冷启动的速度。
vue3学习教程第二节（使用vite 创建vue3项目）
刺客-Andy 的博客
02-26 486
使用vite创建vue3项目，
使用vite创建vue3项目
weixin_45070265的博客
11-24 653
安装Nodejs（版本>=12） 全局安装vite npm install -g create-vite-app 创建vue项目 yarn create @vitejs/app my-vue-name --template vue //yarn(本文使用yarn) 经过上面操作，vue项目基本框架完成，再根据以下命令安装依赖并运行即可 备注：其他创建方式： 不使用模板 npm init @vitejs/app //或者 yarn create @vitejs/app 使用模板
基于yarn搭建vite + vue3开发框架
morliz的博客
10-26 1119
通过yarn创建vite +vue3 项目开发框架
使用 Vite 创建一个 Vue 3 项目
11-01
以下是使用 Vite 创建一个 Vue 3 项目的简单步骤： 1. **安装依赖**： 首先，确保你已经在系统上安装了 Node.js 和 npm。然后，在命令行运行以下命令来全局安装 Vite 和 Vue CLI（如果尚未安装）： ``` npm ...
使用vite创建一个vue3项目
12-25
使用Vite创建Vue3项目是一个快速且现代化的方式，它提供了一种更快的热更新体验和更小的启动时间。以下是简单的步骤： 1. **安装Vite**： 首先，确保已全局安装Node.js。然后，在终端中运行`npm install -g vite` ...
精选资源
vue3+vite创建项目-（傻瓜式教程）
01-19
本教程将指导你如何使用Vue3和Vite创建一个新的项目，让你轻松入门Vue3的世界。 1. 安装Vite 首先，确保你已经安装了Node.js和npm。在命令行中运行以下命令全局安装Vite： ```bash npm install -g create-vite ```...
基于Vite+pinia快速创建一个Vue3项目
最新发布
肌肉金轮的博客
02-17 546
Vue3基础工程构建
vue 3.0 + vite 搭建项目
binggegeshiwo的博客
08-12 2336
全局安装create-vite-app yarn global add create-vite-app@1.18.0 创建项目目录 create-vite-app vue3-ui 或者 cva vue3-ui vue2 和vue3 百分之九十是一样的出来以下几点 Vue 3 的 Template 支持多个根标签，Vue 2 不支持 Vue 3 有 createApp()，而 Vue 2 的是 new Vue() createApp(组件)，new Vue({template, render}).
Vue3+Vite搭建项目
世间万物皆不如你
08-05 844
Rollup打包 它使用 Rollup 打包你的代码，并且它是预配置的 并且支持大部分rollup插件。可以在终端输入npm -v 来检查是否安装成功。冷服务 默认的构建目标浏览器是能。构建我们的cli 项目可以去对比一下。npm install 安装依赖包。package json 命令解析。装完之后会有一个命令叫 npm。npm run dev 启动。HMR 速度快到惊人的。使用vite初始化一个项目。...
快速搭建一个vue3+js+yarn+vite项目
m0_69719421的博客
10-09 268
全局安装 yarn 包管理工具使用 yarn 来创建 vite 的 vue 项目。
手把手教你用Vite构建第一个Vue3项目
再小的帆也能远航，把分享变成一种习惯
09-04 1万+
今天就来说说怎么创建第一个Vue3项目。并安装Element Plus 及一些常用配置，最终实现一个简单增删改查页面
vite搭建vue3项目
block_xu的博客
10-15 1675
首先按照官网创建项目,yarn create vite 项目名字 --template vue(这里我用的yarn,用npmnpm init vite@latest 项目名字 -- --template vue) 安装依赖 yarn(npm install) typescript 首先安装 yarn add typescript 然后在项目跟目录下创建ts配置文件 tsconfig.json /** * ts配置文件 * 配置参考于文档 https://www.cnblogs.com/fan
vite创建vue3项目
weixin_44933280的博客
11-08 612
项目搭建 npm init vite-app xxxx yarn create vite-app xxxx cd xxxx cd xxxx npm install yarn npm run dev yarn dev 安装路由 // npm/yarn npm install vue-router@next yarn add vue-router@next // 创建文件 src/route/index.js import {createRouter, cr
vite 创建vue3项目
cc_Crt的博客
09-28 1330
第一步 执行命令 npm init vue@latest第二步.vite项目使用 less sass scss。
VUE3（一）安装+使用vite创建一个项目
hsany330的专栏
11-26 473
VUE3.0第一篇。主要还是看一看官方的手册，做一个笔记。 官方文档网址： Vue3 这里看一下vue3.0的安装以及创建第一个项目。 官方对js包管理为我们提供了两个选择，npm和yarn。我这里比较倾向使用yarn。 关于yarn的介绍，请移步《js包管理工具yarn》 一：安装vue3.0 yarn global add @vue/cli@next 安装成功如下图所示： 二：创建项目 1：创建一个名为blog的项目 yarn create vite-app blog
vite快速构建vue3项目
qq_18976087的博客
05-24 264
yarn create vite 项目名称 --template vue。5.安装依赖 yarn install。6.启动项目 yarn dev。1.在终端查看node版本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风尚云网

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值