vue3+ts+vite+element-plus+pinia项目搭建的【详细教程】

原创

已于 2024-12-16 10:04:06 修改 · 2.7k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #typescript #scss

于 2024-11-21 15:31:37 首次发布

一、前言背景

随着前端技术的不断更新，vue2技术的停止维护，越来越多的企业项目采用vue3+vite+ts+pinia+…的模式进行开发，vue3对虚拟Dom进行了优化，减少了内存占用和提升了渲染速度，提供了更灵活强大的方式来复用逻辑，使代码更具有维护性，而且采用了更好的树摇机制（tree-shaking），能够更有效地移除无用的代码；vite使用原生ES模块导入，不需要编译就可以快速启动，提供了更快的热更新，拥有更丰富的插件系统；ts在编译时就可以捕获类型错误、减少运行时错误，拥有类型推断，减少冗余地类型声明，拥有强大的泛型和接口；pinia使用defineStore来定义store，不需要复杂的模块嵌套，每个store都是一个独立的单元，易于管理和维护，而且支持按需加载store，减少初始加载时间，相对于vuex，pinia更加轻量化。总而言之，用vue3+vite+ts+pinia的体系结构开发项目，拥有更高的开发效率、更好的代码质量和性能优化。

下面就从零搭建一个项目开发底座进行详细讲解：

二、环境安装

1、安装nvm

通过nvm来安装node,进行node的版本管理，nvm官网：nvm文档手册 - nvm是一个nodejs版本管理工具 - nvm中文网

本人使用分享（永久有效）：

链接: https://pan.baidu.com/s/1jRST6PCts1XLaCxxqNV-FQ
提取码: Y6b8

下载你想要的版本：

将下载的安装包进行解压，双击安装包按如下步骤进行安装：

查看nvm是否安装成功，win+R打开命令提示符窗口，输入cmd:

输入以下命令，回车出现版本号代表安装成功，如下图：

nvm -v

2、配置nvm

在setting.txt文件中配置npm和node下载安装的镜像，如下图：

root: D:\nvm\nvm
path: D:\nvm\nodejs
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/