vite vue3 js项目搭建

### 使用Vite和Vue3搭建JavaScript项目

#### 安装依赖包
为了创建一个新的基于 Vite 和 Vue 3 的 JavaScript 项目，需先安装 Node.js 及 npm 或 yarn。之后，在命令行工具中执行如下指令来初始化新项目并安装必要的开发依赖项：

npm init vite@latest my-vue-app --template vue
cd my-vite-app
npm install

这段代码会利用 `vite` 创建模板工程，并指定使用 Vue 模板[^1]。

#### 修改配置文件
项目的根目录下有一个名为 `vite.config.js` 的配置文件，其定义了构建行为和其他设置。对于希望集成 ESLint 插件以及设定路径别名的情况，可以按照下面的方式调整该文件的内容：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
    plugins: [
        vue(),
        eslintPlugin({
            include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue'],
        }),
    ],
    resolve: {
        alias: {
            '@': '/src',
        },
    }
});

此段脚本引入了两个插件——一个是用于支持 `.vue` 文件解析的官方插件；另一个则是用来在开发期间自动检测 TypeScript 和 Vue 组件中的潜在错误或不符合编码风格的地方。

#### 启动本地服务器
完成上述操作后，可以通过运行以下命令启动内置的发展模式下的 HTTP 服务端口，默认情况下它会在浏览器打开地址 http://localhost:3000 显示应用界面：

npm run dev

这将激活热重载功能以便于实时预览所做的更改效果。