第2章 Vite快速上手

日里安2024-07-08 2:32

第2章 Vite快速上手

1 安装 Vite

1.1 安装 Node.js 和 npm

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

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

sh 复制代码 
node -v
npm -v

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

1.2 创建 Vite 项目

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

sh 复制代码 
npm create vite@latest

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

使用 Yarn

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

sh 复制代码 
yarn create vite

1.3 安装依赖

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

sh 复制代码 
cd my-vite-project
npm install

或者使用 Yarn：

sh 复制代码 
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 开发服务器：

sh 复制代码 
npm run dev

或者使用 Yarn：

sh 复制代码 
yarn dev

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

2.3 项目文件解析

main.js

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

js 复制代码 
import { createApp } from 'vue'
import App from './App.vue'

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

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

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 文件，它不同于传统构建工具的模板文件。以下是一个示例：

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 项目的配置文件，定义了项目的元数据和依赖。以下是一个示例：

json 复制代码 
{
  "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

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

js 复制代码 
import { createApp } from 'vue'
import App from './App.vue'

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

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

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 组件。以下是一个简单的示例：

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 中引入并使用这个组件：

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 开发服务器：

sh 复制代码 
npm run dev

或者使用 Yarn：

sh 复制代码 
yarn dev

4.1 配置开发服务器

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

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 构建命令

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

sh 复制代码 
npm run build

或者使用 Yarn：

sh 复制代码 
yarn build

5.2 构建输出

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

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

5.3 配置构建选项

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

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

5.4 预览构建结果

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

sh 复制代码 
npm run serve

或者使用 Yarn：

sh 复制代码 
yarn serve

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

6 自定义配置

6.1 Vite 配置文件

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

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

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

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

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

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

js 复制代码 
// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()]
}

6.2 环境变量

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

sh 复制代码 
# .env
VITE_API_URL=https://api.example.com

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

js 复制代码 
console.log(import.meta.env.VITE_API_URL)

6.3 多环境配置

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

sh 复制代码 
# .env.development
VITE_API_URL=https://dev.api.example.com
sh 复制代码 
# .env.production
VITE_API_URL=https://api.example.com

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

相关推荐
Small-K1 天前
前端框架中@路径别名原理和配置
前端·webpack·typescript·前端框架·vite
小茹想睡觉4 天前
vite 底层解析
vite
闪光桐人6 天前
uniapp/vue项目 import 导入文件时提示Module is not installed，‘@/views/xxx‘路径无法追踪
前端·vue.js·webpack·uni-app·vite
AmHardy11 天前
现代前端构建工具对比：Vue CLI、Webpack 和 Vite
webpack·前端框架·vite·构建工具·vue cli
Amd79411 天前
Nuxt Kit 实用工具的使用示例
webpack·api·vite·配置·nuxt·构建·kit
Amd79412 天前
使用 Nuxt Kit 的构建器 API 来扩展配置
webpack·vite·前端开发·插件·nuxt kit·扩展配置·构建器 api
red润16 天前
Vue3DevTools7是如何在vscode定位指定文件位置的？
前端·vue.js·vite
小许_.21 天前
vite+vue3快速构建项目+router、vuex、scss安装
前端·css·vue3·vite·scss
唯之为之23 天前
vue3项目部署到Github
vue·github·pnpm·vue3·vite
williamdsy1 个月前
【vite-plugin-vuetify】自动导入 vuetify 组件和指令
vite·plugin·vuetify·自动导入
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache