使用Yarn + Vite + Vue3搭建前端项目

原创

已于 2023-12-27 10:25:53 修改 · 4.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2023-07-30 22:11:32 首次发布

本文介绍了Vite作为新型前端构建工具的特点，包括快速启动和构建，以及它的主要组成部分。文章详细阐述了如何准备环境（Node.js和Yarn），创建Vue项目，以及构建过程。还展示了项目代码结构和主要文件的功能，特别提到了Vue3中状态管理用到了pinia。

一、Vite简介

Vite是一个新型前端构建工具，启动快构建快速度惊人，开发体验比Webpack好得多，主要由两部分组成：

1. 一个开发服务器，它利用了现代浏览器的原生ES模块解析能力，可以实现非常快速的热更新(HMR)，从而大大加快了构建速度。

2. 一套构建指令，使用 Rollup 打包代码，在生产环境使用预配置可以将所有的模块预打包，生成高性能的静态资源，可以大大加快冷启动的速度。

官网：开始 | Vite 官方中文文档

二、准备工作

1.安装Nodejs Vite因为模块兼容性需要node.js版本16+，安装方法请移步：MacOS安装Node.js

2.安装Yarn，安装方法请移步：Yarn的安装和使用

三、搭建方法

创建目录

本地创建一个v

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

猫吃了源码

关注关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vite搭建Vue3 + TypeScript 项目(Yarn)

HUMM

11-04

2255

npm安装yarn。

创建vue3项目

徐同保的专栏

07-03

745

【代码】创建vue3项目。

1 条评论您还未登录，请先登录后发表或查看评论

基于yarn搭建vite + vue3开发框架

morliz的博客

10-26

1081

通过yarn创建vite +vue3 项目开发框架

使用yarn命令创建Vue3项目

m0_62446426的博客

01-15

888

你也可以为你的Vue3项目添加更新更好更丰富的技术，比如Pinia状态管理……使用yarn包管理工具来安装项目的依赖项。默认在当前路径下创建项目。直接回车可选择Vue3。

vite搭建vue3项目

block_xu的博客

10-15

1664

首先按照官网创建项目,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

Vue3-使用yarn命令创建项目

YanHSama的博客

03-01

5538

前提：安装node #全局安装yarn npm install -g yarn 安装 vue-cli yarn global add @vue/cli #查看vue-cli版本 Vue --version 使用vite命令创建 yarn create vite vuejs_notebook --template vue

Vue3 -- 基于Vue3+TS+Vite项目【项目搭建及初始化】

qq_53002037的博客

11-13

1090

vue3 +TS + vite 项目搭建及初始化

用vue3+elementPlus+vite搭建的electron桌面端应用模板，方便快速创建类似项目.zip

02-09

在本文中，我们将深入探讨如何使用Vue3、ElementPlus和Vite来构建一个基于Electron的桌面应用程序模板，以及这个模板对于快应用开发和企业级项目的实用价值。首先，我们来了解一下这几个关键技术： 1. Vue3：Vue.js...

基于 vue3 + vite + element plus + avue3 + vue-router + vuex，适配手机、平

06-08

开发者可以通过此模板快速搭建项目，减少重复工作，专注于业务逻辑的实现。模板可能包含了响应式布局，确保在不同设备上都能有良好的用户体验。同时，由于采用最新的前端技术栈，项目的性能和开发体验都有所提升。 ...

搭建vue3+ts+vite项目

xhjtcflm的博客

07-10

1304

JavaScript modules (import/export) 选择采用js模块引入或暴露开发。npx eslint --init 初始化。vue.js 选择采用vue.js框架开发。5.cd 项目、pnpm install 、pnpm run dev。（1）下载eslint：pnpm i eslint -D。（2）生成配置文件：eslint.cjs。一、创建项目及项目初始化。

Yarn创建VUE3项目

weixin_45457042的博客

01-06

2491

安装Yarn之前需要先安装npm。

用yarn命令在VSCode中创建项目

2403_85247886的博客

09-02

972

打开终端，输入yarn init，回车后会依次出现以下问题，我们现在只是演示一下如何创建一个项目，所以只输入了文件名字，大家可以先只输入一个文件名，回车，其他具体意思，下一片发布会写。会发现我们用第二种方法建的项目，东西会更多一是一个空白的项目些，第二种方法会构建一个简单的框架，第一种是一个空白项目，创建的时候也要多加注意，具体看图片中标注。选择你要创建项目的目录下，比如我选择的是frist文件夹下，那么把它点开，路径显示为以下图片中的样子。我们今天创建完两个项目之后，就是这个样子的，让后我们吧他们点开。

Vue.js入门指南：简介、环境配置与Yarn创建项目

欢迎来到“Python算法探索”，我是GT算法工程师，一名热爱计算机算法的博主。在这里，我们将一起深入探索Python世界中的各种算法，从基础到高级，从理论到实践。我参加过很多算法比赛，积累了丰富的经验，希望通过这个播客与你分享。让我们一起用Python探

02-28

1796

Vue.js，一个流行的JavaScript框架，以其直观、灵活和高效的特点，在前端开发者中赢得了广泛的赞誉。Vue.js的核心库专注于视图层，使得开发者能够构建出响应式的数据绑定和组合的视图组件。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

yarn 创建 Vue2 项目（包括node的方式和遇到版本问题如何解决）

weixin_46684929的博客

02-20

2492

问题描述：使用vue create命令，但是报 vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to run the following to upgrade to Vue CLI 3 的错误。每次修改项目代码后，开发服务器都会自动重新编译和刷新页面，以便你可以看到修改后的效果。这个命令会自动下载并运行最新版本的 Vue CLI，然后使用它来创建一个新的项目。

Yarn 的工作流-创建一个新项目

weixin_33695450的博客

02-01

498

记录yarn创建vue3+vite

weixin_41548512的博客

12-31

1567

使用yarn创建vite+vue3项目，简单的配置

Vite创建Vue3项目

猫老板的豆

09-16

9204

文章目录Vite创建Vue3项目1. 输入项目名称2. 选择框架3. 选择不同的vue4. 项目创建完成5. 项目结构6. 启动项目Vue3中使用jsx1. 安装插件2. 注册插件3. 使用插件注意 Vite创建Vue3项目 Vite 需要 Node.js 版本 >= 12.0.0。（node -v 查看自己当前的node版本）使用 yarn：yarn create @vitejs/app 使用 npm：npm init @vitejs/app 1. 输入项目名称这里输入我们的项目名称：

使用yarn创建vite项目+vue3

qq_15064263的博客

10-23

1085

使用yarn命令创建vite项目报错问题

vue前端开发自学,使用yarn脚手架创建vue项目

yrldjsbk的博客

01-15

1368

默认vscode开发环境，会自动选择到vue3.、你可以使用键盘的上下箭头，控制，我选择了vue2版本。下面展示一下，如何在本机操作，使用yarn这款脚手架，创建一个vue项目。第一步，你需要先创建好，即将存档项目的文件夹。之后，它还会再次提示你，让你选择，使用哪个脚手架。当你看见，下面出现2行蓝色的内容，就说明安装初始化完毕了。如图，启动项目打开了本地浏览器，看见这个页面。说明你的本地vue项目，启动成功了。如图，你可以使用命令“vue -V”来查看一下，当前你使用的cli的版本情况。

如何使用yarn+vite创建项目