vue3+TS+Pinia+Vite项目实战之一

---

一、创建项目

1.1 使用脚手架创建项目

npm init vue@latest

1.2 初始化项目

App.vue

<template>
  <RouterView />
</template>

<script setup lang="ts"></script>

<style scoped></style>

删除多余不要的组件

创建路由
src/router/index.ts

import {
    createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
   
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
   
      path: '/login',
      name: 'Login',
      component: () => import('../views/LoginView.vue')
    }
  ]
})

export default router

在src/views/LoginView.vue

<template>
  <div>Login</div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped></style>

引入element-plus 可去官网查看如何引入
安装normalize.css

npm install normalize.css

二、登录页面的开发

安装sass

npm install sass

登录页的静态页面

<template>
  <div class="login-container">
    <h2>登录</h2>
    <el-form ref="ruleFormRef" :model="formData" status-icon :rules="rules">
      <el-form-item prop="userName">
        <el-input v-model="formData.userName" placeholder="userName