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

本文档详细介绍了如何使用Vite进行Vue项目的初始化,包括安装Vite,创建项目,配置项目环境,设置项目目录结构,CSS样式重置,网络请求的axios封装,状态管理(vuex/pinia)以及区分开发和生产环境的配置方法。
摘要由CSDN通过智能技术生成

前言

“学习能力也好,执行力也罢,核心只有一个:在刚开始的时候,平静地接受自己的笨拙。” 本篇文章是 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进行项目代码格式化保存,保持项目代码风格一致,可根据需要进行配置!)

选择

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值