vue3vite项目搭建
时间: 2025-05-11 13:41:00 浏览: 34
### 创建和配置 Vue 3 和 Vite 的新项目
#### 准备工作
确保已经安装 Node.js 及 npm 或 yarn。可以通过命令 `node -v` 和 `npm -v` 来验证版本,这有助于后续工具链的顺利运行[^1]。
#### 安装 Vite
通过 npm 或者 yarn 全局安装 Vite 工具:
```bash
npm install --global create-vite@latest
```
或者使用 Yarn:
```bash
yarn global add create-vite
```
此操作允许从终端快速初始化新的 Vite 项目[^3]。
#### 初始化项目
执行如下命令来启动交互式的项目创建流程:
```bash
create-vite my-vue-app --template vue
```
这里 `my-vue-app` 是项目的名称,而 `--template vue` 参数指定了模板类型为 Vue[^2]。
#### 进入并安装依赖
进入刚刚创建好的文件夹,并安装所需的包:
```bash
cd my-vue-app
npm install
```
对于 Yarn 用户,则应执行:
```bash
yarn
```
这些步骤会下载所有必要的库到本地环境中。
#### 启动开发服务器
完成上述设置之后,可以利用下面的指令开启本地服务来进行调试:
```bash
npm run dev
```
或是针对 Yarn 用户而言:
```bash
yarn dev
```
此时应该可以在浏览器中访问默认地址 http://localhost:3000 查看应用效果。
#### 添加 TypeScript 支持 (可选)
如果希望集成 TypeScript,在初始化阶段可以选择带有 TS 配置的模版;也可以事后手动修改配置文件和支持文件扩展名.ts/.tsx。
#### 使用 Ant Design 组件库 (可选)
为了简化 UI 开发过程,考虑引入像 Ant Design Vue 这样的第三方组件库。按照官方文档指导完成安装后,还可以实现自动按需加载功能以优化打包体积。
#### 整合 ECharts 图表库 (可选)
当有可视化需求时,ECharts 提供了丰富的图表选项。遵循其指南添加至项目内即可开始绘制数据图形。
#### 增加路由管理 (推荐)
为了让应用程序具备多页面导航能力,建议加入 Vue Router 实现单页应用(SPA)模式下的路径切换逻辑。
阅读全文
相关推荐


















