# coco-rush-web

**Repository Path**: wanneme/coco-rush-web

## Basic Information

- **Project Name**: coco-rush-web
- **Description**: 个人学习前端项目，vue3、vite、naiveui
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-04
- **Last Updated**: 2023-09-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 简介
学习 vue3 的前端项目。
`node` : v12.16.1
`npm` : 6.13.4

## 基础框架
`vue3.2` `vite` `naive-ui`

`axios` `pinia` `vue-meta`  `vue-router` 

<br>
`npm-sass` `sass` `sass-loader` 跟 `node` 版本有关，请删掉重新安装  
页面右下角的主题选择器是 `naive-ui` 的主题选择器，在 `App.vue` 中注释相关标签 `<n-theme-editor>` 就能关闭 
## 根目录下的自定义组件

这里存放着项目内重要组件，目录：`/src/components/`

### 页面标题

组件目录： `vue-meta`

使用三方组件 `vue-meta` [github](https://github.com/nuxt/vue-meta/tree/next) , 
**因为处于测试版本, 版本号不要低于 `3.0.0-alpha.10`, 默认是 `3.0.0-alpha.2`。**

标题有三个地方可以设置：
第一个标题是 入口文件 `index.html`，这个标题会被 `vue-meta` 覆盖；
第二个标题是 `/src/components/vue-meta/meta-header.vue` 中的默认配置；
第三个标题是 其他组件传递给 自定义组件 `meta-header.vue` （上一条说明）的数据。

最后，`vue-meta` 的 `option Api` 更好用

<br>

### 组件库 navie-ui

组件目录：`naive`

使用了 `tree-shaking` 按需引入的方式，所以这里将组件库内使用频率较高的部分进行了全局引入。可适当增加。如果已经全局注册了组件，但页面内又引入了一次，应该不会有影响。

<br>

### 全局状态 pinia

组件目录：`pinia`

全局状态组件大概是叫大菠萝。`pinia` 返回的是一个回调函数，每次使用前，需要先调用这个函数来获取实例（假定命名 `sotre`），同时，如果想对`store`内的属性做数据绑定，则需要用 `storeToRefs` 函数将实例 `store` 转换为可响应式。

生成实例的回调函数首次只能在 `setup` 中被调用，当实例生成后，就可以随意使用回调函数获取实例了。

##### vue 组件内的使用方式

参考：`/src/views/components/HelloWorld.vue`

##### js 文件内的使用方式

参考：`src/api/request.js` 将 `token` 塞入 `axios` 请求头

<br>

**注：js内获取全局状态`store`实例前，`store`必须已经生成，即已经在某个组件的 `setup` 函数中调用了`pinia`生成实例的回调函数。所以推荐在 `App.vue`的 `setup` 中调用回调函数生成实例。**

由于此项目内 `App.vue` 内容比较多，所以生成实例放到了 `main.js` 中。

另外，`pinia` 并不是只能生成一个实例，而是一个 `js` 文件对应一个实例（纠正： `defineStore`  定义多少个就是多少个）。

<br>

### 后台路由组件

组建目录：`layout`

此组件定义了后台管理的基础。模仿常见后台管理菜单布局，左侧菜单使用 `naive-ui` 内组件 `NMenu` ，菜单绑定路由。

路由中带有 `co_menu` 属性的表示是后台菜单栏，路由的 `name` `path` 需要唯一，不能重复（ `path` 是指全路径，这肯定不用多说 ）。

组件内对菜单的判断有点复杂....

TODO: 在 `co_menu` 中增加 `permission` 属性，根据当前用户权限控制菜单。 

<br>

### 其他

`sim-table` 是没有使用的组件，一开始是想模仿 `element` 做一个表格组件出来（`naive` 的表格用起来不习惯），结果放弃了。

`HelloWorld.vue` 是项目自动生成的，无用。