vue3 vite 创建项目

### 如何使用 Vue3 和 Vite 创建项目 要创建一个基于 Vue 3 和 Vite 的新项目，可以按照以下方法操作： 通过命令行工具运行 `npm` 命令来初始化一个新的 Vue 3 + Vite 项目。具体命令如下所示[^4]： ```bash npm create vite@latest mytest --template vue ``` 执行上述命令后，系统会提示选择框架以及变体版本（如 JavaScript 或 TypeScript）。选定之后，脚手架会在指定目录下生成基础配置文件。 完成项目的初始搭建后，进入该项目路径并安装依赖项： ```bash cd mytest npm install ``` 接着启动开发服务器以便验证环境是否正常工作： ```bash npm run dev ``` 当构建好基本结构以后，在源码根目录下的 `src` 文件夹里新建名为 `App.vue` 的组件用于定义应用的核心部分，并加入相应模板代码片段[^1]: ```html <template> <div> <h1>Hello Electron + Vue 3!</h1> </div> </template> <script> export default { name: 'App', }; </script> <style> h1 { color: #42b883; } </style> ``` 对于更复杂的场景需求，则需进一步调整配置文件比如 `vite.config.ts` 来支持插件功能扩展[^2]。以下是经过增强处理过的样例设置内容： ```typescript import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import Components from 'unplugin-vue-components/vite'; import {VantResolver} from '@vant/auto-import-resolver'; import AutoImport from 'unplugin-auto-import/vite' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), Components({ resolvers: [VantResolver()], }), AutoImport({ imports: ['vue', 'vue-router', 'vue-i18n'], dts: 'src/auto-imports.d.ts' }), ], }) ``` 最后一步是在包管理器配置清单即 `package.json` 中补充额外的任务指令以方便日常维护作业，例如添加 ESLint 自动修复服务的相关入口[^3]： ```json { "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "lint": "eslint --ext .js,.vue --ignore-path .eslintignore --fix src" }, ... } ``` 这样就完成了整个流程介绍，从零开始建立了一个具备现代前端技术栈特性的工程实例。 相关问题