Vue3入门教程：从零开始搭建项目并运行Vue3应用

引言

Vue3作为前端开发领域的新星，以其高效、简洁和强大的功能吸引了众多开发者的目光。本文将带领你从零开始，一步步搭建一个Vue3项目，并通过详细的步骤解析，确保你能够轻松上手并运行你的第一个Vue3应用。

一、环境准备

在开始之前，我们需要确保开发环境已经配置妥当。以下是必要的准备工作：

Node.js环境安装

Vue3需要Node.js环境支持，建议安装18.0或更高版本的Node.js。
你可以从Node.js官网下载并安装最新版本。

推荐包管理器：pnpm

pnpm是一个高效的包管理器，比传统的npm和yarn更快，且节省磁盘空间。
安装pnpm：
```
npm install -g pnpm
```

安装create-vue工具

create-vue是Vue官方提供的新一代脚手架工具，基于Vite构建。
安装命令：
```
npm init vue@latest
```

二、创建Vue3项目

接下来，我们将使用create-vue工具来创建一个新的Vue3项目。

运行创建项目命令

打开终端，运行以下命令：
```
npm create vue
```
或者使用pnpm：
```
pnpm create vue
```

填写项目名称

命令行会提示你输入项目名称，例如my-vue3-project。

选择前端框架

选择Vue作为前端框架。

选择语法类型

你可以选择JavaScript或TypeScript。推荐使用TypeScript，因为它提供了静态类型检查，有助于提高代码的健壮性和可维护性。

按提示运行代码

根据终端提示，完成项目的创建。

浏览器预览

项目创建完成后，进入项目目录：
```
cd my-vue3-project
```
安装依赖：
```
pnpm install
```
启动开发服务器：
```
pnpm run dev
```
打开浏览器，访问localhost:5173，你将看到Vue3的欢迎界面。

三、项目结构解析

一个标准的Vue3项目结构如下：

public目录：用于存放静态资源文件，如index.html。
src目录：包含主要的应用代码。
- assets：存放静态资源，如图片、样式文件。
- components：存放Vue组件。
- views：存放页面组件。
- router：存放路由配置。
- store：存放状态管理配置。
- main.js：项目的入口文件。
vite.config.ts：Vite配置文件。
package.json：项目依赖和配置文件。

四、路径别名配置

为了简化导入路径，我们可以配置相对路径别名。

修改vite.config.ts

在vite.config.ts文件中添加以下配置： “`typescript import { defineConfig } from ‘vite’; import vue from ‘@vitejs/plugin-vue’; import { fileURLToPath, URL } from ‘node:url’;

export default defineConfig({ plugins: [vue()], resolve: {

 alias: {
   '@': fileURLToPath(new URL('./src', import.meta.url)),
 },

}, }); “`

安装@types/node

为了确保配置正常工作，需要安装@types/node：
```
pnpm install -D @types/node
```

五、自动导入Element Plus组件

Element Plus是一个基于Vue3的UI库，我们可以通过插件实现自动导入。

安装插件

安装unplugin-auto-import和unplugin-vue-components：


pnpm install unplugin-auto-import unplugin-vue-components

配置Vite

在vite.config.ts中添加以下配置： “`typescript import AutoImport from ‘unplugin-auto-import/vite’; import Components from ‘unplugin-vue-components/vite’; import { ElementPlusResolver } from ‘unplugin-vue-components/resolvers’;

export default defineConfig({ plugins: [

 vue(),
 AutoImport({
   resolvers: [ElementPlusResolver()],
 }),
 Components({
   resolvers: [ElementPlusResolver()],
 }),

], resolve: {

 alias: {
   '@': fileURLToPath(new URL('./src', import.meta.url)),
 },

}, }); “`

使用Element Plus组件

现在你可以直接在组件中使用Element Plus的组件，无需手动导入。

六、定制Element Plus主题色

通过SCSS变量替换方案，我们可以定制Element Plus的主题色。

安装sass依赖

安装sass：
```
pnpm install -D sass
```

创建scss样式文件

在src目录下创建styles文件夹，并添加element-variables.scss文件： “`scss /* src/styles/element-variables.scss */ $–color-primary: teal;

@import “element-plus/packages/theme-chalk/src/index”; “`

修改Vite配置

在vite.config.ts中添加以下配置：


export default defineConfig({
css: {
 preprocessorOptions: {
   scss: {
     additionalData: `@import "@/styles/element-variables.scss";`,
   },
 },
},
plugins: [
 vue(),
 AutoImport({
   resolvers: [ElementPlusResolver()],
 }),
 Components({
   resolvers: [ElementPlusResolver()],
 }),
],
resolve: {
 alias: {
   '@': fileURLToPath(new URL('./src', import.meta.url)),
 },
},
});

七、总结

通过以上步骤，你已经成功搭建了一个Vue3项目，并学会了如何配置路径别名、自动导入Element Plus组件以及定制主题色。Vue3的强大功能和灵活配置将为你后续的开发工作提供极大的便利。