# xust-vue

**Repository Path**: azureroots/xust-vue

## Basic Information

- **Project Name**: xust-vue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-03
- **Last Updated**: 2026-03-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue



## 1、basics

这个项目中涉及的是 `Vue` 最基础的内容。





### 生命周期

请参见 `elements` 项目中的 `views` 目录下的各个组件。

> 官方文档:
>
> https://cn.vuejs.org/guide/essentials/lifecycle.html





## 2、组件



### 2.1、新建项目

在 `xust-vue` 仓库中创建一个新的名称为  <b style="color: blue">`components`</b> 的项目(通过`vite`方式来创建即可):

```cmd
X:\bytecreek\mycodes\xust-vue> >pnpm create vite
.../19cbb8f73a8-1fc0                     |   +1 +
.../19cbb8f73a8-1fc0                     | Progress: resolved 1, reused 1, downloaded 0, added 1, done
|
o  Project name:
|  components
|
o  Select a framework:
|  Vue
|
o  Select a variant:
|  JavaScript
|
o  Use Vite 8 beta (Experimental)?:
|  No
|
o  Install with pnpm and start now?
|  No
|
o  Scaffolding project in X:\bytecreek\mycodes\xust-vue\components...
|
—  Done. Now run:

  cd components
  pnpm install
  pnpm dev
```

进入到  <b style="color: blue">`components`</b> 项目中:

```cmd
X:\bytecreek\mycodes\xust-vue>cd components

X:\bytecreek\mycodes\xust-vue\components>
```

通过 `pnpm` 安装依赖:

```cmd
pnpm install
! The local project doesn't define a 'packageManager' field. Corepack will now add one referencing pnpm@10.30.3+sha512.c961d1e0a2d8e354ecaa5166b822516668b7f44cb5bd95122d590dd81922f606f5473b6d23ec4a5be05e7fcd18e8488d47d978bbe981872f1145d06e9a740017.
! For more details about this field, consult the documentation at https://nodejs.org/api/packages.html#packagemanager

Packages: +35
+++++++++++++++++++++++++++++++++++
Progress: resolved 84, reused 35, downloaded 0, added 35, done

dependencies:
+ vue 3.5.29

devDependencies:
+ @vitejs/plugin-vue 6.0.4
+ vite 7.3.1

╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│   Ignored build scripts: esbuild@0.27.3.                                                   │
│   Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.   │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
Done in 6.1s using pnpm v10.30.3
```

项目创建完毕后，可以清理一下不必要的文件和目录。



### 2.2、配置项目



#### 2.2.1、设置端口

在 `vite.config.js` 中可以设置端口:

```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8080,
  },
})
```



#### 2.2.2、配置别名



```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 从 node 中导入 path 模块
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8080,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

```

为 项目主目录下的 `src` 目录指定别名 `@` 后，即可在项目中统一使用 `@` 来引用 `src` 目录。



### 2.3、定义并使用组件



#### 2.3.1、定义组件



#### 2.3.2、使用组件

导入组件

使用组件



### 2.4、组件关系



根据<b style="color:blue;">`@/App.vue`</b>中的代码来理解组件之间的关系:

```vue
<script setup>
import ShoppingCart from '@/views/ShoppingCart.vue';
import CartItem from '@/views/CartItem.vue';
import TotalPrice from '@/views/TotalPrice.vue';
</script>

<template>
	<shopping-cart>
		<cart-item></cart-item>
        <total-price></total-price>
	</shopping-cart>
</template>
```



#### 2.4.1、根组件

在 `main.js` 中用来创建 `Vue` 实例并挂载到 DOM 节点上去的那个组件就是 **根组件** 。

```js
import { createApp } from 'vue';
// 导入根组件
import App from '@/App.vue';
// 用根组件创建Vue实例
const instance = createApp(App);
// 挂载实例到 #app 元素
instance.mount('#app');
```

通常项目根目录下的 `src` 目录中的 `App.vue` 为根组件。

#### 2.4.2、父组件

以`@/App.vue`中`template`代码为例:

```vue
<template>
	<shopping-cart>
		<cart-item></cart-item>
        <total-price></total-price>
	</shopping-cart>
</template>
```

此处 `ShoppingCart` 组件就是 `CartItem` 和 `TotalPrice` 的**父组件**。

同时，根组件 `App` 也是 `ShoppingCart` 的**父组件**。



#### 2.4.3、子组件

以`@/App.vue`中`template`代码为例:

```vue
<template>
	<shopping-cart>
		<cart-item></cart-item>
        <total-price></total-price>
	</shopping-cart>
</template>
```

此处 `CartItem` 和 `TotalPrice` 就是 `ShoppingCart` 组件的**子组件**。

同时, `ShoppingCart` 也是根组件 `App` 的**子组件**。

确切地说， `CartItem` 和 `TotalPrice` 是 `ShoppingCart` 的 **直接子组件**，`ShoppingCart` 也是 `App` 的**直接子组件**。

对于  `CartItem` 和 `TotalPrice` 来说，它们也是 根组件 `App` 的子组件，只不过是间接的子组件。



#### 2.4.4、兄弟组件

拥有共同直接父组件的多个组件互为兄弟组件。

以`@/App.vue`中`template`代码为例:

```vue
<template>
	<shopping-cart>
		<cart-item></cart-item>
        <total-price></total-price>
	</shopping-cart>
</template>
```

此处 `CartItem` 和 `TotalPrice` 就是**兄弟组件**。



#### 2.4.5、其他关系



### 2.5、组件通信



#### 2.5.1、传递`props`

从父组件通过属性向子组件传递数据。

以下按照 定义Props、传递Props、使用Props 三个步骤来讲解。

##### 1、定义`Props`

在 `ShoppingCart.vue` 中定义 `Props` :

```vue
<script setup>
import { defineProps } from 'vue';

// 定义 props 接收 owner 属性
const props = defineProps({
    owner: {
        type: String,
        required: false,
        //default: '用户'
    }
})
</script>
```



##### 2、传递`props`

在 `App.vue` 组件中使用 `ShoppingCart` 组件时，可以通过 `props` 向  `ShoppingCart` 组件传递数据:

```vue
<template>
  <!-- 通过 v-bind 指令为 ShoppingCart 组件的 owner 属性绑定 account 变量 -->
  <shopping-cart v-bind:owner="account"></shopping-cart>
  <!-- 可以将 v-bind:owner 缩写为 :owner -->
  <shopping-cart :owner="account"></shopping-cart>
  <!-- 也可以直接在组件标签上绑定 owner 属性值(注意没有使用 v-bind 指令) -->
  <shopping-cart owner="account"></shopping-cart>
  <!-- 未绑定 owner 属性时，使用默认值 -->
  <shopping-cart></shopping-cart>
</template>
```

以上用法中:

- `v-bind:owner="account"` 是显示通过 `v-bind` 指令为 `shopping-cart` 组件绑定 `props`
  - 其中 `account` 必须是在 `App.vue` 中已经定义过的**变量**
- <b style="color: blue">`:owner="account"`</b> 是使用了语法糖，将 `v-bind:owner` 缩写为 `:owner`
  - 其中 `account` 必须是在 `App.vue` 中已经定义过的**变量**

- <b style="color: green">`owner="account"`</b> 是直接将等号之后的引号中的内容作为字符串值传递给  `shopping-cart` 的 `owner`
  - 注意，等号之后的 `account` 仅是个字符串而已，它不表示变量。
- `<shopping-cart></shopping-cart>` 表示没有传递 `props`
  - 当未向  `shopping-cart` 传递 `owner`时，在 `shopping-cart` 内部 `owner` 取值为 `undefined` 。



 

##### 3、使用`props`

在 `ShoppingCart.vue` 的模板(`template`)中可以直接使用相应的 `props`:

```vue
<template>
    <div>
        <h5 v-if="owner">{{owner}}的购物车</h5>
        <h5 v-else>购物车</h5>
    </div>
</template>
```

而在 `<script setup>` 中则要通过 `props.owner` 形式来使用:

```vue
<script setup>
import { defineProps } from 'vue';

// 定义 props 接收 owner 属性
const props = defineProps({
    owner: {
        type: String,
        required: false,
        //default: '用户'
    }
})

console.log('owner:', props.owner)
</script>
```



#### 2.5.2、分发内容

通过插槽来分配内容，在父组件中通过插槽向子组件分发内容。

在 `@/views/` 目录下创建 `Book.vue` ，其中内容如下

```vue
<script setup>
</script>

<template>
</template>

<style scoped>
</style>
```

在 `@/views/Book.vue`中除基本结构外暂不写其它内容。

##### 1、插槽出口

`<slot>` 元素是一个**插槽出口** (slot outlet)。

在 `@/views/Book.vue`中定义 插槽出口:

```vue
<template>
    <div class="book">
        <div class="book-title">
            <!-- 具名插槽： 这类带 name 的插槽被称为具名插槽 (named slots) -->
            <slot name="title">默认标题</slot>
        </div>
        <div class="book-name-author">
            <div>
                <!-- 没有提供 name 的 <slot> 出口会隐式地命名为“default” -->
                <slot>默认名称</slot>
            </div>
            <!-- 具名插槽(named slots) -->
            <slot name="author">默认作者</slot>
        </div>
        <div class="book-publisher">
            <slot name="publisher">默认出版社</slot>
        </div>
    </div>
</template>
```

其中的`<slot>`标示了父元素提供的**插槽内容** (slot content) 将在哪里被渲染。

另外需要注意:

- 带 name 的插槽被称为**具名插槽** ( named slots )

```vue
<slot name="title"></slot>
```

- 没有提供 name 的 `<slot>` 出口会隐式地命名为 `default`

```vue
<slot></slot>
```

- 在 `<slot>` 和 `</slot>` 之间可以书写默认内容
  - 当父元素未向插槽分发内容时，就会显示默认内容

```vue
<slot>默认内容</slot>
```



##### 2、插槽内容

在父元素中可以通过子组件的标签体向子组件**“分发”**内容。

比如在 `@/App.vue` 中可以将 `<book>` 和 `</book>` 之间的内容分发给 `book` 组件的相应插槽 :

```vue
<script setup>
import Book from '@/views/Book.vue';
</script>

<template>
  <book>
    <!-- 对于没有明确指定分发到那个插槽的内容来说，默认会分发给名称为 default 的插槽 -->
    <h1>Vue从入门到放弃</h1>
    <!-- 用 v-slot 指令来明确为哪个插槽分发内容 -->
    <template v-slot:title>
      这是一本让你学完之后可能找不到工作的书
    </template>
    <!-- #author 是 v-slot:author 的缩写 -->
    <template #author>
      张大丰
    </template>
    <!-- #publisher 是 v-slot:publisher 的缩写 -->
    <template #publisher>
      当武出版社
    </template>
  </book>
</template>
```

需要特别注意的是，<span style="color: blue">插槽内容**无法访问**子组件中的数据</span>。

以上案例中，在 `<book>` 和 `</book>` 之间仅能访问`App` 组件中的数据，不能访问在 `Book` 组件中定义的数据。



#### 2.5.3、案例: 购物车

本节以 **"传递props"** 和 **"分发内容"** 为基础对购物车模块进行改造。

##### 1、定义商品列表

在 `App.vue` 中定义商品列表:

```vue
<script setup>
// 此处省略原有内容；以下仅展示新增内容
const goods = reactive([
  { id: 1001, name: "ThinkPad", price: 6999, count: 2 },
  { id: 1002, name: "MacBook", price: 12999, count: 2 },
  { id: 1003, name: "Surface", price: 8999, count: 1 },
]);
</script>
```



##### 2、定义`props`

为 `CartItem.vue` 定义名称为 <b style="color: blue">`goodsItem`</b> 的 `props` :

```vue
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    goodsItem: {
        type: Object,
        default: () => ({})
    }
})
</script>
```



##### 3、传递商品数据

在`App.vue`的 `<template>`中，用 `v-for` 指令在 `shopping-cart` 内部的 `cart-item` 上渲染商品列表，同时通过 `CartItem` 组件名称为 `goodsItem` 的 `props` 传递单条商品数据。 

```vue
  <shopping-cart :owner="account">
    <cart-item v-for="t in goods" :key="t.id" :goods-item="t"></cart-item>
    <total-price></total-price>
  </shopping-cart>
```

这里需要注意:

- `:key="t.id"` 用于将商品编号当作 `key` 来使用
  - 应该尽量保证 `key` 是独一无二的
- `:goods-item="t"` 表示为 `cart-item` 组件的 `goodsItem` 绑定数据
  - 这里的 `goods-item` 就对应着 `CartItem.vue` 中的 `goodsItem`
  - 等价于 `:goodsItem="t"`

##### 4、展示商品数据

在 `CartItem.vue` 的 `template` 中可以将 `goodsItem` 中的数据予以展示:

```vue
<template>
    <div>
        <span>{{ goodsItem.id }}</span>
        <span>{{ goodsItem.name }}</span>
        <span>{{ goodsItem.price }}</span>
        <span>{{ goodsItem.count }}</span>
    </div>
</template>
```





#### 2.5.4、监听事件

在父组件中通过监听子组件上的事件来获取由子组件向父组件传递的数据。



##### 1、声明事件

在`CartItem.vue`中通过 `defineEmits` 声明自定义事件:

```vue
<script setup>
import { defineProps, defineEmits } from 'vue';
// 此处省略其它代码
const emits = defineEmits(['减少', '增加']);
</script>
```

显式声明事件并不是必须的，但 `Vue 3` 官方强烈建议所有自定义事件都显式声明。

|              | 不声明事件             | 声明事件                            |
| ------------ | ---------------------- | ----------------------------------- |
| 事件监听功能 | ✅ 完全正常             | ✅ 完全正常                          |
| 代码可读性   | ❌ 隐式事件，需找 $emit | ✅ 显式声明，一眼看清                |
| 错误校验     | ❌ 无警告，易踩坑       | ✅ 拼写错误会报警，提前避坑          |
| 性能 / 规范  | ❌ 可能有无效 DOM 绑定  | ✅ 优化绑定逻辑，符合 Vue 3 最佳实践 |



##### 2、触发事件

在 `CartItem` 组件的 `handleDecrease` 和 `handleIncrease` 中触发自定义事件:

```vue
<script setup>
import { defineProps, defineEmits } from 'vue';

// 此处省略源代码中部分代码

// 声明自定义事件
const emits = defineEmits(['减少', '增加']);

const handleDecrease = () => {
    console.log('Click(-), 商品编号:', props.goodsItem.id)
    emits('减少', props.goodsItem.id) // 触发('减少', 商品编号)
}

const handleIncrease = () => {
    console.log('Click(+), 商品编号:', props.goodsItem.id)
    emits('增加', props.goodsItem.id) // 触发('增加', 商品编号)
}
</script>
```

注意:

- `emits` 是由 `defineEmits` 返回的
- `emits` 函数的第一个参数表示自定义事件的名称
- `emits` 函数的第二个参数是为父组件传递的参数



##### 3、监听事件



```vue
<script setup>
import { reactive, ref } from 'vue';
// 此处省略了部分代码
const increase = (id) => {
  console.log('根组件 -> 增加, 商品编号:', id)
}
const decrease = (id) => {
  console.log('根组件 -> 减少, 商品编号:', id)
}
</script>

<template>
  <!-- 此处省略了部分代码 -->
  <shopping-cart :owner="account">
    <cart-item v-for="temp in goods" 
               :key="temp.id" 
               :goods-item="temp"
               @减少="decrease"
               @增加="increase" />
    <total-price />
  </shopping-cart>
</template>
```





#### 2.5.5、事件总线









## 3、路由



> 官方文档：https://router.vuejs.org/zh/



### 3.1、预备项目



#### 3.1.1、新建项目



```cmd
X:\bytecreek\mycodes\xust-vue>pnpm create vite
.../19cc108b483-2b84                     |   +1 +
.../19cc108b483-2b84                     | Progress: resolved 1, reused 1, downloaded 0, added 1, done
|
o  Project name:
|  routers
|
o  Select a framework:
|  Vue
|
o  Select a variant:
|  JavaScript
|
o  Use Vite 8 beta (Experimental)?:
|  No
|
o  Install with pnpm and start now?
|  No
|
o  Scaffolding project in X:\bytecreek\mycodes\xust-vue\routers...
|
—  Done. Now run:

  cd routers
  pnpm install
  pnpm dev


X:\bytecreek\mycodes\xust-vue>
```



#### 3.1.2、安装依赖

首先进入到 `routers` 项目主目录中:

```cmd
cd routers
```

执行 `pnpm install` 安装 `package.json` 中已经声明的依赖:

```
pnpm install
```

安装 `vue-router` 依赖:

```cmd
pnpm add vue-router@4
```



#### 3.1.3、配置项目



```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 从 node 中导入 path 模块
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8080,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})
```



#### 3.1.4、启用路由



```js
import { createApp } from 'vue'
// 导入路由模块中的相关函数
import { createRouter, createWebHistory } from 'vue-router'

import App from '@/App.vue'
// 创建 Vue 应用实例
const instance = createApp(App)

const routes = [
        {
            path: '/',
            component: () => import('@/views/HomeView.vue')
        },
        {
            path: '/horse',
            component: () => import('@/views/HorseView.vue')
        },
        {
            path: '/loong',
            component: () => import('@/views/LoongView.vue')
        },
        {
            path: '/tiger',
            component: () => import('@/views/TigerView.vue')
        },
];

// 创建路由器实例
const router = createRouter({
    history: createWebHistory(),
    routes // 注意，这里的 routes 是 routes: routes 的缩写
})

// 注册路由器(将路由器实例注册为插件)
instance.use(router)

// 挂载应用实例到 DOM 元素上
instance.mount('#app')
```







### 3.2、根组件



预备组件:

- `HomeView.vue`

```vue
<template>
    <h1>Home View</h1>
</template>
```

- `HorseView.vue`

```vue
<template>
    <h1>Horse View</h1>
</template>
```

- `LoongView.vue`

```vue
<template>
    <h1>Loong View</h1>
</template>
```

- `TigerView.vue`

```vue
<template>
    <h1>Tiger View</h1>
</template>
```





#### 3.2.1、`router-link`



通过 `RouterLink` 或 `router-link` 来渲染超链接：

```vue
<template>
    <div>
        <div class="links">
            <RouterLink to="/">Home</RouterLink>
            <RouterLink to="/horse">Horse</RouterLink>
            <router-link to="/loong">Loong</router-link>
            <router-link to="/tiger">Tiger</router-link>
        </div>
    </div>
</template>
```







#### 3.2.2、`router-view`



```vue
<template>
    <div>
        <div class="links">
            <RouterLink to="/">Home</RouterLink>
            |
            <RouterLink to="/horse">Horse</RouterLink>
            |
            <router-link to="/loong">Loong</router-link>
            |
            <router-link to="/tiger">Tiger</router-link>
        </div>
        <div>
            <!-- 路由出口 -->
            <router-view></router-view>
        </div>
    </div>
</template>
```





## 4、Element Plus

Element Plus 是一个基于 Vue 3 的、面向设计师和开发者的组件库。

### 4.1、预备项目



##### 1、新建项目

新建一个名称为 `elements` 的项目

```cmd
X:\bytecreek\mycodes\xust-vue>pnpm create vite
|
o  Project name:
|  elements
|
o  Select a framework:
|  Vue
|
o  Select a variant:
|  JavaScript
|
o  Use Vite 8 beta (Experimental)?:
|  No
|
o  Install with pnpm and start now?
|  No
|
o  Scaffolding project in X:\bytecreek\mycodes\xust-vue\elements...
|
—  Done. Now run:

  cd elements
  pnpm install
  pnpm dev
```

项目创建好之后，可以在 Trae CN 中打开项目并清理部分不需要的文件和目录。



##### 2、安装依赖

进入 `elements` 项目主目录:

```cmd
cd elements
```

根据 `package.json` 安装依赖:

```
pnpm install
```

安装 `vue-router` 依赖

```cmd
pnpm add vue-router@4
```

安装 `element-plus` 依赖

```
pnpm add element-plus
```

安装 `icons-vue` 依赖

```
pnpm add @element-plus/icons-vue
```





##### 3、配置项目

在 `vite.config.js` 中配置端口、为 `src` 目录指定别名：

```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 从 node 中导入 path 模块
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8080,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})
```



##### 4、配置路由

在 `src` 目录下创建一个名称为 `routes` 的目录，并在其中创建一个名称为 `index.js` 的文件。

`@/routes/index.js` 中内容暂时如下:

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

const routeRecords = [

]

// 创建路由器实例
const router = createRouter({
    history: createWebHistory(),
    routes: routeRecords
})

// 采用默认导出的方式将 router 导出
export default router
```

然后将 `main.js` 修改为:

```js
import { createApp } from 'vue'

import router from '@/routes' // 默认导入名称为 index 的文件

import App from '@/App.vue'

const app = createApp(App)

// 挂载路由(将VueRouter当作插件注册到Vue实例上)
app.use(router)

app.mount('#app')
```



##### 5、注册 Element Plus

本项目中准备将 `Element Plus`所有组件全部导入，并且采用全局注册的方式启用。

接着将 `main.js` 修改为:

```js
import { createApp } from 'vue'

import router from '@/routes' // 默认导入名称为 index 的文件

// 导入 ElementPlus 组件库
import ElementPlus from 'element-plus'
// 导入 ElementPlus 组件库的样式文件
import 'element-plus/dist/index.css'

// 注意，这里导入 根组件 也是 默认导入
import App from '@/App.vue'

const app = createApp(App)

// 挂载路由(将VueRouter当作插件注册到Vue实例上)
app.use(router)

// 挂载 ElementPlus 组件库(将ElementPlus当作插件注册到Vue实例上)
app.use(ElementPlus)

app.mount('#app')
```



### 4.2、组件应用



#### 4.2.1、布局容器

Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

- `<el-container>`：外层容器

 当子元素中包含 `<el-header>` 或 `<el-footer>` 时，全部子元素会垂直上下排列， 否则会水平左右排列。

- `<el-header>`：顶栏容器。

- `<el-aside>`：侧边栏容器。

- `<el-main>`：主要区域容器。

- `<el-footer>`：底栏容器。



> https://element-plus.org/zh-CN/component/container



#### 4.2.2、Menu



- `<el-menu>`
  - 属性(Attributes)
    - `mode`：取值为 `horizontal` 表示水平排列菜单，取值为 `vertical` 表示垂直排列菜单
    - `router`:  是否启用 `vue-router` 模式，取值为 `true` 时表示启用路由模式。
  - 事件(Events)
  - 插槽(Slots)
- `<el-sub-menu>`
  - 属性(Attributes)
  - 插槽(Slots)
- `<el-menu-item>`
  - 属性(Attributes)
    - `index`: 菜单项的唯一标志；当 `el-menu` 的 `router` 为 `true`时，`index` 表示路由路径
  - 事件(Events)
  - 插槽(Slots)
- `<el-menu-item-group>`



>