从0到1，带你搭建Vite+Vue3+Unocss+Pinia+Naive UI后台（一） 前置篇-灵析社区

前端码农

前言

今年年初开源了一个基于 Vue3+Vite+Pinia+Naive UI 的轻量级后台管理模板，没想到得到很多朋友的青睐和关注，在Vite+Vue3+NaiveUI+Pinia搭建一套优雅的后台管理模板，真香 - 掘金 (juejin.cn) 这篇文章中介绍了这套模板的特性和集成的一些功能，后面也陆陆续续加了挺多东西的，现在已经比较完善了。

有很多朋友在github、邮箱和微信上表示很好用，并且帮助到了他们，这对于没有多少开源经验的我来说无疑是极大的激励，更促使我把这个开源项目做到更好。

也有朋友表达了疑惑，比如“都2202年了，为什么还不用ts？”，针对这一点，我觉得有必要解释一下，这个项目是定位轻量级的中小型项目或者个人项目，特点就是简洁、轻量，当然这跟ts也并不相悖，但是使用js对于中小型项目来说无疑会有更高的效率，而且也能更好的照顾不太会ts的朋友。不能为了用ts而用ts，ts解决的无非是规范和代码提示的问题，配置好vscode，代码提示已经很全面了，各种跳转定义和自动引入也很顺畅；至于规范，我觉得ts只能尽可能的保证代码的最低质量，而且还要花费好多心力和多写很多代码，大项目无可厚非，中小项目的话意义不大。（非引战，纯粹一家之言，狗头保命）。

废话不再多说，接下来进入主题

前置知识准备

技术栈

  • Js、Css、Html无需多说
  • Vue2 / Vue3,建议还没有掌握的可以直接上Vue3， 官方文档 | Vue.js (vuejs.org)
  • NodeJs、Npm、Git,会简单使用指令就行

环境

  • NodeJs, 14+版本以上，建议上16+
  • Npm，一般是跟NodeJs绑定安装的，略过
  • Pnpm，强烈建议使用，用过的都说香，操作手册 | pnpm.io

工具

使用VsCode就够了，前端开发第一编辑器（非引战，但欢迎在评论区讨论）

推荐几款插件，烂大街的就不推荐了

  • any-rule: 你要的"正则"都在这!
  • Better Comments: 更友好的代码注释
  • DotENV： env文件高亮
  • One Monokai Theme：换过很多主题还是觉得这个主题看着最舒服
  • Volar: Vue3必备，不多说

官方文档传送门

Vite: Home | Vite 官方中文文档 (vitejs.dev)

Vue3: 介绍 | Vue.js (vuejs.org)

Pinia: Home | Pinia (vuejs.org)

Naive UI: Naive UI: 一个 Vue 3 组件库

搭建 Vite 起始项目

注意：这里全部使用pnpm操作，没有安装pnpm的需先按照手册安装安装（超简单的，傻瓜式操作）
npm install -g pnpm  # 如安装了可忽略

pnpm create vite

安装依赖并启动，一般网络无问题且Node版本14+以上是可以顺利安装和启动的，如安装失败可删除node

cd vue-naive-admin

pnpm i

pnpm run dev

看到这个页面就启动成功了

这是初始化文件结构，接下来创建第一个git提交

git init

git add -A

git commit -m "first commit"

这一篇先到此为止，如有错误之处请在评论区提醒指正，一起讨论学习~

阅读量：2030

点赞量：0

收藏量:0