vue3 与 element-plus

>> 安装 vue/cli 脚手架

　　最新牍的cli脚本架为 5.0.9 版本, 

　　

　　在高版本的 Node 中安装脚手架时，会提示 版本不匹配; 

　　主要适配 8~22版本的Node,  另外 Vue Cli 已进入维护模式，官方推荐新项目使用 vite 构建工具

　　

　　>> 切换到 22.18.0 版本重新安装 Vue/cli 不会出现上面的提示；

使用 Vite 创建项目

　　>>  直接创建，会提示要求安装依赖

　　

　　>> 若已经安装过 create-vite，则会直接进入创建过程；(若未提供项目名，第1步是项目名，若提供了，则直接进入模板选择)

　　

　　>> 选择好模板后，开始选择开发语言

　　

　　>> 配置模块功能

　　

　　　　-> 关于状态管理：Pinia, 同功能另外的一依赖是：Vuex, 可详细了解一下　　　　

‌技术选型建议‌

‌优先选择Pinia的场景‌：
    Vue 3新项目，尤其是中大型应用；
    需要灵活模块化或团队协作开发；
    TypeScript项目或追求开发效率。‌‌

‌继续使用Vuex的场景‌：
    维护基于Vue 2的现有项目；
    需要严格的状态变更规范（如大型团队约束）。‌‌
 
‌性能与生态适配‌

‌性能‌：两者在运行时性能上差异微小，但Pinia的轻量化设计（体积减少约40%）更适合现代前端构建。‌‌
 
‌生态支持‌：Pinia已全面集成Vue DevTools，且Vue核心团队明确表示未来生态特性将优先适配Pinia。‌‌

 

　　>> 项目创建完成

　　

-----------------

Element-Plus

　　>> 安装依赖：npm install element-plus -S

　　>> 使用：在 main.js 中导入　　

import Elementplus from 'element-plus'
import "element-plus/dist/index.css"

app.use(Elementplus)

　　>> 在需要使用的地方，直接参数官网配置，拷贝代码即可

<template>
  <main>
    <!-- <TheWelcome /> -->
    <el-row class="mb-4">
      <el-button round>Round</el-button>
      <el-button type="primary" round>Primary</el-button>
      <el-button type="success" round>Success</el-button>
      <el-button type="info" round>Info</el-button>
      <el-button type="warning" round>Warning</el-button>
      <el-button type="danger" round>Danger</el-button>
    </el-row>
  </main>
</template>