精华内容
下载资源
问答
  • vue vue-element-ui组件 layout布局系列学习(一)

    万次阅读 多人点赞 2018-04-04 10:58:50
    本文仅供参考: 首先你要掌握的基础知识: row 行概念 <el-row></el-row> col列概念 <el-col></el-col> col组件的:span属性的布局调整,一共分为24栏: ...div class="g...

    本文仅供参考:

    首先你要掌握的基础知识:

    row 行概念

    <el-row></el-row>

    col 列概念

    <el-col></el-col>

    col组件的:span属性的布局调整,一共分为24栏:

    代码示例:

    <el-row>
      <el-col :span="24"><div class="grid-content"></div></el-col>
    </el-row>           

    效果展示:

    代码示例:

    <el-row>
      <el-col :span="12"><div class="grid-content"></div></el-col>
    </el-row>

    效果展示:

    row组件的:gutter属性来调整布局之间的宽度---分栏间隔

    代码示例:

    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

     

    效果:


     

    Col组件的:offset属性调整方块的偏移位置(每次1格/24格)

     

    <el-row :gutter="20">
      <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>
    </el-row>

     

    效果:


     

    对齐方式:

    row组件的type="flex"启动flex布局,再通过row组件的justify属性调整排版方式,属性值分别有:

     

    1. justify=center 居中对齐
    2. justify=start 左对齐
    3. justify=end 右对齐
    4. justify=space-between 空格间距在中间对齐
    5. justify=space-around 左右各占半格空格对齐
     <el-row type="flex" class="row-bg" justify="center">
       <el-col :span="6"><div class="grid-content"></div></el-col>
     </el-row>



    效果:


     

    响应式布局:

    参考bootstrap的响应式,预设四个尺寸

    1. xs <768px
    2. sm ≥768px
    3. md ≥992
    4. lg ≥120
    使用方式:
    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

     

    练习示例:

     

            <span class="field-label">方块选择:</span>
            <!-- 选择屏幕框 -->
              <select v-model="selected" @change="selectbj(selected)">
                <option v-for="option in layouts" :value="option.value">
                    {{ option.name }}
                </option>
              </select>

     

    data默认初始化数据:

          selected: 0,
          layouts: [
            { 'name': '1x1模式', 'value': '0' },
            { 'name': '2x1模式', 'value': '1' },
            { 'name': '2x2模式', 'value': '2' },
            { 'name': '3x2模式', 'value': '3' },
            { 'name': '3x3模式', 'value': '4' },
            { 'name': '1+5模式', 'value': '5' }
          ],

     

    布局代码:

        <el-main v-model="selected" >
          <div class="block" style="height:400px">
                <!-- {{selected}} -->
                <div style="height:100%;width:100%" v-if="selected==0">
                <!-- 1*1布局 -->
                    <el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">
                      <el-col :span="24"></el-col>
                    </el-row>
                </div>
                <!-- 2*1布局 -->
                <div style="height:100%;width:100%" v-else-if="selected==1">
                    <el-row :gutter="10" type="flex" class="row-bg el-row-two" justify="space-between">
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                    </el-row>
                </div>
                <!-- 2*2 -->
                <div style="height:100%;width:100%" v-else-if="selected==2">
                  <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                    </el-row>
                </div>
                <!-- 3*2布局 -->
                <div style="height:100%;width:100%" v-else-if="selected==3">
                  <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                    </el-row>
                </div>
                <!-- 3*3模式 -->
                <div style="height:100%;width:100%" v-else-if="selected==4">
                    <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                    </el-row>
                </div>
                <!-- 模式 -->
                <div style="height:100%;width:100%" v-else>
                   <el-row :gutter="10" type="flex" class="row-bg" justify="start">
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="10" type="flex" class="row-bg" justify="start">
                        <el-col :span="8">
                          <div class="grid-a-contentWidth"></div>
                          <br>
                          <div class="grid-a-contentWidth"></div>
                          </el-col>
                        <el-col :span="16"><div class="grid-a-content-a-Width" ></div></el-col>
                    </el-row>  
                </div>
              </div>
        </el-main>

     

    样式(从里面对应取一下):

    <style scoped>
      .box-card{
        width: 400px;
        margin: 20px auto;
      }
      .block{
        padding: 30px 24px;
        background-color: rgb(27, 16, 16);
      }
      .alert-item{
        margin-bottom: 10px;
      }
      .tag-item{
        margin-right: 15px;
      }
      .link-title{
        margin-left:35px;
      }
      .components-container {
    		position: relative;
    		height: 100vh;
    	}
    
    	.left-container {
    		background-color: #F38181;
    		height: 100%;
    	}
    
    	.right-container {
    		background-color: #FCE38A;
    		height: 200px;
    	}
    
    	.top-container {
    		background-color: #FCE38A;
    		width: 100%;
    		height: 100%;
    	}
    
    	.bottom-container {
    		width: 100%;
    		background-color: #95E1D3;
    		height: 100%;
    	}
    
      .left-container-twoOne {
    		background-color: rgb(110, 75, 75);
        height: 100%;
      }
    
      .container-onetoOne {
          background-color: rgb(47, 80, 74);
          height: 100%;
          width: 50%;
      }
    
      .container-onetoTwo {
          background-color: rgb(61, 19, 56);
          height: 100%;
          width: 50%;
      }
    
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: #57926b;
      }
      .bg-purple {
        background: #7e2970;
      }
      .bg-purple-light {
        background: #071c4d;
      }
      .grid-content {
        background-color: rgb(44, 143, 121);
        border-radius: 4px;
        min-height: 150px;
        min-width: 100px;
      }
      .grid-contentB {
        background-color: rgb(64, 56, 134);
        border-radius: 4px;
        min-height: 150px;
        min-width: 100px;
      }
      .grid-a-contentWidth {    
        background-color: rgb(44, 143, 121);
        border-radius: 4px;
        min-height: 100px;
      }
      .grid-a-content-a-Width {    
        background-color: rgb(44, 143, 121);
        border-radius: 4px;
        min-height: 220px;
      }
    
      .grid-one-contentheight {    
        background-color: rgb(44, 143, 121);
        border-radius: 4px;
        min-height: 100%;
      }
    
    .el-row-two {
        margin-bottom: 80px;
        margin-top: 80px;
      
      }
    </style>


    效果:


     


     

    展开全文
  • vue-element-admin完整项目实例

    万次阅读 多人点赞 2019-06-12 12:19:27
    项目地址:https://github.com/PanJiaChen/vue-element-admin 项目介绍:https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/ 项目效果: npm install 报错 或者是下面的错误 git.EXE ls-remote...

    项目运行地址:https://panjiachen.github.io/vue-element-admin/#/login
    项目地址:https://github.com/PanJiaChen/vue-element-admin
    项目地址:(国际化)https://github.com/PanJiaChen/vue-element-admin/tree/i18n
    项目介绍:https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/
    项目效果:
    在这里插入图片描述

    正常流程执行运行

    #入门指南
    # clone the project
    git clone https://github.com/PanJiaChen/vue-element-admin.git
    
    # enter the project directory
    cd vue-element-admin
    
    # install dependency
    npm install
    
    # develop
    npm run dev
    
    #This will automatically open http://localhost:9527
    

    npm install 报错

    在这里插入图片描述
    或者是下面的错误
    git.EXE ls-remote -h -t git://github.com/

    Git的安装教程https://www.cnblogs.com/ximiaomiao/p/7140456.html
    此种解决方案

    cd 项目根目录
    
    git config --global url."https://".insteadOf git://
    

    或者是下面的错误
    Unexpected end of JSON input while parsing near错误解决办法

    此种解决方案

    解决办法:
    (1)npm install --registry=https://registry.npm.taobao.org --loglevel=silly
    (2) npm cache clean --force
    (3) npm install
    

    (1)安装会有很多的npm日志
    如下图:
    在这里插入图片描述
    不用管它,直至执行结束,或者长时间停留在一处,则进行终止即可,实际缺少了某种东西,小编也不甚清楚。。。

    错误解决

    在这里插入图片描述
    大功告成!

    运行结果:

    运行项目

    npm run dev
    

    在这里插入图片描述
    在这里插入图片描述

    供参考!

    展开全文
  • 中文版本的vue-element-admin :https://github.com/PanJiaChen/vue-element-admin/tree/i18n
    展开全文
  • vue-element-admin(基础篇)

    万次阅读 2019-09-11 14:55:22
    关注手摸手,带你用vue撸后台 系列一(基础篇)完整项目地址:vue-element-admin 系列文章: 手摸手,带你用 vue 撸后台 系列一(基础篇) 手摸手,带你用 vue 撸后台 系列二(登录权限篇) 手摸手,带你用 vue 撸...
    关注

    手摸手,带你用vue撸后台 系列一(基础篇)

    完整项目地址:vue-element-admin

    系列文章:

    前言

    说好的教程终于来了,第一篇文章主要来说一说在开始写实际业务代码之前的一些准备工作吧,但这里不会教你 webpack 的基础配置,热更新原理是什么,webpack速度优化等等,有需求的请自行 google,相关文章已经很多了。

    目录结构

    ├── build                      // 构建相关  
    ├── config                     // 配置相关
    ├── src                        // 源代码
    │   ├── api                    // 所有请求
    │   ├── assets                 // 主题 字体等静态资源
    │   ├── components             // 全局公用组件
    │   ├── directive              // 全局指令
    │   ├── filtres                // 全局 filter
    │   ├── icons                  // 项目所有 svg icons
    │   ├── lang                   // 国际化 language
    │   ├── mock                   // 项目mock 模拟数据
    │   ├── router                 // 路由
    │   ├── store                  // 全局 store管理
    │   ├── styles                 // 全局样式
    │   ├── utils                  // 全局公用方法
    │   ├── vendor                 // 公用vendor
    │   ├── views                   // view
    │   ├── App.vue                // 入口页面
    │   ├── main.js                // 入口 加载组件 初始化等
    │   └── permission.js          // 权限管理
    ├── static                     // 第三方不打包资源
    │   └── Tinymce                // 富文本
    ├── .babelrc                   // babel-loader 配置
    ├── eslintrc.js                // eslint 配置项
    ├── .gitignore                 // git 忽略项
    ├── favicon.ico                // favicon图标
    ├── index.html                 // html模板
    └── package.json               // package.json
    复制代码

    这里来简单讲一下src文件

    api 和 views

    简单截取一下公司后台项目,现在后台大概有四五十个 api 模块

    如图可见模块有很多,而且随着业务的迭代,模块还会会越来越多。 所以这里建议根据业务模块来划分 views,并且 将views 和 api 两个模块一一对应,从而方便维护。如下图:

    如 article 模块下放的都是文章相关的 api,这样不管项目怎么累加,api和views的维护还是清晰的,当然也有一些全区公用的api模块,如七牛upload,remoteSearch等等,这些单独放置就行。

    components

    这里的 components 放置的都是全局公用的一些组件,如上传组件,富文本等等。一些页面级的组件建议还是放在各自views文件下,方便管理。如图:

    store

    这里我个人建议不要为了用 vuex 而用 vuex。就拿我司的后台项目来说,它虽然比较庞大,几十个业务模块,几十种权限,但业务之间的耦合度是很低的,文章模块和评论模块几乎是俩个独立的东西,所以根本没有必要使用 vuex 来存储data,每个页面里存放自己的 data 就行。当然有些数据还是需要用 vuex 来统一管理的,如登录token,用户信息,或者是一些全局个人偏好设置等,还是用vuex管理更加的方便,具体当然还是要结合自己的业务场景的。总之还是那句话,不要为了用vuex而用vuex!


    webpack

    这里是用 vue-cliwebpack-template 为基础模板构建的,如果你对这个有什么疑惑请自行google,相关的配置绍其它的文章已经介详细了,这里就不再展开了。简单说一些需要注意到地方。

    jquery (本项目已移除)

    管理后台不同于前台项目,会经常用到一些第三方插件,但有些插件是不得不依赖 jquery 的,如市面很多富文本基都是依赖 jquery 的,所以干脆就直接引入到项目中省事(gzip之后只有34kb,而且常年from cache,不要考虑那些吹毛求疵的大小问题,这几kb和提高的开发效率根本不能比)。但是如果第三方库的代码中出现.xxx或jQuery.xxx或window.jQuery或window.则会直接报错。要达到类似的效果,则需要使用 webpack 内置的 ProvidePlugin 插件,配置很简单,只需要

    new webpack.ProvidePlugin({
      $: 'jquery' ,
      'jQuery': 'jquery'
    })
    复制代码

    这样当 webpack 碰到 require 的第三方库中出现全局的$、jQeury和window.jQuery 时,就会使用 node_module 下 jquery 包 export 出来的东西了。

    alias

    当项目逐渐变大之后,文件与文件直接的引用关系会很复杂,这时候就需要使用alias 了。 有的人喜欢alias 指向src目录下,再使用相对路径找文件

    resolve: {
      alias: {
        '~': resolve(__dirname, 'src')
      }
    }
    

    //使用
    import stickTop from ‘~/components/stickTop’
    复制代码

    或者也可以

    alias: {
      'src': path.resolve(__dirname, '../src'),
      'components': path.resolve(__dirname, '../src/components'),
      'api': path.resolve(__dirname, '../src/api'),
      'utils': path.resolve(__dirname, '../src/utils'),
      'store': path.resolve(__dirname, '../src/store'),
      'router': path.resolve(__dirname, '../src/router')
    }
    
    //使用
    import stickTop from 'components/stickTop'
    import getArticle from 'api/article'
    复制代码

    没有好与坏对与错,纯看个人喜好和团队规范。


    ESLint

    不管是多人合作还是个人项目,代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。这所谓工欲善其事,必先利其器,个人推荐 eslint+vscode 来写 vue,绝对有种飞一般的感觉。效果如图:

    eslintGif.gif
    每次保存,vscode就能标红不符合eslint规则的地方,同时还会做一些简单的自我修正。安装步骤如下:

    首先安装eslint插件

    eslint1.png

    安装并配置完成 ESLint 后,我们继续回到 VSCode 进行扩展设置,依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置

    
        "files.autoSave":"off",
        "eslint.validate": [
           "javascript",
           "javascriptreact",
           "html",
           { "language""vue""autoFix"true }
         ],
         "eslint.options": {
            "plugins": ["html"]
         }
    

    复制代码

    这样每次保存的时候就可以根据根目录下.eslintrc.js你配置的eslint规则来检查和做一些简单的fix。这里提供了一份我平时的eslint规则地址,都简单写上了注释。每个人和团队都有自己的代码规范,统一就好了,去打造一份属于自己的eslint 规则上传到npm吧,如饿了么团队的 config,vue的 config

    vscode 插件和配置推荐


    封装 axios

    我们经常遇到一些线上 的bug,但测试环境很难模拟。其实可以通过简单的配置就可以在本地调试线上环境。 这里结合业务封装了axios ,线上代码

    import axios from 'axios'
    import { Message } from 'element-ui'
    import store from '@/store'
    import { getToken } from '@/utils/auth'
    
    // 创建axios实例
    const service = axios.create({
      baseURL: process.env.BASE_API, // api的base_url
      timeout: 5000 // 请求超时时间
    })
    
    // request拦截器
    service.interceptors.request.use(config => {
      // Do something before request is sent
      if (store.getters.token) {
        config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
      }
      return config
    }, error => {
      // Do something with request error
      console.log(error) // for debug
      Promise.reject(error)
    })
    
    // respone拦截器
    service.interceptors.response.use(
      response => response,
      /**
      * 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
      * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
      */
      //  const res = response.data;
      //     if (res.code !== 20000) {
      //       Message({
      //         message: res.message,
      //         type: 'error',
      //         duration: 5 * 1000
      //       });
      //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
      //         MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
      //           confirmButtonText: '重新登录',
      //           cancelButtonText: '取消',
      //           type: 'warning'
      //         }).then(() => {
      //           store.dispatch('FedLogOut').then(() => {
      //             location.reload();// 为了重新实例化vue-router对象 避免bug
      //           });
      //         })
      //       }
      //       return Promise.reject('error');
      //     } else {
      //       return response.data;
      //     }
      error => {
        console.log('err' + error)// for debug
        Message({
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      })
    
    export default service
    
    import request from '@/utils/request'
    
    //使用
    export function getInfo(params) {
      return request({
        url: '/user/info',
        method: 'get',
        params
      });
    }
    

    比如后台项目,每一个请求都是要带 token 来验证权限的,这样封装以下的话我们就不用每个请求都手动来塞 token,或者来做一些统一的异常处理,一劳永逸。 而且因为我们的 api 是根据 env 环境变量动态切换的,如果以后线上出现了bug,我们只需配置一下 @/config/dev.env.js 再重启一下服务,就能在本地模拟线上的环境了。

    module.exports = {
        NODE_ENV: '"development"',
        BASE_API: '"https://api-dev"', //修改为'"https://api-prod"'就行了
        APP_ORIGIN: '"https://wallstreetcn.com"' //为公司打个广告 pc站为vue+ssr
    }
    

    妈妈再也不用担心我调试线上bug了。
    当然这里只是简单举了个例子,axios还可以执行多个并发请求,拦截器什么的,大家自行去研究吧。


    多环境

    vue-cli 默认只提供了devprod两种环境。但其实正真的开发流程可能还会多一个sit或者stage环境,就是所谓的测试环境和预发布环境。所以我们就要简单的修改一下代码。其实很简单就是设置不同的环境变量

    "build:prod": "NODE_ENV=production node build/build.js",
    "build:sit": "NODE_ENV=sit node build/build.js",
    复制代码

    之后在代码里自行判断,想干就干啥

    var env = process.env.NODE_ENV === 'production' ? config.build.prodEnv : config.build.sitEnv
    复制代码

    新版的 vue-cli 也内置了 webpack-bundle-analyzer 一个模块分析的东西,相当的好用。使用方法也很简单,和之前一样封装一个 npm script 就可以。

    //package.json
     "build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true  npm_config_report=true node build/build.js"
    
    //之后通过process.env.npm_config_report来判断是否来启用webpack-bundle-analyzer
    
    var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    

    效果图

    analyzer.png
    webpack-bundle-analyzer这个插件还是很有用的,对后期的代码优化什么的,最重要的是它够装逼~


    前后端交互

    每个公司都有自己一套的开发流程,没有绝对的好与坏。这里我来讲讲我司的前后端交互流程。

    跨域问题

    首先前后端交互不可避免的就会遇到跨域问题,我司现在全是用 cors来解决的,如果你司后端嫌麻烦不肯配置的话,dev环境也可以通过 webpack-dev-serverproxy来解决,开发环境用nginx反代理一下就好了,具体配置这里就不展开了。

    前后端的交互问题

    其实大家也知道,平时的开发中交流成本占据了我们很大一部分时间,但前后端如果有一个好的协作方式的话能解决很多时间。我司开发流程都是前后端和产品一起开会讨论项目,之后后端根据需求,首先定义数据格式和api,然后 mock api 生成好文档,我们前端才是对接接口的。这里推荐一个文档生成器 swaggerswagger是一个REST APIs文档生成工具,可以在许多不同的平台上从代码注释中自动生成,开源,支持大部分语言,社区好,总之就是一个强大,如下图的api 文档(swagger自动生成,ui忽略)

    api 地址,需要传是没参数,需要的传参类型,返回的数据格式什么都一清二楚了。

    前端自行mock

    如果后端不肯来帮你 mock 数据的话,前端自己来 mock 也是很简单的。你可以使用mock server 或者使用 mockjs + rap 也是很方便的。 不久前出的 easy-mock也相当的不错,还能结合 swagger。 我们大前端终于不用再看后端的脸色了~

    iconfont

    element-ui 默认的icon不是很多,这里要安利一波阿里的iconfont简直是神器,不管是公司项目还是个人项目都在使用。它提供了png,ai,svg三种格式,同时使用也支持unicode,font-class,symbol三种方式。由于是管理后台对兼容性要求不高,楼主平时都喜欢用symbol,晒一波我司后台的图标(都是楼主自己发挥的)。

    iconfont.png
    详细具体的使用可以见文章 手摸手,带你优雅的使用 icon


    router-view

    different router the same component vue。真实的业务场景中,这种情况很多。比如

    router-view.png
    我创建和编辑的页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子,官方说你可以通过watch $route的变化来做处理,但其实说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view上加上一个唯一的key,来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。

    <router-view :key="key"></router-view>
    
    computed: {
        key() {
            return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
        }
     }
    

    优化

    有些人会觉得现在构建是不是有点慢,我司现在技术栈是容器服务,后台项目会把dist文件夹里的东西都会打包成一个docker镜像,基本步骤为

    npm install
    npm run build:prod
    加打包镜像,一共是耗时如下
    复制代码

    Paste_Image.png

    还是属于能接受时间的范围。 主站PC站基于nodejs、Vue实现服务端渲染,所以不仅需要依赖nodejs,而且需要利用pm2进行nodejs生命周期的管理。为了加速线上镜像构建的速度,我们利用taobao源 registry.npm.taobao.org 进行加速, 并且将一些常见的npm依赖打入了基础镜像,避免每次都需要重新下载。 这里注意下 建议不要使用cnpm install或者update 它的包都是一个link,反正会有各种诡异的bug,这里建议这样使用

    npm install --registry=https://registry.npm.taobao.org
    复制代码

    如果你觉得慢还是有可优化的空间如使用webpack dll 或者把那些第三方vendor单独打包 external出去,或者我司现在用的是http2 可以使用AggressiveSplittingPlugin等等,这里有需求的可以自行优化。


    占坑

    常规占坑,这里是手摸手,带你用vue撸后台系列。 完整项目地址:vue-element-admin

    展开全文
  • 本课程是基于vue-element-admin实现的后台权限验证系统,解决在前后端分离场景下如何实现前端与后端的动态权限,同时还会讲解基于laravel7.x的restful api接口的开发以及如何在脚手架中进行封装调用 对于前后...
  • vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助...
  • vue-element-admin配置讲解

    千次阅读 2020-03-17 14:53:24
    1. 项目初始化 git clone ...cd vue-element-admin npm install npm run dev 2. 项目精简 删除scr/views下的源码, 保留: dashboard:首页 error-page:异常页面 login:登录 redirect:重定向 ...
  • 一、安装vue-element-admin 官方文档: https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%AE%89%E8%A3%85 1、流程 因为官方建议使用 简化版的vue-admin-template进行开发,所以需要克隆再克隆一...
  • 论述vue-element-admin搭配element-UI的使用介绍地址拉取地址搭配element-UI使用更简便 介绍地址 项目运行地址 项目地址 vue-element-admin文档 本人基于vue-element-admin的二次开发 拉取地址 #git拉取vue-...
  • vue-element-admin 详细介绍 vue-element-admin 本项目的定位是后台集成方案,不适合当基础模板来开发,模板建议使用 vueAdmin-template , 桌面端 electron-vue-admin 注意:该项目目前使用 element-ui@...
  • 说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些 但没办法,接下来做微服务架构,前端就用 vue,...v4.0.0 版本的调整后讲解:Vue 新手学习笔记:vue-element-admin 之 入门开发教程(...
  • Vue - element-ui 中预览 word 、exce、ppt以及pdf文件

    万次阅读 多人点赞 2019-08-17 16:21:01
    最近写了个有 预览word 、Exce、ppt以及pdf文件 的后台 管理 在网上也找了 很多 就感觉很复杂 ,当然最后还是实现了 , 本博主一项喜欢简单 越简单越好 越好理解 废话不多说 先上效果图 (我就喜欢那种有图的代码 能...
  • vue-element-admin教程

    2019-12-11 16:22:39
    vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助...
  • # 下载了vue-element-admin,在本地npm insatall后npm run dev后报错。删除node_modules后重置也不行 C:\Users\Le'novo\Desktop\project\vue-element-admin>npm run dev > vue-element-admin@4.4.0 dev C:\...
  • vue-element-admin 设置语言

    千次阅读 2020-06-10 15:20:27
    中文版本的vue-element-admin :https://github.com/PanJiaChen/vue-element-admin/tree/i18n
  • 克隆vue-element-admin克隆vue-element-admin报错解决办法 克隆vue-element-admin报错 vue-element-admin官方是使用下面的命令进行克隆的 git clone https://github.com/PanJiaChen/vue-element-admin.git 但是...
  • vue-element-admin国际化

    2020-05-24 16:09:18
    vue-elemet-admin国际化官方代码地址vue-element-admin国际化master不支持国际化解决办法 官方代码地址 https://github.com/PanJiaChen/vue-element-admin/tree/i18n vue-element-admin国际化 master不支持国际化 ...
  • vue-element-admin登录流程

    万次阅读 多人点赞 2019-09-24 21:51:55
    1.安装最新的vue-element-admin; 2.如有需要可以去掉eslint;在下面这个文件里面全局搜索 3.删除所有的eslint文件 4.开始安装依赖包, npm install 5.启动服务:npm run dev ,但是打开的是两个窗口,需要把open...
  • 一、vue-element-admin-master 1、简介 vue-element-admin是基于element-ui 的一套后台管理系统集成方案。 GitHub地址:https://github.com/PanJiaChen/vue-element-admin 项目在线预览:...
  • 前言 之前写项目时候一直用的是 amazeui ,由于 vue 是不...就在当时我以为前途一片黑暗时,我看到了 vue-element-admin 作者链接地址 : https://github.com/PanJiaChen/vue-element-admin https://github.co...
  • 1.vue-element-ui简介 vue-element-ui集成了vue和element-ui框架。 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了...
  • vue-element-admin后台管理系统一、vue-element-admin二、vue-admin-template 一、vue-element-admin 1、简介 vue-element-admin是基于element-ui 的一套后台管理系统集成方案。 功能:...
  • # 克隆项目 git clone ...cd Vue-element-admin # 安装依赖 npm install # 建议不要直接使用 cnpm 安装以来,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --regi...
  • 使用vue-element-admin框架调用后端接口及跨域问题

    万次阅读 热门讨论 2019-05-24 16:30:54
    vue-element-admin 官方git地址 https://github.com/PanJiaChen/vue-element-admin 进行开发需要调用外部接口, 而且还涉及到跨域的问题, 百度出来的全部都是说在config目录加proxyTable…emmm是拉同一个项目吗大兄弟...
  • vue-element-admin启动报错

    千次阅读 2019-03-06 09:44:02
    vue-element-admin install 报错 删除下面这个文件,再重新install就可以了,具体原因没仔细研究。。。。 vue-element-admin启动报错 [vue-loader] vue-template-compiler must be installed as a peer ...
  • vue-element-admin的中文问题

    千次阅读 2020-03-11 13:13:33
    2020/3/11 记录一下使用vue-element-admin的中文的问题 刚刚在github上面clone了vue-element-admin启动后发现是英文的 解决: 一、在github clone项目时没有切换到i18n分支下载的 可以把下载的vue-element-admin...
  • 怎么修改vue-element-admin的配置,从而与自己的服务器后台数据相连 ``` ```
  • vue-element-admin 动态路由添加
  • vue-element-admin

    2019-04-23 11:28:19
    基于vue element-UI 的一套后台模板 UI框架 element-UI ... 已经集成的功能 登录token验证 菜单权限控制 按钮权限控制 顶部菜单-侧边导航联动...项目地址 https://gitee.com/wfHuang/vue-element-amdin 系统满足快速...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,826
精华内容 10,330
关键字:

vue-element

vue 订阅