vscode在保存代码时自动用eslint做格式化

拓展：vscode在保存代码时自动用eslint做格式化

步骤：

1. 打开设置
2. 工作区设置
3. 

 

 

 

拓展：如何在一个全新的项目中使用mock

四个步骤：

第一步：拷贝/mock

 

其中的news.js,table.js根据情况来定

第二步：在vue.config.js中配置devServe

'use strict'

module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  devServer: {
    port: 8001,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js') // 重点
  }
}

第三步：设置环境变量

不是必须的。

文件中，特别设置VUE_APP_BASE_API这一项，它在mock文件中使用到了，如果不设置，则它的值就是undefined

{

第四步：发请求

const url = "/api/news/list"  
// /api： VUE_APP_BASE_API的值
// news/list: mock文件下，news.js中定义的接口地址

axios({url}).then(res => {console.log(res)})

拓展-可选准备后端服务器

IHRM-人力资源管理系统

整体说明

按视频教程安装mongodb

后端服务-Nodejs

1. 解压下发的服务器文件夹
2. 进入people文件夹，启动项目
   第一次启动，要用 npm run start  (它会重置数据库)
   后续运行npm run serve

注意：检查是否需要npm i 来重新安装依赖

小结

拓展-学习svg-icon的工作原理并在新项目中使用

目标

理解svg-icon组件的工作原理； 并把它用到新项目中。

要点

• svg-icon是一个全局组件，在src/icons/index.js中定义并注册成立全局组件
• 在main.js中引入
• 它额外需要svg-sprite-loader@4.1.3的配合，及对应的vue.config.js中的配置
• 它的使用格式<svg-icon icon-class="文件名"/> 。这里的文件名就是在src/icons/svg下的文件名

如何在新项目使用svg-icon组件 步骤

1.安装依赖npm i svg-sprite-loader@4.1.3

2.配置 vue.config.js

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

补充一个配置{ }

{
  // 省略其他...
  chainWebpack (config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

3.复制/创建文件

(1)  src/icons

src/icons
-       /svg       # 保存图标
-       /index.js  # 注册全局组件

(2) 组件

componets/SvgIcon/index.vue

（3）validate.js

utils/validate.js

1. 在main.js中引入

import '@/icons'

5.使用

使用格式<svg-icon icon-class="文件名"/> 。这里的文件名就是在src/icons/svg下的文件名

设置高亮当前菜单项

目标

当左侧的某一菜单处于选中状态时，对它高亮显示

分析

当某个菜单处于选中状态时，el-menu自动会有一个特殊的类.is-active，所以我们补充一个css类就可以了。

操作

在 src\styles\sidebar.scss文件中， 在el-menu下添加一个is-active类，样式如下

.el-menu {
  // 省略其他
  .is-active {
    background-color: $menuText !important;
    span{
      color: $menuActiveText !important;
    }
    .svg-icon{
      color: $menuActiveText !important;
    }
  }
}