前端 Vue+Js+Vite 开发环境搭建

1. 创建项目

npm create vite@latest

2. 配置项目

1.输入项目名称：

Project name: my-vue3-app

2.选择框架：
选择 Vue 作为框架：

Select a framework: › Vue

3.选择语言：
选择 JavaScript 作为开发语言：

Select a variant: › JavaScript

4.完成创建：
项目创建完成后，进入项目目录：
cd my-vue3-app

3. 安装依赖

npm install

4. 运行开发服务器

npm run dev

5. 项目结构

my-vue3-app/
├── node_modules/      # 依赖包
├── public/            # 静态资源
├── src/               # 源代码
│   ├── assets/        # 静态资源（如图片、字体）
│   ├── components/    # 组件
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── index.html         # 主页面
├── package.json       # 项目配置
├── vite.config.js     # Vite 配置文件
└── ...                # 其他配置文件

6. 开发与构建

• 开发模式：
  运行 npm run dev，Vite 会启动开发服务器，支持热更新。

• 生产构建：
  运行以下命令，生成生产环境的代码：

• npm run build

 7. 配置 Vite（可选）

如果需要自定义 Vite 的配置，可以修改 vite.config.js 文件。例如：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000, // 修改开发服务器端口
  },
});

8. 安装 Vue 相关工具（可选）

Vue Router（路由管理）：

npm install vue-router@4

Pinia（状态管理）：

npm install pinia

ESLint（代码检查）：

npm install eslint eslint-plugin-vue --save-dev

通过以上步骤，你已经成功创建了一个 Vue 3 + JavaScript + Vite 的开发环境。接下来可以开始开发你的 Vue 3 应用了！如果需要进一步扩展功能，可以参考 Vue 和 Vite 的官方文档：