精华内容
下载资源
问答
  • VUE后台管理系统项目优化 1、生成打包报告 通过可视化的UI面板直接查看报告,在可视化的UI面板中,通过控制台和分析面板,可以方便地看到项目中所存在的问题。 2、 通过 vue.config.js 修改 webpack 的默认配置 默认...

    VUE后台管理系统项目优化

    1、生成打包报告

    通过可视化的UI面板直接查看报告,在可视化的UI面板中,通过控制台和分析面板,可以方便地看到项目中所存在的问题。

    2、 通过 vue.config.js 修改 webpack 的默认配置

    默认情况下,Vue项目的开发模式与发布模式,共用同一个打包的入口文件(即 src/main.js)。为了将项目 的开发过程与发布过程分离,我们可以为两种模式,各自指定打包的入口文件,即:
    ① 开发模式的入口文件为 src/main-dev.js
    ② 发布模式的入口文件为 src/main-prod.js
    chainWebpack 通过链式编程的形式,来修改默认的 webpack 配置

    通过 chainWebpack 自定义打包入口 :

    module.exports = { 
      chainWebpack: config => { 
        config.when(process.env.NODE_ENV === 'production', config => { 
          config.entry('app').clear().add('./src/main-prod.js') 
        }) 
        config.when(process.env.NODE_ENV === 'development', config => { 
          config.entry('app').clear().add('./src/main-dev.js') 
        }) 
      } 
    }
    

    3、 通过 externals 加载外部 CDN 资源

    具体配置代码如下:

      vue: 'Vue', 
      'vue-router': 'VueRouter', 
      axios: 'axios', 
      echarts: 'echarts', 
      nprogress: 'NProgress', 
      'vue-quill-editor': 'VueQuillEditor'
    

    配置完成后需要在public/index.html 文件的头部,添加CDN 资源引用

    4、路由懒加载

    当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

    
    /* 路由懒加载 */
    /*路由被访问的时候才加载对应组件*/
    {
       path: '/home',
       name: 'home',
       component: import('../page/home')
    },{
       path:'/about',
       name:'about',
       component:import('../page/about')
    },{
    

    5、打包上线之后使用 gzip 可以减小文件体积,使传输速度更快。

      // 安装相应包   
      npm install compression -S   
      // 导入包   
      const compression = require('compression');   
      // 启用中件       
      app.use(compression());
    
    展开全文
  • 前端vue后台管理系统项目优化

    千次阅读 2019-11-12 17:22:46
    1.项目运行一段时间会出现缓存过多,处理办法:this.$destroy(); 在销毁的时候处理: destroyed(){ this.$destroy(); } 2.button按钮不让用户连续点击,点击完后等待2秒,才可以再次点击 处理方法:v-...

    1.项目运行一段时间会出现缓存过多,处理办法: this.$destroy();

    在销毁的时候处理:

        destroyed(){
            this.$destroy();
        }

    2.button按钮不让用户连续点击,点击完后等待2秒,才可以再次点击

    处理方法:v-preventReClick

    <Button v-preventReClick @click="loadListData" type="primary" icon="md-search">查询</Button>

    3.webpack打包并且可以预览每个打包后的文件大小

    一般都是用:npm run dev  或者   npm run build:prod

    处理方法:打包指令:
    npm run build:prod --report

    打包后dist里面有重复的文件:如下图

    展开全文
  • 注意:里面的部分文件夹可根据自己项目需求进行删减(比如lang,icons,mock,vendor这些文件夹),vendor文件夹用来存放第三方提供的功能插件等。static文件夹下一般放一些静态资源(比如静态资源图片等)。 ...

    vue-cli@3.x 之前的版本构建的项目目录:

    vue项目标准目录结构

    vue-cli@3.x 之后的版本构建的项目目录:

    vue新版项目目录结构

    两者区别:

    安装创建命令:

    3.x版本以前:

    npm i -g vue-cli
    
    vue init webpack project
    

    3.x版本以后:

    npm install -g @vue/cli
    
    vue create project
    

    区别1: 下载npm包的包名变化。 vue-cli ==> @vue/cli。
    区别2: 生成的vue项目目录的命名改变,同时生成的目录结构,也隐藏了webpack配置文件,及新增一些.env.xxx配置文件来设置相关环境变量。

    区别1详解: npm发布了新的包命名规则。具体请查看npm包命名规则变更
    区别2详解: vue-cli将webpack配置的细节隐藏。需要自己创建vue.config.js来配置。具体请查看配置文档

    注意:里面的部分文件夹可根据自己项目需求进行删减(比如lang,icons,mock,vendor这些文件夹),vendor文件夹用来存放第三方提供的功能插件等。static文件夹下一般放一些静态资源(比如静态资源图片等)。
    展开全文
  • 项目目录下的vue.config.js文件中配置: module.exports = { publicPath: "./", //配置打包之后的相对路径 devServer: { proxy: { //这里可以配置代理 "/api": { target: "http://api.fo...

    在开发中由于前后端服务器不一致,就有了跨域问题

    解决办法:使用proxy (开发环境)

    在项目目录下的vue.config.js文件中配置:

    module.exports = {
     publicPath: "./",   //配置打包之后的相对路径
     devServer: {
       proxy: {		//这里可以配置代理
         "/api": {
           target: "http://api.focues.com",  //这里写的是后台接口的域名和端口号
           ws: true,    //启用websockets
           changeOrigin: true,  //开启代理
           pathRewrite: {   // 重命名
             "^/api": "/"
           }
         }
       }
     }
    
    • 然后使用/api/代替你原本的服务器端的baseUrl
    在发送请求时
    axios({
        url: '/api/login.action',  
        method: 'post',
        params: {
            loginName:username,password: password
        }
    }).then(res => {
        var str = res.data;        
        sessionStorage.setItem('loginName',username)
        sessionStorage.setItem('user',username)
        this.$router.replace({name: 'Menu', params: {loginName: username,password:password}})
    }).catch(err => {
        console.log(err.data)
    })
    
    正式环境

    在main.js文件中配置

    axios.defaults.baseURL='http://***/***';
    
    展开全文
  • 因为业务需要,需要在项目里去做一个发布消息的富文本编辑器,能够实现传递给后台的编辑器内容能够自己编译(即html语义化标签) 1. 安装依赖???? 首先在项目终端里执行以下命令: npm i vue-ueditor-wrap 如果提示...
  • 导入axios import axios from 'axios' ...配置请求的根路径(调用后台接口) axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' 请求拦截器 axios.interceptors.request.use(config =&g...
  • VUE 后台管理系统

    2019-01-17 13:42:18
    vue 后台管理系统,可打包webpack 用element,axios 代替HTTP
  • vue后台管理系统.

    2021-01-16 21:19:25
    使用完整的vue框架,构建的一个完整的后台管理系统,功能已经完善。可以快速上手并且学习。
  • vue后台管理系统

    2017-06-21 13:55:59
    完整的vue后台管理系统加webpack自动构建
  • 基于elementUI的vue后台管理系统,下载之后先npm install 然后npm run dev 直接可以使用。
  • vue后台管理系统模板

    2019-05-01 14:23:06
    公司要开发一个后台管理系统,查阅了很多vue框架,本人觉得element简洁,方便,于是选择它作为我们的首选框架,并分享给大家,如果您觉得有需要改进的地方可以提出来一起探讨。
  • vue后台管理系统,包含数据库,element ui框架,和大多数管理系统一样,供大家参考,如有疑问,请私信
  • 基于Vue和element-ui组件库搭建的一个后台管理系统。主要讲的是关于后台管理系统权限控制问题,包括:菜单控制、界面控制、按钮控制、请求和响应控制。
  • vue后台管理系统-vue全家桶

    千次阅读 2019-05-21 22:35:19
    vue全家桶系列-vue后台管理系统 前言 初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,只能自己弄了一个后台管理系统的模板,包括几乎包括所有的vue全家桶的重要功能...
  • 适用大部分vue2.0后台管理系统,iview框架开发后台系统 最新资源 信息系统
  • Vue后台管理系统推荐

    千次阅读 2020-02-07 20:25:20
    推荐几款后台管理系统模板 1、vue-element-admin https://panjiachen.github.io/vue-element-admin-site/zh/guide/ 本项目的定位是后台集成方案,不适合当基础模板来开发,模板建议使用vueAdmin-template, ...
  • vue后台管理系统框架

    2018-12-29 15:16:42
    这是一个不包含任何页面的vue后台管理下载分数为啥不可以设为0,为什么至少为1分系统框架
  • vue 后台管理系统

    2018-11-09 11:34:23
    这是一个用vuejs2.0和element搭建的后台管理界面。 技术栈:  vue2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。  element ui:基于vue2.0的ui组件库。  vue-router:一般单页面...
  • vue后台管理系统.zip

    2021-04-30 14:44:53
    使用vue框架结合elementUI开发的一款电商后台管理系统
  • 基于饿了么的vue后台管理系统模板
  • SpringBoot+Vue后台管理系统脚手架.zip
  • 正确姿势开发vue后台管理系统 Github项目地址
  • Vue后台管理项目的总结

    千次阅读 多人点赞 2021-06-09 14:33:07
    Vue后台项目的前端总结技术栈:样式:CSS 预处理器的选择:局部样式与全局样式:异步请求:--- 重点封装 Axios:跨域问题:Mock 数据:规则:路由:--- 重点布局三大类:权限验证:1.auth2.permissionsVuex:组件库:过滤...
  • 主要介绍了浅谈vue后台管理系统权限控制思考与实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 管理员 vue后台管理系统(练习)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,781
精华内容 12,312
关键字:

vue后台管理系统项目

vue 订阅