本原型工程需要vue cli 3.3+

npm install -g @vue/cli

项目启动

安装依赖

npm install

开发模式下编译并热更新

npm start

or

npm run serve

生产模式下编译并压缩

npm run build

执行ESLint检查，并修复

npm run lint

菜单json文件

{
  "path": "/demo/clayjs", // 一级菜单路由路径
  "value": "demo-clayjs", // 创建的路由文件的名称、一级路由的name
  "title": "clayjs图表", // 元信息title
  "iconSvg": "flask", // svg图标
  "children": [
    {
      "path": "/demo/clayjs/list/line", // 子菜单路由，若子菜单的value值没有提供则转换为路由name
      "value": "demo-clayjs-list-line", // 子菜单路由name
      "title": "折线图", // 元信息title
      "icon": "home" // font-awesome 图标名称
    }
  ]
}

持久化菜单数据

路由初始化完成后，我们一般需要从登录交易中获取特定用户对应的菜单。获取之后把菜单存入了localStorage，当用户刷新页面后重新初始化菜单。

// 持久化菜单数据 /src/store/modules/vxadmin/modules/account.js
dispatch('vxadmin/menu/initMenu', menuHeader, { root: true })

// 刷新页面后，从localStorage中获取菜单，如果有，则重新设置菜单
this.$store.dispatch('vxadmin/menu/loadMenu').then(menu => {
  if (menu) {
    this.$store.commit('vxadmin/menu/headerSet', menu)
  }
})

顶部菜单Header与左侧菜单Aside的联动

这个功能的实现依赖于第一步初始化的路由配置

所有 一级路由 的path与 一级菜单 的 path对应，该 一级菜单 下的其他菜单作为对应 一级路由 的子路由

在此基础上，当路由跳转时，获取一级路由的path，根据path从菜单数据中拿到对应菜单的children，将其作为侧边菜单。

// main.js中设置左侧菜单
watch: {
  // 检测路由变化切换侧边栏内容
  '$route.matched': {
    handler(matched) {
      if (matched.length > 0) {
        // change by lss
        const menuAside = this.$store.state.vxadmin.menu.header

        const _side = menuAside.filter(menu => menu.path === matched[0].path)
        this.$store.commit('vxadmin/menu/asideSet', _side.length > 0 ? _side[0].children : [])
      }
    },
    immediate: true
  }
}

菜单与路由权限

权限的控制在vue-router的导航守卫beforeEach中实现。

当路由跳转时，遍历该路由的path是否在 登录时获取的 菜单中存在，存在则跳转，否则不允许跳转。

构建生产版本

若node出现内存溢出

1、判断是否安装相关依赖包（cross-env、increase-memory-limit），若没有请执行， 若已经安装请跳过

1)、配置package.json

 "scripts": {
   ...
    "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
 }  

2）、安装依赖

npm install cross-env increase-memory-limit -D

or 重新安装所有依赖

npm install

2、安装完依赖后，请执行

npm run fix-memory-limit

3、若是mac电脑，安装完后，运行npm run build可能会报错，请按照提醒进行修改

例如：node_modules/.bin/vue-cli-service文件中有错误

const requiredVersion = require('../package.json').engines.node --max-old-space-size=4096

改为

const requiredVersion = require('../package.json').engines.node

性能优化

配置gzip

可在html、css、js文件大小大于10kb(服务端配置)时进行文件gzip,减少传输的时间,需要web服务器支持gzip，进行相应的配置

• 若需要使用请参考该链接进行服务器配置前端性能优化之gzip

1、tomcat

tomcat的配置如下：

找到tomcat的server.xml文件，找到其中Connector节点然后进行配置修改，具体配置如下

<Connectorport="80"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" maxPostSize="0" useBodyEncodingForURI="true"compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>

参数说明：

• compression="on" 打开压缩功能
• compressionMinSize="2048" 启用压缩的输出内容大小，当被压缩对象的大小>=该值时才会被压缩，这里面默认为2KB
• noCompressionUserAgents="gozilla, traviata" 对于以下的浏览器，不启用压缩
• compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" 压缩类型

注意：tomcat7以后，js文件的mimetype类型变为了application/javascript，而在tomcat7以下则为text/javascript;具体的tomcat7定义的类型可以在：conf/web.xml文件中找到

可以在web.xml下搜索，如我搜索javascript会找到如下代码

<mime-mapping>
    <extension>js</extension>
    <mime-type>application/javascript</mime-type>
</mime-mapping>

切记上面的类型不能配置错了，如果配置错了压缩是不会起作用的

2、nginx

gzip使用环境:http,server,location,if(x),一般把它定义在nginx.conf的http{…..}之间

• gzip on

  on为启用，off为关闭

• gzip_min_length 1k

  设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。

• gzip_buffers 4 16k

  获取多少内存用于缓存压缩结果，‘4 16k’表示以16k*4为单位获得

• gzip_comp_level 5

  gzip压缩比（1~9），越小压缩效果越差，但是越大处理越慢，所以一般取中间值;

• gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php

  对特定的MIME类型生效,其中'text/html’被系统强制启用

• gzip_http_version 1.1

  识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码

• gzip_vary on

  启用应答头"Vary: Accept-Encoding"

• gzip_proxied off

  nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)

• gzip_disable msie6

  (IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库

以上代码可以插入到 http {...}整个服务器的配置里，也可以插入到虚拟主机的 server {...}或者下面的location模块内

新增

.env.development文件中的VUE_APP_SAVE_JSON设置成true，即可开启根据返回数据生成JSON文件功能

版本

@ csii vx

版本记录

2021.07.01 hash: b8656d6a version: V1.7.0_PC端纯净版本

Current Tags

• 3.5.1                                ...           latest (3 years ago)

2 Versions

• 3.5.1                                ...           3 years ago
• 3.7.2                                ...           4 years ago