第2章 Vite快速上手

第2章 Vite快速上手

1 安装 Vite

1.1 安装 Node.js 和 npm

在开始使用 Vite 之前，你需要确保已经安装了 Node.js 和 npm（Node 包管理器）。你可以从 Node.js 官方网站下载并安装最新版本的 Node.js。安装 Node.js 时，npm 会自动安装。

安装完成后，可以通过命令行检查安装是否成功：

node -v
npm -v

这会显示你安装的 Node.js 和 npm 的版本。

1.2 创建 Vite 项目

使用 npm 或 Yarn 创建一个新的 Vite 项目。以下是使用 npm 的方法：

npm create vite@latest

运行这个命令后，系统会提示你输入项目名称和选择模板。你可以根据需要选择 Vue、React、Svelte 等模板。

使用 Yarn

如果你更喜欢使用 Yarn，可以使用以下命令：

yarn create vite

1.3 安装依赖

创建项目后，进入项目目录并安装依赖：

cd my-vite-project
npm install

或者使用 Yarn：

cd my-vite-project
yarn

2 创建第一个 Vite 项目

2.1 项目结构解析

创建 Vite 项目后，默认的项目结构如下：

my-vite-project
├── index.html
├── package.json
├── src
│   ├── main.js
│   └── App.vue (如果选择了 Vue 模板)
└── vite.config.js (可选)
index.html

这是应用的入口 HTML 文件。Vite 不需要复杂的 HTML 模板，只需要一个简单的 index.html 文件即可。

package.json

这是 Node.js 项目的配置文件，包含项目的元数据和依赖信息。

src/

这是你的源码目录，所有的应用代码都在这里。main.js 是应用的入口文件。

vite.config.js

这是 Vite 的配置文件。对于简单项目，这个文件是可选的。

2.2 启动开发服务器

在项目目录中运行以下命令启动 Vite 开发服务器：

npm run dev

或者使用 Yarn：

yarn dev

开发服务器启动后，终端会显示访问地址，通常是 http://localhost:3000。你可以在浏览器中打开这个地址查看应用。

2.3 项目文件解析

main.js

这是应用的入口文件，用于挂载根组件并启动应用。以下是一个 Vue 项目中 main.js 的示例：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
App.vue

这是应用的根组件。在 Vue 项目中，App.vue 通常是应用的主组件。以下是一个简单的示例：

<template>
  <div id="app">
    <h1>Hello Vite!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3 项目结构解析

3.1 index.html

Vite 的 index.html 文件是项目的入口 HTML 文件，它不同于传统构建工具的模板文件。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>
特点
  • 模块化支持：Vite 通过 <script type="module"> 标签引入模块，这样浏览器可以直接加载和执行模块。
  • 简单直观：不像传统工具的复杂模板引擎，Vite 的 index.html 文件是一个简单的 HTML 文件，易于理解和维护。

3.2 package.json

这是 Node.js 项目的配置文件，定义了项目的元数据和依赖。以下是一个示例：

{
  "name": "my-vite-project",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3. 0"
  },
  "devDependencies": {
    "vite": "^4.0.0"
  }
}
关键字段
  • scripts：定义了项目的常用命令，如 dev（启动开发服务器）、build（构建生产版本）和 serve（预览构建结果）。
  • dependencies：定义了项目的运行时依赖，如 Vue。
  • devDependencies：定义了项目的开发时依赖，如 Vite。

3.3 src/ 目录

这是你的源码目录，所有的应用代码都在这里。以下是一个典型的目录结构：

src
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── main.js
└── App.vue
main.js

这是应用的入口文件，用于挂载根组件并启动应用。以下是一个示例：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
App.vue

这是应用的根组件。在 Vue 项目中，App.vue 通常是应用的主组件。以下是一个简单的示例：

<template>
  <div id="app">
    <h1>Hello Vite!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
组件目录

你可以在 components 目录中创建和组织你的 Vue 组件。以下是一个简单的示例：

<!-- src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.hello {
  font-size: 2em;
  text-align: center;
}
</style>

在 App.vue 中引入并使用这个组件：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vite App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4 启动开发服务器

在项目目录中运行以下命令启动 Vite 开发服务器：

npm run dev

或者使用 Yarn：

yarn dev

4.1 配置开发服务器

你可以通过 vite.config.js 文件配置开发服务器。例如，可以配置代理以解决跨域问题：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http

://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}

4.2 使用 HMR（模块热替换）

Vite 开发服务器默认支持 HMR，当你修改代码时，浏览器会自动更新，而不需要手动刷新页面。

HMR 的优势
  • 即时反馈：修改代码后立即看到效果，提升开发效率。
  • 状态保持：页面不刷新，保持当前应用状态，避免重复操作。

5 构建生产版本

5.1 构建命令

在项目目录中运行以下命令构建生产版本：

npm run build

或者使用 Yarn：

yarn build

5.2 构建输出

构建完成后，生成的文件将输出到 dist 目录。你可以将这个目录部署到静态服务器上。

dist 目录结构
dist
├── index.html
├── assets
│   ├── index.abc123.js
│   └── index.abc123.css
└── ...

5.3 配置构建选项

你可以通过 vite.config.js 文件配置构建选项，例如，指定输出目录、设置公共路径等：

// vite.config.js
export default {
  build: {
    outDir: 'build',  // 自定义输出目录
    assetsDir: 'static',  // 自定义静态资源目录
    rollupOptions: {
      output: {
        // 自定义 Rollup 输出选项
      }
    }
  }
}

5.4 预览构建结果

你可以使用 Vite 提供的命令预览构建结果：

npm run serve

或者使用 Yarn：

yarn serve

预览服务器会在本地启动，你可以在浏览器中查看构建后的应用。

6 自定义配置

6.1 Vite 配置文件

vite.config.js 是 Vite 的配置文件，你可以在这里自定义 Vite 的行为。例如，可以配置别名、插件等：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})
配置别名

通过配置别名，可以简化模块导入路径：

// vite.config.js
export default {
  resolve: {
    alias: {
      '@components': '/src/components'
    }
  }
}
添加插件

Vite 具有强大的插件系统，可以通过插件扩展其功能。以下是一个添加 Vue 插件的示例：

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()]
}

6.2 环境变量

Vite 支持使用 .env 文件管理环境变量。你可以在项目根目录创建 .env 文件：

# .env
VITE_API_URL=https://api.example.com

在代码中，可以通过 import.meta.env 访问环境变量：

console.log(import.meta.env.VITE_API_URL)

6.3 多环境配置

你可以为不同的环境创建不同的 .env 文件，例如 .env.development 和 .env.production：

# .env.development
VITE_API_URL=https://dev.api.example.com

# .env.production
VITE_API_URL=https://api.example.com

Vite 会根据当前环境加载相应的 .env 文件。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

亲密数对C++函数

亲密数对C++函数

自定义函数 #include<bits/stdc.h> using namespace std; //求n的因子和自定义函数 int yinzihe(int n){//使用2~sqrt(n)成对求解因子和int r0,i;//变量 r 初始值为0&#xff0c;因为要存放因子和for(i2;i<sqrt(n);i) {//回顾sqrt()课程//如果 i 是 n 的因子&#xf…
阅读更多...
微笑背后的秘密：理解自闭症儿童的面部表情控制

微笑背后的秘密：理解自闭症儿童的面部表情控制

在星贝育园自闭症儿童康复学校&#xff0c;我们常常遇到家长们提出的一个有趣而引人深思的问题&#xff1a;“为什么我的孩子似乎控制不住面部表情&#xff0c;尤其是频繁地笑&#xff1f;”这个问题背后&#xff0c;隐藏着自闭症谱系障碍&#xff08;ASD&#xff09;儿童独特的…
阅读更多...
Caffeinated for Mac v2.0.6 Mac防休眠应用 兼容 M1/M2/M3

Caffeinated for Mac v2.0.6 Mac防休眠应用 兼容 M1/M2/M3

Caffeinated 可以防止您的 Mac 进入休眠状态、屏幕变暗或者启动屏幕保护。 应用介绍 您的屏幕是否总是在您不希望的时候变暗&#xff1f;那么Caffeinated就是您解决这个大麻烦的最好工具啦。Caffeinated是在Caffeine这个非常便捷、有用的工具的基础上开发而来的。Caffeinated…
阅读更多...
20240707 每日AI必读资讯

20240707 每日AI必读资讯

&#x1f9e0;中国生成式AI专利数量超过美国 6 倍 - 中国在2014年至2023年期间申请的生成式AI专利数量达到38210个&#xff0c;超过了美国的6倍。 - 腾讯、平安保险集团和百度是GenAI专利数量最多的中国公司。 - 中国的顶级学术机构和技术生态为生成式AI的发展提供了强大支持…
阅读更多...
算法简介：什么是算法？——定义、历史与应用详解

算法简介：什么是算法？——定义、历史与应用详解

引言 在现代计算机科学中&#xff0c;算法是一个核心概念。无论是编程还是数据分析&#xff0c;算法都扮演着至关重要的角色。在这篇博客中&#xff0c;我们将深入探讨算法的定义、历史背景以及它在计算机科学中的地位和实际应用。 什么是算法&#xff1f; 算法是解决特定问题…
阅读更多...
DHCP的原理及配置

DHCP的原理及配置

目录 一、了解DHCP服务 1.什么是DHCP 1.1DHCP广播 2.使用DHCP的好处 2.1为什么使用DHCP 3.DHCP的模式与分配方式 3.1分配方式 3.2模式 二、DHCP工作原理 1.四次回话 2.重新登录 3.更新租约 4.扩展 三、安装DHCP服务 四、DHCP局部配置并且测试 五、使用…
阅读更多...
简介空间复杂度

简介空间复杂度

我们承接上一篇博客。我们写了时间复杂度之后&#xff0c;我们就要来介绍一下另一个相关复杂度了。空间复杂度。我觉得大家应该对空间复杂度认识可能比较少一些。我就是这样&#xff0c;我很少看见题目中有明确要求过空间复杂度的。但确实有这个是我们不可忽视的&#xff0c;所…
阅读更多...
在门店里造绿色氧吧！康养行业也这么卷了？

在门店里造绿色氧吧！康养行业也这么卷了？

拼啥不如拼健康&#xff0c;现在的人算是活明白了&#xff0c;不但中老年人这样想&#xff0c;年轻人也这样干。你可能不知道&#xff0c;现在众多健康养生门店&#xff0c;逐渐成了年轻人“组团养生”的好去处&#xff0c;也是他们吃喝玩乐之外的新兴消费趋势。 而在看得见的…
阅读更多...
无需服务器，浏览器跑700+AI模型？！【送源码】

无需服务器，浏览器跑700+AI模型？！【送源码】

Transformers.js 是一个创新的网络机器学习库&#xff0c;它将先进的 Transformer 模型直接带入浏览器&#xff0c;无需服务器端支持。这个库与 Hugging Face 的 Python transformers 库功能对等&#xff0c;提供相似的 API 接口来运行预训练模型&#xff0c;涵盖了自然语言处理…
阅读更多...
Java引用的4种类型：强、软、弱、虚

Java引用的4种类型：强、软、弱、虚

在Java中&#xff0c;引用的概念不仅限于强引用&#xff0c;还包括软引用、弱引用和虚引用&#xff08;也称为幻影引用&#xff09;。这些引用类型主要用于不同的内存管理策略&#xff0c;尤其是在垃圾收集过程中。以下是对这四种引用类型的详细解释&#xff1a; 1. 强引用&am…
阅读更多...
【实践分享】深度学习远程连接GPU

【实践分享】深度学习远程连接GPU

目录 前言 一、创建实例 二、上传文件 三、服务器上传 四、运行代码文件 前言 1、使用平台&#xff1a;恒源云 2、教程总结自B站大佬Larry同学发布的教程视频 一、创建实例 通俗&#xff1a;租用一台临时的电脑&#xff0c;电脑可自选GPU型号等&#xff0c;按照项目需…
阅读更多...
品质至上！中国星坤连接器的发展之道！

品质至上！中国星坤连接器的发展之道！

在电子连接技术领域&#xff0c;中国星坤以其卓越的创新能力和对品质的不懈追求&#xff0c;赢得了业界的广泛认可。凭借在高精度连接器设计和制造上的领先地位&#xff0c;星坤不仅获得了多项实用新型专利&#xff0c;更通过一系列国际质量管理体系认证&#xff0c;彰显了其产…
阅读更多...
【原理+使用】DeepCache: Accelerating Diffusion Models for Free

【原理+使用】DeepCache: Accelerating Diffusion Models for Free

论文&#xff1a;arxiv.org/pdf/2312.00858 代码&#xff1a;horseee/DeepCache: [CVPR 2024] DeepCache: Accelerating Diffusion Models for Free (github.com) 介绍 DeepCache是一种新颖的无训练且几乎无损的范式&#xff0c;从模型架构的角度加速了扩散模型。DeepCache利…
阅读更多...
树（相关知识点）

树（相关知识点）

目录 结点的度&#xff1a;某一个结点所含有字数的个数 叶节点&#xff1a;最后一个结点 非终端节点:不是叶结点 兄弟结点&#xff1a;亲兄弟结点 树的度&#xff1a;最大节点的度 层次&#xff1a;根为第一层&#xff0c;根的子结点为第二层&#xff0c;以此类推 森林&am…
阅读更多...
[附源码]基于Flask的演唱会购票系统

[附源码]基于Flask的演唱会购票系统

摘要 随着互联网技术的普及和发展&#xff0c;传统购票方式因其效率低下、流程繁琐等问题已难以满足现代社会的需求。本文设计并实现了一个基于Flask框架的演唱会购票系统&#xff0c;该系统集成了用户管理、演唱会信息管理、票务管理以及数据统计与分析等功能模块&#xff0c…
阅读更多...
linux centos7.9 安装mysql5.7；root设置客户端登录、配置并发、表名大小写敏感等

linux centos7.9 安装mysql5.7；root设置客户端登录、配置并发、表名大小写敏感等

查看centos版本 cat /etc/centos-releasecentos版本为7.9 查看是否已安装mariadb,安装了需要先删除 1.查看是否安装了mariadb和mysql&#xff0c;安装了需要先删除 mariadb是mysql的一个分支&#xff0c;但要安装mysql需要删除它 执行rpm -qa|grep mariadb,查看mariadb情况…
阅读更多...
Hi6602 恒压恒流SSR电源方案

Hi6602 恒压恒流SSR电源方案

Hi6602是一款针对离线式反激电源设计的高性能PWM控制器。Hi6602内集成有通用的原边恒流控制技术&#xff0c;可支持断续模式和连续模式工作&#xff0c;适用于恒流输出的隔离型电源应用中。Hi6602内部具有高精度65kHz开关频率振荡器&#xff0c;且带有抖频功能可优化EMI性能。H…
阅读更多...
AI大模型技术分析

AI大模型技术分析

一文读懂&#xff1a;AI大模型&#xff01; 引言 近年来&#xff0c;随着深度学习技术的迅猛发展&#xff0c;AI大模型已经成为人工智能领域的重要研究方向和热点话题。AI大模型&#xff0c;指的是拥有巨大参数规模和强大学习能力的神经网络模型&#xff0c;如BERT、GPT等&…
阅读更多...
java IO流(1)

java IO流(1)

一. 文件类 java中提供了一个File类来表示一个文件或目录(文件夹),并提供了一些方法可以操作该文件 1. 文件类的常用方法 File(String pathname)构造方法,里面传一个路径名,用来表示一个文件boolean canRead()判断文件是否是可读文件boolean canWrite()判断文件是否是可写文…
阅读更多...
spring boot读取yml配置注意点记录

spring boot读取yml配置注意点记录

问题1&#xff1a;yml中配置的值加载到代码后值变了。 现场yml配置如下&#xff1a; type-maps:infos:data_register: 0ns_xzdy: 010000ns_zldy: 020000ns_yl: 030000ns_jzjz: 040000ns_ggglyggfwjz: 050000ns_syffyjz: 060000ns_gyjz: 070000ns_ccywljz: 080000ns_qtjz: 090…
阅读更多...
最新文章

Copyright @ 2022~2023