【vue3实战教程1】初始化项目

108 阅读1分钟

前言

从零开始学习vue3,理论知识看看就没有然后了,只有实际上一步一步搭建页面学以致用。从这篇开始,每日一篇文章,记录自己的学习之路。扎实静下来心来不自我欺骗的学习,三年前不会的东西,三年后还是不会就很难说的过去了。跟上脚步,拥抱变化,保持学习。

技术选型

vue3.0 的出世,必然全家桶也都更新换代了。

  • 包管理,用 pnpm
  • 状态管理,用 pinia
  • 语言选择,用 typescript
  • 打包构建,用 vite
  • UI库,用 element plus
  • 路由管理,用 vue router
  • 代码检查,用 eslint

就这些东西,也不是很难嘛~一顿安装炫它就完了。安装这些东西,我还想到了自定义脚手架,一顿操作学了个半成品 还挺有意思的,后面再深学,不要注意力太发散了。

image.png

准备好了,出发

  1. 初始化项目: pnpm create vite --template vite-project
  2. 安装element plus: pnpm install element-plus
  3. 安装代码检查: pnpm i eslint -D
  4. 安装路由: pnpm install vue-router
  5. 自动保存: pnpm install --save-dev --save-exact prettier
  6. 安装状态管理: pnpm install pinia
  7. css语言预处理: pnpm install sass -D
  8. 请求接口: pnpm install axios

目录配置

image.png

差不多了,后期当然是不断的更新的~先搞一个页面,写起来