Skip to content

meishaFE/meisha-template-admin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

梅沙科技管理端项目cli3预设模版

模版说明

此模版根据cli2模版升级而来,修复了之前存在的一些问题,并且更新添加了一些新的功能以及页面。

使用说明

注意此模版基于vue-cli3,输入以下命令进行创建项目,my-project是你的项目名称。

vue create --preset meishaFE/meisha-template-admin my-project

命令执行后进行自定义选择,无特殊情况默认即可。

选项

选项解释:

  • 项目中文名称:将作为项目的标题,设置后可修改('./src/config/index.js')。
  • 项目打包地址:与发布系统中的gitlab名称对应,设置后可修改('./vue.config.js'),默认为dist。
  • vue-router:默认使用,若不使用需注意删除router文件夹以及views文件夹。
  • vuex:默认使用,若不使用需注意删除store文件夹。
  • elementUI,默认使用,若不使用需注意自定义组件将无法使用。
  • polyfill,能在环境中添加缺失的特性,默认不使用。
  • pre-commit for auto fix + format,旧模版功能,默认不使用。
  • meishaWatch,梅沙日志系统,默认使用,项目创建后注意在'./src/main.js'中添加对应日志id值。
  • 自动导入scss公共变量、mixin等,默认使用,使用后无需在样式内单独导入公共样式文件。

模版结构以及对应功能

模版结构图

模版结构图

babel配置

新模版使用的是babel7,配置基于旧模版babel(6.*)的配置,因此升级后尽量与以前保持一致。旧模版中使用的是preset-env与stage-2预设配置,vue-cli3中有一个默认的babel预设@vue/babel-preset-app,这个预设中就默认包含了env、stage3以及transform-runtime,与原配置不冲突,因此采用此预设。

由于balbel7中的stage-2已经废弃,所以采用了官方推荐的升级方法来兼容stage-2配置。

polyfill方法采用的是官方的方法中的第三种,可选择是否启用,需要注意的是使用后最终的包大大小可能会增加(详细原因可见文档)。

Eslint配置

点击查看

vue-cli3配置

vue-cli3配置文件中配置了导出文件夹的名称以及公共scss文件的导入,注意导入的文件是_index.scss文件,如果新建了新的公共scss文件,需要自行导入到_index.scss文件中

src源文件夹

assets文件夹

用来存储img与scss文件。

components文件夹

点击查看组件介绍

config配置文件夹

在config配置文件夹中有对应的文件可以配置api、显示菜单、分页相关。

router文件夹

是用来配置vue-router的相关信息。

store文件夹

  • action.js存放的是ACTION操作。
  • mutation.js存放的是MUTATION操作,里面方法名全部以大写方式编写
  • getters.js存放的是GETTER操作。
  • state.js存放的是State的配置。
  • index.js导入以上文件初始化vuex。

utils文件夹

  • cookie.js:里面存放着可以操作cookie的函数,目前有getCookie,delCookie,setCookie三个操作,定义了全局变量$cookie
  • download.js:里面存放着下载相关的函数。
  • fetch:封装了一个http请求函数,基于axios,并在其中完成一些常用错误处理、auth设置等操作,定义了全局变量$http
  • filters:包含着全局过滤器,目前有setDefaultText,formatMoney,dateFilter三种过滤器,分别是用来设置默认展示文字,格式化金钱,格式化日期。
  • reg.js:包含常用的正则表达式。
  • tool.js:包含常用的工具函数,目前有getUrlParam,addBaiduLog,getSystemAddress,handleCommonError,分别是用来获取url参数,设置百度统计,获取系统地址,常用错误处理,定义了全局变量$tool
  • type.js:包含与变量类型相关的函数,定义了全局变量$type

views文件夹

  • 404.vue:404页面,返回到首页设置的是进入welcome页面。
  • home.vue:是包裹路由在/以下页面的组件,用来引入菜单组件和顶部栏组件。
  • login.vue:一个空的页面,旧模版就有的,系统不需要可删除
  • noLimit.vue:无权限页面,返回到首页设置的是进入admin页面。
  • welcome.vue:首页。

main.js

功能:导入其他文件,初始化日志系统(注意创建后需设置id),auth的cookie判断,全局变量设置,初始化Vue。

更新说明

08.26

  1. 引入底部常驻条组件footer-view.vue,用于常用操作
  2. 引入标题信息布局组件content-header.vue,用于展示标题信息的布局
  3. 引入筛选信息布局组件filter-form.vue,常用于列表页的筛选信息布局
  4. 引入内容信息展示布局组件info-view.vue,info-item.vue,常用于内容信息的展示布局,两个组件配套使用

08.5

  1. 引入sass新的混合宏bem命名规则
  2. 加入两端布局组件ends-layout.vue
  3. 更新弹窗组件the-dialog.vue
  4. 组件命名规范修改,使用xxx-xxx.vue形式
  5. 新增步骤条组件

07.25

  1. 增加默认梅沙科技ico
  2. scss中的iconfont拆分成单独文件
  3. 不再引入后端iconfont,改成单独引入图片
  4. store的index中的state拆分成单独文件

07.24

  1. 添加无权限页面
  2. font-family修改
  3. pagination组件修改,修复bug
  4. 修改cookie.js,修复bug
  5. 修改fetch,修复bug
  6. 修改auth默认存储在vuex中
  7. 添加tool文件
  8. filter添加空值检测
  9. 添加梅沙日志系统
  10. 添加scss公共变量导入

09.26

  1. 添加 eslint 检测
  2. vuex 的 module 结构
  3. data.js 添加
  4. router 分模块目录
  5. elementUI 主题修改文件
  6. 日志系统接入模版
  7. 常用工具类完善
    • 添加触发 toast的方法 msg.suc, msg.err, msg.warn
    • 添加根据区号验证电话号码方法 phoneCodeAndNumValidator
    • 添加深拷贝方法 deepClone
  8. 添加 generator\base\CHANGELOG.md 文件, generator\base\pulic\index.html 文件
  9. 更新文件名 assets/scss/_function.scssassets/scss/__function.scss
  10. custom-thead.vue 添加 bEnableSelectAll 参数用于是否支持全选功能
  11. the-dialog 弹窗组件的 dialogObj 参数添加 hasBottomButton 属性 —— 是否显示弹窗底部“确定”,“取消”按钮。
  12. 移除 Menu.vue,Log.vue,Head.vue
  13. 添加 tag-panel.vue 筛选信息展示组件, the-menu.vue 导航组件, the-header.vue 系统头部

10.31

  1. 更正 body 字体的font-family
  2. 更换导航图标 assets/img/icon/icon_menu.png
  3. 添加上传图片组件 upload-image
  4. 添加搜索组件 select-input.vue
  5. 添加左侧导航demo,和修改导航样式
  6. 规范部分组件的文件命名和组件内的 class 命名

12.06

  1. 更新404,无权限,欢迎页面样式

About

梅沙科技管理端项目vue-cli3预设模版

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published