Vue3入门 - 登录功能开发(Vue3+ts+Pinia+Element Plus)

觉醒法师

已于 2024-09-11 21:59:33 修改

阅读量2.6k

点赞数 12

分类专栏： Vue.js 文章标签：前端 vue.js javascript

于 2024-09-11 21:53:03 首次发布

本文链接：https://blog.csdn.net/jiciqiang/article/details/142079385

版权

Vue3中实现登录功能，通常涉及到创建一个表单，用户输入用户名和密码，然后将信息发送到后端进行验证，得到响应结果后作出相应操作。

一、创建项目

这里他用pnpm进行项目的创建的，所以需要事先全局安装pnpm（在安装pnpm前，先确认本地电脑上是否已安装nodejs），命令如下：

npm install -g pnpm

1.1 创建vue

使用pnpm创建vue项目命令如下：

pnpm create vue

执行后作出相应选择，选择你项目中需要的选项即可。示例如下：

D:\workspace\vscode>pnpm create vue

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue-project
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是

正在初始化项目 D:\workspace\vscode\vue-project...

项目初始化完成，可执行以下命令：

  cd vue-project
  pnpm install
  pnpm format
  pnpm dev

1.2 初始化项目

当项目创建完成后，根据提示命令对项目进行初始化，先输入命令进入项目目录：

cd vue-project

然后执行install命令，初始化项目：

D:\workspace\vscode\vue-project>pnpm install

   ╭──────────────────────────────────────────────────────────────────╮
   │                                                                  │
   │                Update available! 9.7.0 → 9.10.0.                 │
   │   Changelog: https://github.com/pnpm/pnpm/releases/tag/v9.10.0   │
   │                Run "pnpm add -g pnpm" to update.                 │
   │                                                                  │
   │         Follow @pnpmjs for updates: https://x.com/pnpmjs         │
   │                                                                  │
   ╰──────────────────────────────────────────────────────────────────╯

 WARN  5 deprecated subdependencies found: @humanwhocodes/config-array@0.11.14, 
@humanwhocodes/object-schema@2.0.3, glob@7.2.3, inflight@1.0.6, rimraf@3.0.2
Packages: +425
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++
Progress: resolved 463, reused 272, downloaded 153, added 425, done
node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild: Running postinstall script...
node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild: Running postinstall script, 
done in 341msstinstall script, done
in 209ms

dependencies:
+ pinia 2.2.2
+ vue 3.5.3
+ vue-router 4.4.3

devDependencies:
+ @rushstack/eslint-patch 1.10.4
+ @tsconfig/node20 20.1.4
+ @types/jsdom 21.1.7
+ @types/node 20.16.5 (22.5.4 is available)
+ @vitejs/plugin-vue 5.1.3
+ @vitejs/plugin-vue-jsx 4.0.1
+ @vue/eslint-config-prettier 9.0.0
+ @vue/eslint-config-typescript 13.0.0
+ @vue/test-utils 2.4.6
+ @vue/tsconfig 0.5.1
+ eslint 8.57.0 (9.10.0 is available)
+ eslint-plugin-vue 9.28.0
+ jsdom 24.1.3 (25.0.0 is available)
+ npm-run-all2 6.2.2
+ prettier 3.3.3
+ typescript 5.4.5 (5.6.2 is available)
+ vite 5.4.3
+ vite-plugin-vue-devtools 7.4.4
+ vitest 1.6.0 (2.0.5 is available)
+ vue-tsc 2.1.6

Done in 9.8s

初始化项目后，则可以运行项目了，当执行pnpm dev后您会发现，瞬间项目就运行起来了，比vue2+webpack时快了很多。

D:\workspace\vscode\vue-project>pnpm dev

> vue-project@0.0.0 dev D:\workspace\vscode\vue-project
> vite


  VITE v5.4.3  ready in 1285 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help