UniChatFrontEnd 说明文档

项目简介

• 基于 @vue/cli, vue-router, vuex, electron
• 第一次使用项目需要安装依赖，运行一下脚本

# 请不要使用cnpm安装依赖，可能会出现玄学bug
# 如果安装速度较慢，请将npm 换源至淘宝等国内npm的源
# 如果换源后还是慢请自挂东南枝
npm install
# 安装依赖成功后可以运行以下脚本
# 打开热加载服务器
npm run serve
# 热加载服务器启动后访问http://localhost:8080
# 打包发行
npm run build

项目目录说明

src 源代码

• main.js为入口文件，挂载根节点
• *.scss为样式文件
• Init.vue为根节点
• background.js为electron相关内容

assets 静态图片内容

sassUtilssass 复用Mixin

• cleatFixMixin.scss 清除浮动Mixin
• fontMixin.scss 文字样式Mixin
• overFlow overflow 相关Mixin

sassConfig

module 复用函数

• debounce.js 函数防抖

config 配置文件

• list.config.js 大部分静态文字内容以及部分测试数据
• route.config.js 路由配置
• store.config.js 全局状态管理
• validate.config.js 正则相关

components主组件

elements 子组件

UniChatBackEnd Github 联动

项目部署

1. 在项目目录下执行以下脚本

   npm install electron-builder --save-dev

2. 在 package.json 内做如下配置

   "build": {
       "appId": "appName",
       "mac": {
           "target": ["dmg", "zip"]
       },
       "win": {
           "target": ["nsis", "zip"]
       }
   },
   "scripts": {
    	"dist": "electron-builder --win --x64"   
   }

3. 执行以下脚本

   npm run dist

4. 在目录下找到对应的安装包