vite + vue3 + ts + elemnt-plus vue3项目搭建

一、创建项目
1、使用 Vite 创建 Vue3 项目

npm init vite@latest


// 依次选择项目名称、Vue框架、Ts语言 后即创建成功 
// eg:
$ npm init vite@latest
√ Project name: ... vite-vue3
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in C:\Users\HP\Desktop\myitem\vite-vue3...

Done. Now run:

  cd vite-vue3
  npm install
  npm run dev

2、切换到项目 目录 ，执行代码安装相关包，运行项目

// 进入项目
cd vite-vue3

// 安装包资源
npm install

// 运行项目
npm run dev

二、环境配置
1、配置开发、线上和测试环境
创建 .env.development 文件

NODE_ENV = "development"	

# 是否兼容旧的浏览器
VITE_LEGACY = false

# 开发环境网站前缀
VITE_BASE_URL = /

# 开发环境后端地址
VITE_BASE_API = "http://xx.xx.xx.xx:xxxx"

创建 .env.production 文件

# 线上环境
NODE_ENV = "production"

# 是否兼容旧的浏览器
VITE_LEGACY = false

# 线上环境网站前缀
VITE_BASE_URL = /

# 线上环境后端地址
VITE_BASE_API = "http://xx.xx.xx.xx:xxxx"

创建 .env.test 文件

# 测试环境
NODE_ENV = "test"

# 是否兼容旧的浏览器
VITE_LEGACY = false

# 测试环境网站前缀
VITE_BASE_URL = /

# 测试环境后端地址
VITE_BASE_API = "http://xx.xx.xx.xx:xxxx"

更多 查看其他
基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目

Vue+Vite+TS