【Vue TS】项目架构、环境搭建 -------（Vite)安装初始化（一）

目录

• • • • 前言
      • 第一章 安装 Vite，本篇基于npm进行（请检测自己的node版本）
      • 第二章 创建项目
      • 第三章 项目配置
      • 第四章 项目目录结构划分
      • 第五章 CSS样式的重置
      • 第六章 网络请求封装axios
      • 第七章 状态管理（vuex / pinia）
      • 第八章 区分开发环境和生产环境

前言

“学习能力也好，执行力也罢，核心只有一个：在刚开始的时候，平静地接受自己的笨拙。” 本篇文章是 Vue项目基于 Vite初始化的过程，借此记录一下，巩固基础！

第一章 安装 Vite，本篇基于npm进行（请检测自己的node版本）

具体可看：Vite官方中文文档

npm install -g create-vite-app

全局安装vite，可能会出现：

npm WARN deprecated create-vite-app@1.21.0: create-vite-app has been deprecated. 
run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.

继续输入：

npm init @vitejs/app

第二章 创建项目

创建一个空的项目文件夹，用vscode打开，
打开终端，执行命令：

npm init vue@latest

会出现（以下是示例）：

√ Project name: ... code1 （项目名字）
√ Add TypeScript? ... No / Yes （是否要添加TypeScript）
√ Add JSX Support? ... No / Yes （是否添加JSX，一般React用的比较多，Vue用的少，选择No）
√ Add Vue Router for Single Page Application development? ... No / Yes（是否添加VueRouter，根据需要选择）
√ Add Pinia for state management? ... No / Yes （是否添加Pinia，状态管理器，根据需要选择）
√ Add Vitest for Unit Testing? ... No / Yes （是否添加单元测试）
√ Add an End-to-End Testing Solution? » No （是否添加 端到端 测试）
√ Add ESLint for code quality? ... No / Yes （是否使用ESLint 进行代码检测 质量问题，一般选Yes）
√ Add Prettier for code formatting? ... No / Yes （是否添加Prettier进行项目代码格式化保存，保持项目代码风格一致，可根据需要进行配置！）