# vicbic

**Repository Path**: misaka10418/vccl

## Basic Information

- **Project Name**: vicbic
- **Description**: vicbic library web
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-02
- **Last Updated**: 2025-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

##简介
这是个单页面(SPA)应用,主要技术栈如下
- JavaScript框架：Vue 3.0
- 构建工具：Vite 2.0 beta
- UI库：element-plus 1.0.2-beta

入手需要先装个node和npm，相当于python和pip

当前版本node:14.8.0; npm：7.5.3; Win10
>之所以选择以上技术栈主要是为了少写代码和方便维护，避免了更新内容要直接修改html的情况。在2020年之前，前端的构建工具(webpack等)都需要编译后才能看到结果，开发效率低，这里使用Vite作为构建工具，特点是热更新，改动了代码在浏览器能实时看到效果。
##运维
1. ####部署

    将`/dist/`文件夹内的内容复制到服务器根目录，然后把所有请求重定向至index.html即可完成部署。[服务器重定向设置教程](https://next.router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations)

    因为教研室主页不在根域名上，所以我设置根URL为`http://域名/vccl/`。如果要改成别的，需将下面这个参数改了重新编译：  
   */vite.config.js*
    ```
    base:"vccl"
    ```
  
2. ####更新内容

    通过修改`/src/datas`文件夹中的`json`数据来更新内容，然后在根目录运行👇重新编译。
    ```
    npm run build
    ```
    
    - 修改成员
    
        将新同学照片放到`/public/profiles`中对应的文件夹, 然后照着修改`src/datas/members.json`
    - 添加论文
     
        在`src/datas/publications.json`中添加。论文作者名字格式约定为
      ```
      Word = [A-Z][a-z]*        //每个字的拼音以大写开头
      Name = Word-Word Word     //三字格式
           | Word Word          //二字格式
      ```
        论文的`id`格式约定为
      ```
      (年份)(编号a)(编号b)
      -年份4位
      -编号a 2位，同年同类的论文从99降序编号
      -编号b 1位，期刊：2；会议：1；书籍：0
      ```
      论文的附件信息添加在`json`文件的`appendix`列表中，可以是文件、链接、pdf等。文件放到`/public/resource/data`，pdf放到`/public/resource/papers`中
  3. 其它
    
    都差不多，照着原来的`json`很容易看懂怎么改，每个json文件对应每个页面
##开发
- 目录结构
   
   dist 存放编译后的项目  
   node_modules 库文件所在目录  
   public/ 公共资源，这个目录的东西在编译后直接复制进dist  
  |--album 相册  
  |--profiles 证件照  
  |--resource 和论文相关的资源  
   src/  
   |--assets 一些静态资源  
   |--components vue组件  
   |--datas 站点的主要数据  
   |--pages 这个文件夹里的每个vue文件对应一个页面  
   |--App.vue 网页的最外层(导航和页脚) 
  

- 了解这几个东西就能看懂项目结构很熟练地上手开发了
    >虽然文件很多，但几乎是构建工具生成的默认结构，我没有魔改过
    
    1. [Vue3](https://vue3js.cn/docs/zh/guide/introduction.html) 需先熟悉JavaScript和有一定的前端开发经验才好懂
    2. [element-plus](https://element-plus.org/#/zh-CN) 用过其它UI库(如bootstrap)能秒上手
    3. [vite-plugin-voie](https://github.com/brattonross/vite-plugin-voie) 一个Vue插件，能够基于文件结构生成路由,和`pages`文件夹有关，易懂