[教程]从零开始：Vue.js与Vite环境搭建与实战指南

引言Vue.js 是一款流行的前端JavaScript框架，它使得构建用户界面和单页应用程序变得更加容易。Vite 是一个现代化的前端构建工具，它旨在提供快速的启动、构建和热重载。本文将带您从零开始，...

引言

Vue.js 是一款流行的前端JavaScript框架，它使得构建用户界面和单页应用程序变得更加容易。Vite 是一个现代化的前端构建工具，它旨在提供快速的启动、构建和热重载。本文将带您从零开始，逐步搭建 Vue.js 与 Vite 的开发环境，并通过实战项目来加深理解。

第1章：准备工作

1.1 安装 Node.js

Vite 需要 Node.js 环境，因此首先确保您的计算机上安装了 Node.js。您可以从 Node.js 官网 下载并安装。

1.2 安装 Vue CLI

虽然 Vite 可以独立使用，但为了方便起见，我们可以使用 Vue CLI 来创建 Vue 项目。

npm install -g @vue/cli

1.3 创建 Vue 项目

使用 Vue CLI 创建一个新项目：

vue create my-vue-project

选择默认配置或手动选择配置项。

第2章：安装 Vite

2.1 添加 Vite

在项目根目录下，使用 npm 安装 Vite：

npm install --save-dev vite

2.2 配置 Vite

在项目根目录下创建一个 vite.config.js 文件，并添加以下配置：

import { defineConfig } from 'vite';
export default defineConfig({ base: '/', build: { outDir: 'dist', assetsDir: 'assets', }, plugins: [],
});

2.3 使用 Vite

现在，您可以使用 Vite 来启动项目：

npm run vite

这将启动开发服务器，默认情况下，访问 http://localhost:3000 可以看到您的 Vue 应用。

第3章：实战项目

3.1 创建项目结构

在 src 目录下创建以下文件和文件夹：

• components/：存放 Vue 组件
• views/：存放视图组件
• assets/：存放静态资源

3.2 创建组件

在 components 目录下创建一个名为 HelloWorld.vue 的组件：

<template> <div>{{ message }}</div>
</template>
<script>
export default { name: 'HelloWorld', data() { return { message: 'Hello, Vite!' }; }
};
</script>
<style scoped>
div { color: red;
}
</style>

3.3 使用组件

在 views/Home.vue 中使用 HelloWorld 组件：

<template> <div> <h1>Welcome to My Vue App</h1> <HelloWorld /> </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue';
export default { name: 'Home', components: { HelloWorld }
};
</script>

3.4 启动项目

使用 Vite 启动项目，并访问 http://localhost:3000 来查看效果。

第4章：进阶配置

4.1 配置别名

在 vite.config.js 中配置别名：

import { defineConfig } from 'vite';
export default defineConfig({ base: '/', build: { outDir: 'dist', assetsDir: 'assets', }, resolve: { alias: { '@': '/src' } }, plugins: [],
});

4.2 配置环境变量

在 vite.config.js 中配置环境变量：

import { defineConfig } from 'vite';
export default defineConfig({ base: '/', build: { outDir: 'dist', assetsDir: 'assets', }, define: { 'process.env': { VITE_APP_TITLE: '"My Vue App"' } }, plugins: [],
});

4.3 使用环境变量

在 Vue 组件中访问环境变量：

export default { name: 'Home', data() { return { title: import.meta.env.VITE_APP_TITLE }; }
};

总结

通过本文，您已经学会了如何从零开始搭建 Vue.js 与 Vite 的开发环境，并通过实战项目加深了对 Vue.js 和 Vite 的理解。希望这篇文章能帮助您在 Vue.js 和 Vite 的学习之路上更进一步。