Vue3+Vite入门：轻松搭建现代化前端应用

本文介绍了Vue3和Vite的基本概念，包括Vue3的主要特性和Vite的快速开发体验。详细讲解了如何安装和配置Vue3+Vite开发环境，并创建和管理项目。通过具体的配置和示例，展示了Vue3+Vite项目的开发流程和优化技巧。

Vue3 的基本介绍

Vue 是一个渐进式前端框架，易于上手，同时也是一个非常灵活的工具。Vue3 是 Vue.js 的最新版本，其主要特点包括：

• Composition API：允许开发者将相关逻辑组合在一起，使逻辑更清晰、可重用性更强。
• 更好的性能：Vue3 优化了响应式系统，使得组件渲染速度更快。
• Tree-shaking：允许开发者编写更小的代码库，因为未使用的代码不会被包含在最终的构建中。
• 更好的 TypeScript 支持：提供了更好的类型推断支持，适用于大型项目。
• Teleport：允许组件内容渲染到 DOM 中的其他位置，而不仅仅是在组件的挂载点。

Vite 的基本介绍

Vite 是一个现代的前端构建工具，基于原生 ES 模块，提供了一个更快的开发体验。Vite 通过服务器在开发环境中直接提供原生 ES 模块，无需打包工具的介入。

• 快速冷启动：Vite 能够在几毫秒内启动服务，因为其使用了 esbuild 这样的编译工具。
• 热重载：Vite 使用了模块热重载，可以实现近乎实时的代码更新。
• 开发环境生产力提升：Vite 提供了更多的开发环境特性，如支持 TypeScript、CSS 预处理器等。

Vue3 和 Vite 的优势

• 更快的启动时间：Vite 的模块热重载和快速冷启动使得开发体验远优于传统的 Webpack 构建工具。
• 更佳的开发体验：Vite 的原生模块解析和热重载机制使得在开发时代码修改后可以立即看到效果。
• 更好的错误报告：Vite 提供了更清晰的错误报告，帮助开发者更快地定位问题。
• 更小的初始加载时间：Vue3 的 Composition API 和 Tree-shaking 使得最终的打包文件体积更小，从而改善了页面加载时间。

安装 Node.js

Node.js 是一个 JavaScript 运行环境，允许在服务器端运行 JavaScript 代码。在开始开发之前，需要确保已经安装了 Node.js。
步骤如下：

1. 访问 Node.js 官方网站。
2. 下载适合你操作系统的最新版本。
3. 安装完成后，打开命令行工具，运行如下命令以验证安装：

   node -v
   npm -v

   如果安装成功，将看到 Node.js 和 npm 的版本号。

创建 Vue3+Vite 项目

为了创建一个新的 Vue3+Vite 项目，可以使用以下命令：

npm init vite@latest my-vue3-vite-project
cd my-vue3-vite-project
npm install

然后，通过 Vite 创建一个新的 Vue3 项目，指定使用 Vite 作为构建工具。

安装依赖并配置项目

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

cd my-vue3-vite-project
npm install

项目的基本配置文件包括 package.json、vite.config.js 等。package.json 文件包含了项目的基本信息和依赖，而 vite.config.js 用于配置 Vite 的构建选项。

// vite.config.js
export default {
  server: {
    port: 3000, // 服务器端口
    host: '0.0.0.0', // 允许外部访问
  },
  build: {
    target: 'es2015', // 目标环境
    minify: 'terser', // 使用 Terser 进行压缩
  },
}

项目文件结构简介

Vue3+Vite 项目的基本目录结构如下：

my-vue3-vite-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── router/
├── .gitignore
├── package.json
├── README.md
└── vite.config.js

• public/：存放静态资源，如 favicon.ico 和 index.html。
• src/：存放项目的源代码，包括组件、样式和逻辑。
• node_modules/：存放项目依赖的 npm 包。
• package.json：定义项目的基本信息和依赖关系。
• vite.config.js：配置 Vite 的构建选项。

主要配置文件解析

package.json 文件中定义了一些重要的字段，例如 scripts、dependencies 和 devDependencies：

{
  "name": "my-vue3-vite-project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "serve": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.2.25",
    "vue-router": "^4.0.11"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.2.25",
    "vite": "^2.9.5"
  }
}

vite.config.js 文件用于配置 Vite 的构建选项：

// vite.config.js
export default {
  server: {
    port: 3000,
    host: '0.0.0.0',
  },
  build: {
    target: 'es2015',
    minify: 'terser',
  },
}

常用命令介绍

• npm run serve 或 npm run dev：启动开发服务器。
• npm run build：构建项目，输出到 dist 目录。
• npm run preview：预览构建后的项目。

创建 Vue 组件

在 Vue3 中，组件是构建界面的基础单元。创建一个新的组件文件 src/components/HelloWorld.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Hello Vue 3 + Vite!',
      count: 0,
    };
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count was changed from ${oldVal} to ${newVal}`);
    },
  },
};
</script>

<style scoped>
.hello {
  color: #42b983;
}
</style>

在这个组件中，定义了一个 msg 变量和一个 count 变量。watch 监听 count 的变化，并在控制台输出变化信息。

使用 JSX 编写组件

Vue3 支持使用 JSX 语法编写组件。首先需要安装 babel-plugin-transform-vue-jsx 插件：

npm install @babel/plugin-transform-vue-jsx --save-dev

然后在 babel.config.js 文件中配置插件：

module.exports = {
  plugins: ['@babel/plugin-transform-vue-jsx'],
};

创建一个使用 JSX 的组件文件 src/components/HelloWorldWithJSX.vue：

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

<template>
  <div>
    <h1>Hello Vue 3 + Vite!</h1>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<style scoped>
div {
  color: #42b983;
}
</style>

在这个组件中，定义了一个 count 变量，并使用 ref 创建响应式数据。点击按钮时调用 increment 函数，使 count 值增加。

简单的路由配置

Vue3 使用 Vue Router 来管理路由。在 src/router/index.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import HelloWorld from '../components/HelloWorld.vue';

const routes = [
  { path: '/', component: HelloWorld },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在 src/main.js 中引入并使用路由配置：

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

createApp(App).use(router).mount('#app');

在 src/App.vue 中使用路由视图：

<template>
  <router-view></router-view>
</template>

现在，访问根路径会显示 HelloWorld 组件的内容。

模块化与按需加载

使用 Vue3 的模块化特性可以实现按需加载。例如，可以在 main.js 中按需引入组件：

import { createApp } from 'vue';
import App from './App.vue';
import HelloWorld from './components/HelloWorld.vue'; // 按需引入组件

const app = createApp(App);

// 注册组件时按需引入
app.component('HelloWorld', HelloWorld);

app.mount('#app');

静态资源优化

静态资源，如图片、字体等，可以进行压缩和优化。例如，使用 vite-plugin-compression 插件来压缩静态资源：

npm install vite-plugin-compression --save-dev

在 vite.config.js 中配置插件：

import compression from 'vite-plugin-compression';

export default {
  // 其他配置...
  plugins: [
    compression({
      ext: '.gz',
    }),
  ],
};

这将确保静态资源被压缩并以 .gz 格式输出。

代码分割与缓存

Vue3 支持动态导入，可以实现代码分割。例如，在组件中使用动态导入：

<script setup>
import { ref, defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));
</script>

<template>
  <div>
    <h1>Hello Vue 3 + Vite!</h1>
    <async-component></async-component>
  </div>
</template>

这将确保 AsyncComponent 在实际使用时才被加载，从而实现代码的按需加载和分割。

单元测试简介

Vue3 支持使用 Jest 进行单元测试。首先需要安装 Jest 和 Vue Test Utils：

npm install --save-dev jest @vue/vue-test-utils

然后在 package.json 中添加测试脚本：

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch",
}

在 src/components/HelloWorld.vue 旁边创建一个测试文件 HelloWorld.spec.js：

import { shallowMount } from '@vue/test-utils';
import HelloWorld from '../components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const wrapper = shallowMount(HelloWorld, {
      props: { msg: 'Hello World' },
    });
    expect(wrapper.text()).toMatch('Hello World');
  });
});

运行测试：

npm run test

项目打包与部署

在 package.json 中定义打包命令：

"scripts": {
  "build": "vite build",
  "serve": "vite",
  "preview": "vite preview",
}

运行打包命令：

npm run build

打包完成后，可以在 dist 目录下找到打包后的文件。可以将这些文件部署到服务器或托管服务上。

常见问题排查与解决

• 无法启动开发服务器：
  • 确保 Node.js 和 npm 已正确安装。
  • 检查 vite.config.js 中的配置是否正确。
  • 确保没有端口冲突。
  • 样例配置文件：

    // vite.config.js
    export default {
    server: {
    port: 3000,
    host: '0.0.0.0',
    },
    };

• 代码不生效：
  • 检查代码是否正确导入。
  • 使用浏览器开发者工具查看控制台输出和网络请求，找出问题所在。
• 打包失败：
  • 检查 vite.config.js 中的构建配置。
  • 确保所有依赖包都已正确安装。
  • 样例配置文件：

    // vite.config.js
    export default {
    build: {
    target: 'es2015',
    minify: 'terser',
    },
    };