vue3 vite pc端框架搭建

### Vue3 和 Vite 搭建 PC 端应用框架教程 以下是关于如何使用 Vue3 和 Vite 构建一个完整的 PC 端项目的详细说明： #### 一、初始化项目 为了快速搭建 Vue3 的开发环境，可以借助 `pnpm` 或者其他包管理器来完成。推荐使用 `pnpm` 工具，因为它在性能和磁盘空间利用率上表现更优[^2]。 1. **安装 pnpm** 如果尚未安装 `pnpm`，可以通过以下命令全局安装它： ```bash npm install -g pnpm ``` 2. **创建 Vue3 项目** 使用官方脚手架工具创建一个新的 Vue3 项目： ```bash pnpm create vite my-vue-app --template vue cd my-vue-app ``` #### 二、配置环境变量 通过设置 `.env.*` 文件实现不同环境下（如开发模式与生产模式）的差异化配置。 1. 在根目录下新增两个文件用于区分环境： - `.env.development`: 开发环境专用。 ```plaintext VITE_APP_ENV=development VITE_API_BASE_URL=http://localhost:8080/api/ ``` - `.env.production`: 生产环境专用。 ```plaintext VITE_APP_ENV=production VITE_API_BASE_URL=https://api.example.com/ ``` 2. 修改 `package.json` 中的脚本部分以便支持不同的启动方式： ```json { "scripts": { "dev": "vite", "build": "vite build" } } ``` #### 三、集成 Pinia 和 Axios Pinia 是 Vue 官方推出的轻量级状态管理库；Axios 则是一个流行的 HTTP 请求客户端。 1. 添加必要的依赖项到项目中： ```bash pnpm add pinia axios sass ``` 2. 创建基础的状态存储逻辑于 `/src/stores/counter.js` 下面作为例子展示如何操作数据： ```javascript import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++; }, }, }); ``` 3. 配置 Axios 实例并将其挂载至全局对象方便组件调用： ```javascript // src/plugins/axios.js import axios from 'axios'; const service = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, // 动态获取 API 地址 timeout: 5000, }); export default service; ``` #### 四、调整公共钩子函数 如果存在自定义通用方法，则需同步更新这些辅助功能模块以适配新架构需求。 假设有一个名为 `useCommon.js` 的公用 Hook 存在于 hooks 路径里，那么应该按照当前业务场景重构其内部实现细节[^1]。 #### 五、测试页面加载效果 最后一步是对首页模板稍作改动验证整个流程是否顺畅无误。 编辑位于 `views/Home.vue` 组件内的代码片段如下所示： ```html <template> <div class="home"> Current Env Config: {{ envConfig }} </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; const envConfig = ref(''); onMounted(() => { envConfig.value = `${process.env.VUE_APP_ENV} | ${import.meta.env.VITE_API_BASE_URL}`; }); </script> ``` 至此完成了基于 Vue3 + Ant Design Vue + Vite 技术栈的基础工程设立过程。 --- ###