Pinia 是一个 Vue3 的集中式状态（数据）管理库。 搭建测试项目 先创建一个 Vue3 项目，添加两个组件。 src\components\Count.vue： <template>  <div class="count">    <h2>当前求和为：{{ sum }}</h2>    <select v-model.number="n">      <option value="1">1</option>      <…

路由器和路由 新建一个 Vue3 项目，创建一个简单的 App.vue： ​ <template>  <div class="app">    <h2 class="title">Vue路由测试</h2>    <!-- 导航区 -->    <div class="navigate">      <a href="#" class="active">首页</a>      <a href="#">新闻<…

ref 属性 如果需要获取一个 DOM 元素，传统的 JS 方式是： <template>    <div class="person">        <h1>中国</h1>        <h2 id="city">北京</h2>        <h3>大兴区</h3>        <button @click="showDom">显示dom元素</button>    </div&g…

单向绑定和双向绑定 看一个示例： <template>    <div class="person">       姓：<input type="text" v-bind:value="firstName" />        <br />       名：<input type="text" v-bind:value="lastName" />        <br />       全名：????    </div> </…

组合式和选项式 Vue2 使用的是选项式（Options）API，Vue3 推荐使用组合式（Composition）API。 关于组合式和选项式 API 的区别以及优缺点可以观看视频。 可以在 Vue3 中使用组合式 API 编写代码，但不推荐。 setup Vue3 提供一个setup方法，可以在其中以组合式的风格定义变量和方法。 比如一个选项式的 vue 组件： <template>    <div class="person">        <h2>姓名：{{ name …

快速开始 早前可以通过vue-cli创建 vue 项目的框架代码，但现在已经统一使用 vite 进行构建： npm create vue@latest 需要先安装 npm（NodeJS 的包管理器）。 会开启一个交互式命令行界面： 任何组件都可以在后期手动添加，这里只选择一个 TS（TypeScript）支持。 创建好项目框架后，需要进入项目根目录并安装依赖： npm install 依赖会安装在node_modules目录下。 依赖安装好后可以启动项目： npm run dev 访问命令行显示的链接即可打开项目主…

准备工作 进行二次开发前最好先修改一下项目中的包名和子模块名称，可以使用一个工具——若依框架修改器。 将后端代码打包后使用修改器修改包名等： 修改完后重新用 idea 打开加载，处理依赖后启动，以检查是否正常。 添加业务代码 新编写的业务代码最好单独一个模块。 添加 maven 类型的子模块sky-merchant，pom 文件中添加对框架核心模块的依赖： <dependencies>    <dependency>        <groupId>com.sky</gro…

若依（RuoYi）是一个基于 Spring Boot + Vue 的后台管理系统开发脚手架，可以节省实现权限管理菜单管理等基础功能的开发时间以提高开发效率。 环境准备 这里以单体项目开发进行说明。 集群项目后端可以选择使用 ruoyi-cloud。 代码下载 从使用 vue3 的前端代码仓库拉取前端代码： git clone git@github.com:yangzongzhuan/RuoYi-Vue3.git 从前后端分离版版本的后端代码仓库拉取后端代码： git clone https://github.com…

假设有一个提交申请的入口页： 页面代码位于views/Home.vue： <template>  <div>    <div      style="        display: flex;        flex-direction: column;        align-items: center;        justify-content: center;        height: 100vh;      "    >      <h1>首页&l…

本文将学习一个示例项目（大事件）的前端搭建过程。 1.准备工作 1.1.创建工程 创建一个名称为big-event的 Vue3 项目，具体可以参考这篇文章。 1.2.安装插件 安装 ElementPlus： npm install element-plus --save 安装好后还需要在main.js中导入相关模块和样式： import './assets/main.scss' ​ import { createApp } from 'vue' import ElementPlus from 'element-pl…