搭建 Vite + Vue3 + Pinia + Element Plus 项目。

news2025/11/4 6:50:00

一、基础项目搭建：

开发工具推荐 VS Code 开发，配合插件如下：

插件名功能
TypeScript Vue Plugin (Volar)用于 TypeScript 的 Vue 插件
Vue Language Features (Volar)Vue3.0 语法支持

1. 创建项目

可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如：

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

2. 启动项目

npx degit user/project my-project
cd my-project

npm install
npm run dev

在这里插入图片描述

过多vite相关知识点不多陈述，附上vite官方链接：

Vite 官方中文文档

二、使用 Element Plus 组件库

1. 安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

2. 用法

2.1 完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

2.2 按需导入

您需要使用额外的插件来导入要使用的组件。

2.3 自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 的配置文件中:

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

2.4 手动导入

Element Plus 提供了基于 ES Module 的开箱即用的 Tree Shaking 功能。

但你需要安装 unplugin-element-plus 来导入样式。 配置文档参考 docs

App.vue

<template>
  <el-button>我是 ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [ElementPlus()],
})

三、使用全局状态管理工具 pinia

1. pinia 介绍

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

pinia优点：

  1. 支持Vue2和Vue3，也就是老项目也可以使用Pinia。
  2. 足够轻量，压缩后的体积只有1kb左右。
  3. 完整的TypeScript支持，Vue3版本的一大优势就是对TypeScript的支持，所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的化，一定知道Vuex对TS的语法支持不是完整的。
  4. 代码更加简洁，可以实现很好的代码自动分割。Vue2的时代，写代码需要来回翻滚屏幕屏幕找变量，非常的麻烦，Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割，pinia也同样继承了这个优点。
  5. 去除 mutations，只有 state，getters，actions；actions 支持同步和异步。
  6. 不需要嵌套模块，让代码更加扁平化，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的，符合Vue3的Composition api 。
  7. 无需手动添加 store，store 一旦创建便会自动添加。

1.1 安装

yarn add pinia
# 或者使用 npm
npm install pinia

1.2 引入

创建一个 pinia 实例 (根 store) 并将其传递给应用：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

1.3 使用

在 src 文件夹下创建 store 文件夹,并添加 counter.js 文件。

2. Pinia中的Store

2.1 定义store

  1. Store (如 Pinia)是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter和 action，我们可以假设这些概念相当于组件中的 data、computed 和 methods。
  2. store 是用 defineStore(name, function | options) 定义的，建议其函数返回的值命名为 use…Store 方便理解
  • 参数 name：必填值且唯一，简单点说就可以理解成是一个命名空间。
  • 参数 function | options：可以是对象或函数形式。
    • 对象形式【选项模式】，其中配置 state、getters 和 actions 选项。
    • 函数形式【组合模式，类似组件组合式 API 的书写方式】，定义响应式变量和方法，并且 return 对应的变量和方法；ref() 相当于 state，computed() 相当于 getters，function() 相当于 actions。

2.2 使用store读取和写入 state

下面案例以选项模式为例：

在 store 文件夹下创建 counter.js 文件，这个文件就是存有关 counter 的一些相关的数据。

import {defineStore} from 'pinia'

/*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
第二个是 getters，第三个是 actions。
*/
const useCounter = defineStore("counter",{
    state:() => ({
        count:88,
    }),
    getters: {

  	},
  	actions: {

  	}
})

//暴露useCounter这个模块
export default useCounter

在页面中使用：

<template>
  <div>
    <el-button>我是 ElButton</el-button>
    <div>store===>counter.js的count值：{{ counterStore.count }}</div>
  </div>
</template>

<script setup>
// 引入创建的store
import useCounter from "./store/counter";
// 调用store里的方法
const counterStore = useCounter();
console.log("counterStore", counterStore.count);
</script>

<style scoped></style>

在这里插入图片描述

**注意：**在使用时 ，取值时不用和 vuex 一样还要.state,直接.state里面的count值就行了，写法：counterStore.count。

案例需求，点击按钮加一：

我们分别用两种方法取count值，一个解构，一个不解构

<template>
  <div>
    <h2>Home Word</h2>
    <h2>展示pinia的counter的count值: {{ counterStore.count }}</h2>
    <h2>展示解构出来的pinia的counter的count值: {{ count }}</h2>
    <el-button @click="addCount">function count+1</el-button>
  </div>
</template>

<script setup>
// 引入创建的store
import useCounter from "./store/counter";
// 调用store里的方法
const counterStore = useCounter();
// 结构count值
const { count } = counterStore;
function addCount() {
  //这里可以直接操作count，修改（写入）store，在vuex还要commit在mutaitions修改数据
  counterStore.count++;
}
</script>

在这里插入图片描述

我们发现解构出来的值 失去响应式了。

解决方案：

为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs() 。它将为每一个响应式属性创建引用。当你只使用 store 的状态而不调用任何 action 时，它会非常有用。

<template>
  <div>
    <h2>Home Word</h2>
    <!-- 2.使用useCounter的实例获取state中的值 -->
    <h2>展示pinia的counter的count值: {{ counterStore.count }}</h2>
    <h2>展示解构出来的pinia的counter的count值: {{ count }}</h2>
    <el-button @click="addCount">function count+1</el-button>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
// 引入创建的store
import useCounter from "./store/counter";
// 调用store里的方法
const counterStore = useCounter();
// 结构count值
const { count } = storeToRefs(counterStore);
function addCount() {
  //这里可以直接操作count，修改（写入）store，在vuex还要commit在mutaitions修改数据
  counterStore.count++;
}
</script>

在这里插入图片描述

2.3 修改state数据

  • 定义一个关于user的Store
import { defineStore } from 'pinia'

const useUser = defineStore("user", {
  state: () => ({
    name: "why",
    age: 18,
    level: 100
  })
})

export default useUser
  • 三种修改state的方法
<template>
  <div>
    <h2>Home Word</h2>
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <h2>等级: {{ level }}</h2>
    <el-button @click="updateStore">修改user信息</el-button>
  </div>
</template>

<script setup>
import useUser from "./store/user";
import { storeToRefs } from "pinia";
const userStore = useUser();
const { name, age, level } = storeToRefs(userStore);

function updateStore() {
  // 方法一：一个个的修改状态
  // userStore.name = "zimo";
  // userStore.age = 20;

  // 方法二 ：一次性修改多个状态
  // userStore.$patch({
  //   name: "zimo",
  //   age: 20,
  // });

  // 方法三：替换state为新的对象
  const oldState = userStore.$state;
  userStore.$state = {
    name: "curry",
    level: 200,
  };
  // 下面会返回true
  console.log(oldState === userStore.$state);
}
</script>

在这里插入图片描述在这里插入图片描述

2.4 重置state数据

新增一个重置按钮：

<el-button @click="resetStore">重置user信息</el-button>

新增一个重置方法：

function resetStore() {
  userStore.$reset();
}

在这里插入图片描述

3. Pinia中的getters

getters 类似于 vue 里面的计算属性，可以对已有的数据进行修饰。getters中可以定义接受一个state作为参数的函数，不管调用多少次，getters中的函数只会执行一次，且都会缓存。

3.1 定义getters

  • 基本使用
  • 一个getter引入另外一个getter
  • getters也支持返回一个函数
  • getters中用到别的store中的数据
// 定义关于counter的store
import { defineStore } from 'pinia'

const useCounter = defineStore("counter", {
  state: () => ({
    count: 99
  }),
  getters: {
    // 1.基本使用
    doubleCount(state) {
      return state.count * 2
    },
      
    // 2.一个getter引入另外一个getter
    doubleCountAddOne() {
      // this是store实例，可以直接使用另一个getter
      return this.doubleCount + 1
    },
      
    // 3.getters也支持返回一个函数
    getFriendById(state) {
      return function(id) {
        return id
      }
    },
    
    // 4.getters中用到别的store中的数据
    showMessage(state) {
      //获取user信息，拿到useUser模块
      const userStore = useUser()
      //拼接信息
      return `name:${userStore.name}-count:${state.count}`
    }  
  },
})

export default useCounter

3.2 访问getters

<template>
  <div>
    <!-- 在模板中使用 -->
    <h2>基本使用：doubleCount: {{ counterStore.doubleCount }}</h2>
    <h2>
      一个getter引入另外一个getter：doubleCountAddOne:
      {{ counterStore.doubleCountAddOne }}
    </h2>
    <h2>函数id-99: {{ counterStore.getFriendById(99) }}</h2>
    <h2>
      getters中获取另一个store中的state/getters数据==>showMessage:{{
        counterStore.showMessage
      }}
    </h2>
  </div>
</template>

<script setup>
import useCounter from "./store/counter";

const counterStore = useCounter();
// 在js文件中使用
const doubleCount = counterStore.doubleCount;
const doubleCountAddOne = counterStore.doubleCountAddOne;
const frend = counterStore.getFriendById(99);
</script>

在这里插入图片描述
**注意：**getters中用别的store中的数据 ，在counter模块中拿user模块的store数据，要引入user模块。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/832306.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

第20节 R语言医学分析:某保险医疗事故赔偿因素分析

第20节 R语言医学分析:某保险医疗事故赔偿因素分析

文章目录 某保险医疗事故赔偿因素分析源码源文件下载某保险医疗事故赔偿因素分析 我们分析数据集“诉讼”的第一个方法是确定样本数量、变量类型、缩放/编码约定（如果有）用于验证数据清理。 接下来，数据集看起来很干净，没有缺失值，并且对于分类变量，将编码约定替换为实际…
阅读更多...
LeetCode 热题 100 JavaScript--543. 二叉树的直径

LeetCode 热题 100 JavaScript--543. 二叉树的直径

给你一棵二叉树的根节点&#xff0c;返回该树的 直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。 两节点之间路径的 长度 由它们之间边数表示。 var diameterOfBinaryTree function(root) {var maxDiameter…
阅读更多...
leetcode每日一练-第88题-合并两个有序数组

leetcode每日一练-第88题-合并两个有序数组

一、解题方法 先合并&#xff0c;再排序 二、code class Solution { public:void merge(vector<int>& nums1, int m, vector<int>& nums2, int n) {for(int i0;i<n;i){nums1[mi]nums2[i];//将 nums2 中的元素逐个复制到 nums1 的尾部}sort(nums1.beg…
阅读更多...
基于遗传算法的试题组卷（一）

基于遗传算法的试题组卷（一）

基于遗传算法的试题组卷 IT企业每年都会在春季和秋季举行校园招聘&#xff0c;对于个性化定制的试卷需求量很大&#xff0c;如何组出又好又快的定制化试题对于IT企业非常重要。组卷技术主要针对知识点覆盖率&#xff0c;题型&#xff0c;难度系数&#xff0c;试题数量等一些试题…
阅读更多...
为什么感觉 C/C++ 不火了？

为什么感觉 C/C++ 不火了？

首先C和C是两个非常不一样的编程语言。 C语言在系统开发领域地位非常稳固&#xff0c;几乎没有替代产品。应用层开发近年来略微有被Rust取代的迹象。 C由于支持的编程范式过多&#xff0c;导致不同水平的人写出来的代码质量差异太大&#xff0c;这给软件的稳健性带来了很大的…
阅读更多...
C高级_第二讲_shell指令和shell脚本_递归练习

C高级_第二讲_shell指令和shell脚本_递归练习

思维导图 递归实现&#xff0c;输入一个数&#xff0c;输出这个数的每一位 int funh(int num){if(0 num){return 0;}else{funh(num/10);printf("%d\n", num%10);} }int main(int argc, const char *argv[]) {puts("请输入一个数");int num 0;scanf(&quo…
阅读更多...
C++11中的内存模型

C++11中的内存模型

一、几种关系术语 1.1、sequenced-before sequenced-before用于表示同一个线程中&#xff0c;两个操作上的先后顺序&#xff0c;这个顺序是非对称、可以进行传递的关系。 它不仅仅表示两个操作之间的先后顺序&#xff0c;还表示了操作结果之间的可见性关系。两个操作A和操作…
阅读更多...
《长安的荔枝》阅读笔记

《长安的荔枝》阅读笔记

《长安的荔枝》阅读笔记 2023年6月9号在杭州的小屋读完&#xff0c;作者以“一骑红尘妃子笑”的典故&#xff0c;想象拓展出来的荔枝使李善德&#xff0c;为了皇帝要求在贵妃寿辰&#xff0c;六月一号那天要吃到10斤的荔枝。需要从广州运送到长安即如今的西安。本来以为这个差事…
阅读更多...
SequenceDiagram 查看代码时序图的利器，做技术方案必备！

SequenceDiagram 查看代码时序图的利器，做技术方案必备！

前言 “ 无论是快速了解业务流程&#xff0c;还是快速的熟悉系统的业务代码逻辑&#xff0c;以及各个类和方法等的调用关系&#xff0c;时序图无疑是其中一种不可获取的简便快捷的方式。一起来了解下&#xff0c;IDEA如何快速生成时序图吧。” 工作中&#xff0c;经常需要绘制…
阅读更多...
async 和 await的用法

async 和 await的用法

async 函数 async 函数是使用async关键字声明的函数。async 函数是 AsyncFunction构造函数的实例&#xff0c;并且其中允许使用 await 关键字。async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promis的异步行为&#xff0c;而无需刻意地链式调用 promise。 asyn…
阅读更多...
MySQL实用命令

MySQL实用命令

一、 DISTINCT 去重 案例&#xff1a;user_test表对班级字段进行去重操作 SELECT DISTINCT class FROM user_test 二、 的作用 案例&#xff1a; SELECT NULL10 三、 concat 实现连接字符串 ​​​案例&#xff1a; SELECT CONCAT(NAME,class) AS 姓名班级 FROM user_test 四…
阅读更多...
看了那场直播后，我们发起了一个讨论

看了那场直播后，我们发起了一个讨论

几天前&#xff0c;我们做了一场直播&#xff0c;关于如何用 Serverless 技术让文化古籍“活过来”。 完整视频进入阿里云云原生视频号看直播回放 背景信息&#xff1a; 通过阿里云函数计算帮助复旦大学特藏中心建立数字图书馆&#xff0c;为用户提供更丰富、更具互动性的古籍浏…
阅读更多...
使用Claude为杜甫写简历

使用Claude为杜甫写简历

杜甫生平的百度链接&#xff1a;杜甫&#xff08;唐代著名现实主义诗人&#xff09;_百度百科 选中所有内容。 打开claude网页&#xff1a;App unavailable \ Anthropic 粘贴刚刚复制的内容。 输入&#xff1a; 按照这个格式总结杜甫的一生&#xff1a;“公元712年 杜甫出…
阅读更多...
Shell脚本学习-while循环2

Shell脚本学习-while循环2

案例&#xff1a;使用while守护进程的方式监控网站&#xff0c;每隔10秒确定一次网站是否正常。 [rootvm1 scripts]# cat url_monitor1.sh #!/bin/bashif [ $# -ne 1 ]thenecho "USAGE: $0 url"exit 1 fiwhile true doif [ curl -I -s -w "%{http_code}" -…
阅读更多...
友盟+、GrowingIO和神策数据 对比

友盟+、GrowingIO和神策数据 对比

对于市面上的数据平台&#xff0c;先简单归个类。 1、移动统计平台&#xff0c;如友盟、talkingdata、百度云统计、腾讯移动应用统计等。 相同点是数据源都是埋点数据。友盟有免费版本。 前端效果&#xff1a;展现形式上为BI报表。 常用操作是页面内点击和筛选。 使用要求…
阅读更多...
使用 RSA 密钥进行 SSH 连接

使用 RSA 密钥进行 SSH 连接

使用 RSA 密钥进行 SSH 连接 平时用 SSH 连树莓派和虚拟机每次都要输入密码&#xff0c;比较烦人。Windows Terminal 出于安全原因是不支持记录密码进行自动连接的功能的&#xff0c;所以还是老老实实创建 RSA 密钥进行连接好了。 生成 RSA 密钥对 Windows 上可以用 Putty K…
阅读更多...
leetcode17. 电话号码的字母组合(java)

leetcode17. 电话号码的字母组合(java)

电话号码的字母组合 leetcode17. 电话号码的字母组合题目描述回溯算法代码演示 回溯算法 leetcode17. 电话号码的字母组合 难度 中等 leetcode17 跳转链接 题目描述 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数…
阅读更多...
基于遗传算法的试题组卷（二）

基于遗传算法的试题组卷（二）

实例讲解 一、准备工作 1、问题实体 问题实体包含编号、类型&#xff08;类型即题型&#xff0c;分为五种&#xff1a;单选&#xff0c;多选&#xff0c;判断&#xff0c;填空&#xff0c;问答&#xff0c; 分别用1、2、3、4、5表示&#xff09;、分数、难度系数、知识点。一…
阅读更多...
前端Vue入门-day08-vant组件库

前端Vue入门-day08-vant组件库

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 vant 组件库 安装 导入 全部导入 按需导入 浏览器配饰 Viewport 布局 Rem 布局适配 vant 组件库 …
阅读更多...
九耶|阁瑞钛伦特：产品经理面试题—产品经理在工作中是如何划分需求优先级的？

九耶|阁瑞钛伦特：产品经理面试题—产品经理在工作中是如何划分需求优先级的？

产品经理在工作中划分需求优先级是为了指导产品团队的开发和发布流程。以下是产品经理在划分需求优先级时通常考虑的因素&#xff1a; 业务目标&#xff1a;产品经理会与企业领导层或业务方合作&#xff0c;了解公司的战略目标和销售策略。然后&#xff0c;他们会根据这些目标评…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023