❤ 项目搭建

项目采取方式

基础版本：Vue3+Pinia+Vant3/ElementPlus

Pro版本：Vue3+Pinia+Vant3/ElementPlus+typerscript

1、项目环境和项目简介

👉 项目相关

技术栈如下：

Vue3全家桶
Vite
Typescript
Pinia
Vant3/ElementPlus(目前以ElementPlus为主)

项目开源地址

INFO

🍓 天工项目开源地址

TG开源项目-天工GItee地址

👉 项目准备环境

前端环境

nvm 版本 20.12.0  
node 版本 20.12.0  
npm版本 10.5.0

后端环境

mysql 版本 20.12.0

检测自己本地的环境

我本地使用的nvm,强烈建议使用nvm管理版本

node -v  // v20.12.0
npm -v   // 10.5.0

2、搭建开发

（1）环境准备（好了直接跳过）

建议使用nvm 管理版本：

文章：window如何使用nvm管理node版本

了解主要的版本和体系
vue主要使用的版本和对应体系

node环境

前提条件：已安装 16.0 或更高版本的 Node.js

检测node环境

node -v  // v20.12.0

npm 环境

检测npm环境

npm -v  // v10.5.0

👉新建基础项目运行

// 创建项目--有选择的话选择js基础版本的
yarn create vite NexusVue --template vue

// 安装依赖
yarn 

// 运行项目
yarn dev

整个过程就一个感觉：非常快

👉新建TS版本项目运行

yarn搭建项目的命令：（建议1）

// 使用vue的模板进行创建 （这是我项目使用的和本人推荐的方式 ）
yarn create vite lintaibai --template vue  

// npm create vite@latest my-vue-app --template vue

或者采用下面这种方式 
yarn create vite lintaibai  // 普通使用vite创建


// 使用vue-ts的模板进行创建
yarn create vite@latest NexusVuePro --template vue-ts

//（推荐npx ）
npx create-vite@latest NexusVuePro --template vue-ts

这里选择的vue+TS的组合

创建项目名称 
选择主要框架Vue  
选择语言

项目运行成功以后提示：

依次输入命令：

cd nexus
yarn 
yarn dev

成功以后的页面：