vue学习笔记-Vite创建工程-01

最新推荐文章于 2025-05-14 21:34:54 发布

原创最新推荐文章于 2025-05-14 21:34:54 发布 · 330 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在VSCode中安装Node.js和Vue3，创建项目文件夹，通过npm创建并配置Vue项目，安装依赖，以及在终端中启动dev服务器进行预览的过程。

1.安装node.js

node.js：node.js

2.安装vscode

vscode：vscode

3.创建项目文件夹

4.vscode打开项目文件夹

选择刚刚创建的项目文件夹

5.vscode中打开终端

默认打开终端快捷键：Ctrl+Shift+`

6.终端中输入新建vue3工程命令

npm create vue@latest

根据提示架构vue项目

7.安装依赖

重新打开vscode，打开文件夹>选择刚刚构建的vue项目文件夹，快捷键唤出终端，输入以下命令进行依赖安装

npm install

8.安装vue支持插件

9.vscode项目下终端输入以下命令开启nodejs项目试调

npm run dev

复制地址到浏览器打开即可预览效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夏隐居士

关注关注

11
点赞
踩
6

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

创建vite项目全流程

bestyinjun的专栏

08-04

3235

创建vite项目全流程，router、vuex、axios、eslint

vue-advanced-chat 学习笔记

qq_38220914的博客

03-19

887

很明显，该组件的运行逻辑很简单，遵循以下规则：•修改组件的属性对象值，可以改变组件的显示。•当组件接收到用户操作时，通过上报消息通知父组件。实际开发中，只需要关注：•组件的属性对象值的数据格式。•组件上报消息的参数格式。后续如果有需求的话，我将进一步整理此组件的完整使用方法。

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

vue3 + vite常用工具

qq_42038997的博客

09-15

478

【代码】vue3 + vite常用工具

如何使用vite创建项目

m0_57236802的博客

12-03

1088

使用 Vite 创建一个新的前端项目是一个快速且现代化的方法。Vite 是一个构建工具，它利用原生 ES 模块来提供一个快速的开发服务器。

通过vite创建项目

m0_74356429的博客

04-03

3809

1.安装vite: npm install -g vite@latest2.创建项目： npm init vite@latest 项目名称 -- --template vue-ts3. cd 到项目目录之后运行。

vite创建项目

m0_57578828的博客

08-05

925

之后根据提示开始安装安装结束。

Vue3实战笔记（01）--- 使用vite初始化项目

山花的博客

05-04

696

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任，本系列笔记从零开始学习开发一套后台管理系统，从实战出发，记录开发过程中遇到的问题和心得，旨在掌握Vue3 的核心特性和开发技巧。前端UI框架使用Vuetify，以快速构建美观且功能强大的应用程序。

Vue学习笔记六--Vue3学习

铁马冰河入梦来

01-10

3505

Vue3.0最新语法

Vue3学习笔记＜-＞创建第一个vue项目（2）

athjyh的博客

06-27

835

vue3+vite+js 创建第一个vue项目

ruoyi-admin和ruoyi-vue3笔记-gl-wms物流管理项目

TY121810的博客

07-24

1546

gl-wms物流管理项目。

使用vite创建项目

lxl1527431101的博客

07-04

5789

使用vite创建项目

Vite【二】使用vite创建项目

小祥编程擅长前端

02-03

2260

Vite【二】使用vite创建项目。vite（法语意为 “快速的”，发音/vit/，发音同 “veet”) 是一种新型前端构建工具，能够显著提升前端开发体验。vite比webpack打包工具启动速度快、热更新快，vite使用esbuild（Go编写）预构建依赖，而webpack基于node.js,因此vite比webpack快10~100倍。

vite搭建完整项目

H524268015wsw的博客

06-05

1万+

（4）cd + 项目名称进入 npm install初始化，简写（npm i）最后 npm run dev。（2）在src/assets文件夹下新建，scss文件夹(文件名称随意)，在文件夹下新建main.scss文件。（1）点击链接进入，选择使用安装命令。（2）输入命令后，回车，输入项目名称，昵称随意，我这里用的是 viteprojects，回车。（1）点击上方网址，进入vite官网，选择一个命令安装方式。（3）在vite.config.js文件中添加配置。（1）在项目终端中输入面的命令。

【详细步骤】使用Vite创建Vue3项目

HQC66666的博客

05-09

9428

Vite是一个轻量级、运行速度快的前端构建工具，它支持模块热替换（Hot Module Replacement，HMR），可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。Vite默认安装的插件比较少，随着开发过程中依赖的增多，需要额外进行配置。Vite不需要以命令的方式安装和卸载，只要安装了npm或yarn，就可使用Vite的相关命令创建项目。Vite会作为项目的开发依赖保存在项目的node_modules目录中。

手把手教你用Vite构建第一个Vue3项目