【快速上手】使用 Vite 来创建一个 Vue 3项目

文章目录

  • 1. 前提条件
  • 2. 使用 Vite 创建 Vue 项目
    • 第一步:安装 Vite
    • 第二步:进入项目并安装依赖
    • 第三步:启动开发服务器
  • 3. 项目结构说明
  • 4. 项目开发的基础操作
    • 1. 添加新组件
    • 2. 安装依赖
  • 5. 打包和部署
  • 6. VS Code 配置开发环境(可选)
  • 7. 常用命令总结
  • 8. 总结


1. 前提条件

要开始使用 Vite 创建 Vue 项目,你需要:

  • 安装 Node.js(推荐安装版本 14 或更高),Node.js 会自带 npm(Node 包管理器)。
  • 互联网连接,因为需要下载 Vite 和其他依赖。

验证 Node.js 和 npm 是否已安装

node -v
npm -v

如果你没有安装 Node.js,可以从 Node.js 官方网站 下载并安装。

2. 使用 Vite 创建 Vue 项目

Vite 是一款快速构建工具,支持现代前端开发,特别适用于像 Vue 这样的框架。以下是如何使用 Vite 创建项目的步骤。

第一步:安装 Vite

首先,确保你已经安装了 npm 或 yarn。然后,你可以使用以下命令创建一个新的项目:

  1. 打开终端(在 macOS 中是 Terminal,Windows 中是 CMD 或 PowerShell)。

  2. 运行以下命令来使用 Vite 创建 Vue 项目:

    npm create vite@latest my-vue-app
    

    这里的 my-vue-app 是项目的名字,你可以自定义这个名字。

  3. 之后,Vite 会提示你选择要使用的框架。你可以使用方向键选择 “Vue” 作为你的项目框架:

    ? Select a framework: › - Use arrow-keys. Return to submit.vanillavuereactpreactlitsvelteothers
    

    选择 vue 并按回车确认。

  4. 接着它会提示你是否使用 TypeScript:

    ? Select a variant: › - Use arrow-keys. Return to submit.vuevue-ts
    

    如果你想要纯 JavaScript 项目,选择 vue;如果你想使用 TypeScript,选择 vue-ts

第二步:进入项目并安装依赖

  1. 进入新创建的项目文件夹:
    cd my-vue-app
    
  2. 安装项目依赖项:
    npm install
    
    这将根据 package.json 安装项目所需的所有依赖包。

第三步:启动开发服务器

安装完成后,可以通过以下命令启动开发服务器:

npm run dev

启动成功后,你会看到终端提示类似这样的输出:

VITE vX.X.X  ready in XX ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose

在浏览器中访问 http://localhost:5173,你就可以看到默认的 Vue 欢迎页面。

3. 项目结构说明

使用 Vite 创建的 Vue 项目有一个基础的项目结构。以下是各个文件和文件夹的详细说明:

  • index.html: 项目主页面,Vite 使用这个文件来定义应用的根 HTML 内容。在这里可以引用 JavaScript 和 CSS。

  • src 文件夹: 存放项目源代码。

    • main.js: 项目的入口文件,主要用于创建 Vue 实例并挂载到 DOM 中。
    • App.vue: 应用的根组件,默认包含了一些模板、样式和基本的逻辑代码。
    • assets 文件夹: 存放静态资源,例如图片、字体等。
  • package.json: 定义了项目的基本信息、依赖项和脚本。通过这里可以管理项目的依赖包,添加新的库等。

  • vite.config.js: 这是 Vite 的配置文件,用于配置项目开发和构建的参数,例如代理、路径别名等。

4. 项目开发的基础操作

你可以开始在 src 文件夹下的 App.vue 中进行开发,以下是一些基础操作:

1. 添加新组件

  • src/components 中创建一个新的 Vue 组件,例如 HelloWorld.vue
    <template><div><h1>Hello, World!</h1></div>
    </template><script>
    export default {name: 'HelloWorld'
    }
    </script><style scoped>
    h1 {color: blue;
    }
    </style>
    
  • App.vue 中引入这个组件:
    <template><div id="app"><HelloWorld /></div>
    </template><script>
    import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
    }
    </script>
    

2. 安装依赖

使用 npm 或 yarn 添加其他需要的依赖。例如,如果你想安装 axios 用于请求 API,可以执行:

npm install axios

然后你可以在项目中引入它来进行 HTTP 请求。

5. 打包和部署

当你开发完成后,可以将项目打包,以便部署到生产环境:

  1. 在终端中执行以下命令打包项目:

    npm run build
    

    这将创建一个 dist 文件夹,里面包含了所有构建后的文件。

  2. dist 文件夹中的内容上传到你的服务器或托管服务中(例如 Vercel、Netlify、GitHub Pages 等)。

6. VS Code 配置开发环境(可选)

  • 安装插件: 推荐在 VS Code 中安装 VeturVolar 插件来支持 Vue 文件的语法高亮和代码补全。
  • 格式化工具: 可以安装 Prettier 来确保你的代码风格统一。

7. 常用命令总结

  • 启动开发服务器:
    npm run dev
    
  • 构建生产版本:
    npm run build
    
  • 本地预览生产版本(确保在打包后使用):
    npm run preview
    
    这将在本地启动一个服务器,用于预览打包后的应用。

8. 总结

使用 Vite 创建 Vue 项目非常简单,而且 Vite 提供了极快的热重载和开发体验。整个流程概括如下:

  1. 安装 Vite 并创建项目。
  2. 进入项目目录,安装依赖。
  3. 启动开发服务器,开始开发。
  4. 打包和部署你的应用。

通过以上步骤,你可以快速创建并启动一个 Vue 项目。随着项目的扩展,你可以添加更多的插件、组件和页面,开发一个功能齐全的 Vue 应用。

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

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

相关文章

通信工程学习:什么是VHDL超高速集成电路硬件描述语言

VHDL&#xff1a;超高速集成电路硬件描述语言 VHDL&#xff0c;全称为Very-High-Speed Integrated Circuit Hardware Description Language&#xff0c;即超高速集成电路硬件描述语言&#xff0c;是一种用于电路设计的高级语言。以下是关于VHDL的详细介绍&#xff1a; 一、起源…

ddb-spring-boot-starter使用说明

功能说明 实现springbootmybatisplus项目中&#xff0c;动态切换数据库连接及实现类的简易方案。实现效果为&#xff1a;1.将数据源连接信息动态维护到数据表中&#xff08;可以通过页面实时维护到表中&#xff09;&#xff1b;2. 在线选择数据源就可以实时切换数据库连接及实现…

kubernetes自定义pod启动用户

一、kubernetes自定义pod启动用户 一&#xff09;以root用户启动pod containers:- name: ...image: ...securityContext:runAsUser: 0 二&#xff09;以普通用户启动pod 1、从构建镜像角度修改 # RUN命令执行创建用户和用户组&#xff08;命令创建了一个用户newuser设定ID为1…

数据结构——排序(2)

数据结构——排序(2) 文章目录 数据结构——排序(2)前言&#xff1a;1.快速排序&#xff08;非递归版本&#xff09;基本步骤&#xff1a;代码实现 2.归并排序算法思想&#xff1a;核心步骤&#xff1a;代码实现&#xff1a;特征总结&#xff1a; 3.计数排序&#xff08;非比较…

【ubuntu】ubuntu20.04安装cuda12.6与显卡驱动

目录 1.安装cuda12.6 2.安装显卡驱动 1.安装cuda12.6 https://developer.nvidia.com/cuda-toolkit-archive https://developer.nvidia.com/cuda-12-6-0-download-archive?target_osLinux&target_archx86_64&DistributionUbuntu&target_version20.04&target_…

[MyBatis-Plus]快速入门

介绍 MyBatis-Plus是MyBatis的好朋友, 与MyBatis配合, 实现开发效率的提高 官网: 特点: 润物细无声: 只做增强不做改变, 引入它不会对现有工程产生影响, 如丝般顺滑效率自上: 只需简单配置, 即可快速进行单表CRUD, 从而节省大量时间功能丰富: 代码生产, 自动分页, 逻辑删除, …

【重学 MySQL】六十六、外键约束的使用

【重学 MySQL】六十六、外键约束的使用 外键约束的概念关键字主表和从表/父表和子表外键约束的创建条件外键约束的特点外键约束的创建方式外键约束的删除外键约束的约束等级外键约束的级联操作外键约束的示例外键约束的作用开发场景阿里开发规范 在MySQL中&#xff0c;外键约束…

雷池社区版配置遇到问题不要慌,查看本文解决

很多新人不太熟悉反向代理&#xff0c;所以导致配置站点出现问题 配置问题 记录常见的配置问题 配置后攻击测试没有拦截记录 检查访问请求有没有真实经过雷池 有很多新人配置站点后&#xff0c;真实的网站流量还是走的源站&#xff0c;导致雷池这边什么数据都没有 配置后…

【C】分支与循环2--while/for/do-while/goto以及break和continue在不同循环中的辨析~

分支与循环 while循环 if与while的对比 if(表达式)语句&#xff1b;while(表达式)语句&#xff1b;下面来看一个例子&#xff1a; 用 if 写&#xff1a; #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> int main() {if (1)printf("hehe");//if后面条…

YOLOv8模型改进 第七讲 一种新颖的注意力机制 Outlook Attention

随着目标检测技术的不断发展&#xff0c;YOLOv8 作为最新一代的目标检测模型&#xff0c;已经在多个基准数据集上展现了其卓越的性能。然而&#xff0c;在复杂场景中&#xff0c;如何进一步提升模型的检测精度和鲁棒性依然是一个重要挑战。本文将探讨将 Outlook Attention 机制…

2024第四届”认证杯“数学中国全国大学生数学竞赛参赛通知

2024第四届“认证杯”数学中国 全国大学生数学竞赛报名通知 为了培养人才、服务教学、促进高等学校数学课程的改革和建设&#xff0c;增加大学生学习数学的兴趣&#xff0c;培养分析、解决问题的能力&#xff0c;发现和选拔数学创新人才&#xff0c;为青年学子提供一个展示数…

tortoisegit简单用法

一、基础设置 1.官网 https://tortoisegit.org/ TortoiseGit – Windows Shell Interface to Git 2.下载 3.安装 4.设置 5.克隆远程仓库 二、团队合作 1.在dev分支上创建分支 主分支&#xff1a;master 发开分支&#xff1a;dev 自己的分支&#xff1a;test_branch 2.修…

竹壳天气时钟(一)使用数组保存扫描到的WiFi列表信息

一、简介 准备用基于esp8266的nodemcu开发板做一个天气时钟。 一步一步记录代码编写过程。 /*竹壳天气时钟 Bamboo shell weather clock 使用基于esp8266的NodeMCU制作。 计划用竹子做最后成品的外壳&#xff0c;所以才有了这个名称。 第一阶段任务&#xff1a; 1.实现WiFi连…

mariadb设置远程访问

编辑 /etc/mysql/my.cnf文件&#xff0c;添加以下代码 [mysqld] bind-address 0.0.0.0 在mariadb中添加一个用于远程访问的新用户 先进入mariadb mysql -u root -p 创建用户 // 创建用户 create user remote_user% identified by password; // 给远程访问权限 grant all…

MySQL表的基本查询上

1&#xff0c;创建表 前面基础的文章已经讲了很多啦&#xff0c;直接上操作&#xff1a; 非常简单&#xff01;下一个&#xff01; 2&#xff0c;插入数据 1&#xff0c;全列插入 前面也说很多了&#xff0c;直接上操作&#xff1a; 以上插入和全列插入类似&#xff0c;全列…

小红书新ID保持项目StoryMaker,面部特征、服装、发型和身体特征都能保持一致!(已开源)

继之前和大家介绍的小红书在ID保持以及风格转换方面相关的优秀工作&#xff0c;感兴趣的小伙伴可以点击以下链接阅读~ 近期&#xff0c;小红书又新开源了一款文生图身份保持项目&#xff1a;StoryMaker&#xff0c;是一种个性化解决方案&#xff0c;它不仅保留了面部的一致性&…

智能交通与车联网:未来出行的创新变革

随着全球城市化进程的加速和交通需求的不断增加&#xff0c;传统的交通管理方式已经无法满足日益复杂的交通问题。智能交通&#xff08;Intelligent Transportation System, ITS&#xff09;和车联网&#xff08;Internet of Vehicles, IoV&#xff09;作为现代科技与交通行业深…

云手机:社交平台运营的热门工具

随着互联网的飞速发展&#xff0c;社交平台已经成为企业推广和营销的核心渠道。传统的运营方式已经无法满足高效运营的需求&#xff0c;而云手机作为新兴工具&#xff0c;逐渐成为社交平台运营的前沿趋势。本文将深入分析云手机如何优化社交平台的运营流程&#xff0c;助力企业…

outlook 添加企业邮箱账号出现 553 authentication is required 错误解决

系统报错如下 问题原因 发件服务器身份验证设置错误&#xff0c;或者未勾选发送服务器验证的选项。 解决方案 Outlook客户端 本文以Outlook 2016为例&#xff0c;具体操如下&#xff1a; 1、在Outlook客户端的电子邮件设置窗口中&#xff0c;单击其他设置&#xff1b; 2、…

鸿蒙开发(NEXT/API 12)【发送数据到服务器】远场通信场景

场景介绍 客户端请求发送数据到服务器。 开发步骤 导入模块。 import { rcp } from kit.RemoteCommunicationKit; import { BusinessError } from kit.BasicServicesKit;发起请求。"http://www.example.com"请根据实际情况替换为想要请求的URL地址。 const sess…