vue3 vite搭建项目
时间: 2025-01-24 11:06:13 浏览: 40
### 使用Vue 3和Vite搭建项目的指南
#### 创建新项目
为了创建一个新的基于 Vue 3 和 Vite 的项目,可以利用 `create-vite` 脚手架工具来快速初始化环境。通过命令行执行如下指令:
```bash
npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
```
这组命令会下载并安装必要的依赖项以及设置好基础结构。
#### 安装插件和支持库
对于希望集成 ESLint 来保持代码质量标准的情况,在完成上述基本构建之后还需要额外引入一些开发阶段所需的包。可以通过 npm 或 yarn 添加这些资源:
```bash
npm install @vitejs/plugin-vue eslint vite-plugin-eslint -D
```
此操作将会把 Vue 插件、ESLint 及其对应的 Vite 插件加入到开发者模式下的依赖列表里[^1]。
#### 修改配置文件
接下来要编辑位于根目录下的 `vite.config.js` 文件以适应特定需求。具体来说就是导入相应的模块并将它们注册为插件的一部分;同时定义路径别名以便简化相对路径引用。以下是经过调整后的配置实例:
```javascript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vie'; // 注意这里可能存在笔误应为'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` 单文件组件的支持,还集成了 ESLint 检查机制用于静态分析源码中的潜在问题,并设置了方便的路径映射规则。
#### 启动开发服务器
一切准备就绪后,只需运行简单的启动命令即可开启本地服务端口供调试用途:
```bash
npm run dev
```
此时应该可以在浏览器中访问指定地址查看应用界面了。
阅读全文
相关推荐


















