WEB 前端框架-Vue

• vue2.6.10+element2.12.0+webpack4.40.2+vue-cli4.5.7
• version: 2.0.0
• update: 2020-10-20

准备工作

• nodejs 环境 + npm 包管理器
• cnpm npm 的淘宝镜像
• 开发工具 VSCODE

vscode编辑器

安装EditorConfig for VS Code、Prettier - Code formatter、ESLint插件

eslint.workingDirectories字段是指定要配置具体哪个项目要参与自动化格式，如果有新增项目，记得在这个新增一下。

# 复制以下内容在终端(base)执行，自动创建，输入后回车
mkdir .vscode && cat -e >.vscode/settings.json<<END
{
  "eslint.workingDirectories": ["./"],
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "search.useIgnoreFiles": false,
  "search.exclude": {
    "**/dist": true,
    "**/node_modules": true
  },
  "vetur.validation.script": false
}
END

ESLint 配置

安装 eslint 插件

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

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

自动修复 进行检测

npm run lint -- --fix

开发运行

    # 安装依赖
    npm install

    # 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
    npm install --registry=https://registry.npm.taobao.org

    # 1 - 由于 node-sass 不兼容高版本的 node环境 可能会出现npm warn node-sass
    npm i [email protected] --ignore-script

    # 2 - 找到node_modules > node-sass 建立 vendor 文件夹 然后重新执行rebuild
    npm rebuild node-sass

    # 本地开发 开启服务
    npm run dev

    # 本地开发 开启服务 连接测试环境
    npm run test

    # 打包分析
    npm run analyz

浏览器访问 http://localhost:9080

发布

    # 构建生成环境
    npm run build

    # 打包并部署到服务器，前提是要先配置deploy/config.js的服务器相关信息
    npm run deploy

部署 nginx 配置参考

  location / {
        # 指向我们打包后上传的前端文件
        root /opt/nginx/dist;
        index index.html;
    }
    # 转发请求到后端服务网关
    location /api/ {
        proxy_pass http://192.168.2.45:8762/;
     }

目录结构

├── config                     // 配置相关
├── deploy                     // 部署工具
│ └── index.js                 // 部署工具主要文件
│ └── config.js                // 部署工具配置文件
│ └── spinner_style.js         // 部署工具命令行样式文件
├── public                     // 静态资源
│ └── favicon.ico              // 网站图标文件
├── src                        // 源代码
│ ├── api                      // 所有请求
│ ├── assets                   // 主题 字体 图片等静态资源
│ ├── components               // 全局公用组件
│ ├── router                   // 路由
│ ├── plugins                  // UI插件配置
│ ├── mixins                   // mixins
│ ├── store                    // 全局store管理 状态管理模式
│ ├── utils                    // 全局公用方法
│ ├── view                     // view页面
│ │ ├── base                   // 全局基础框架页面
│ │ ├── page                   // 具体业务模块页面
│ ├── App.vue                  // 入口页面
│ └── main.js                  // 入口加载组件 初始化等
├── .babel.config              // babel-loader 配置
├── .eslintrc.js               // eslint 配置项
├── .gitignore                 // git 忽略项
├── .env                       // 环境变量配置
└── package.json               // package.json

#常用方法

  // 在vue里调用

  /**
   * 全局查看图片使用方法
   * @param {Array} imgs - 图片数组[url, ...]
   * @param {Number} index - 设置默认显示图片下标
   */
  this.$setViewer(imgs, index)

  // 调用接口 base.js @utils/index.js
  const [err, res] = await this.$to(
    api,
    loading的上下文(context),
    key,默认loading(context[key])
  )

  // 调用时间 base.js utils/index.js
  this.$dayjs()

  // 调用枚举(下拉框之类会用到) base.js
  this.$d[xxxx] 或者 this.$d.xxx

支持语法

1. 支持ES11相关语法（matchAll,Promise.allSettled,BigInt,GlobalThis,Nullish coalescing Operator,Optional Chaining）
   • 其中Nullish coalescing Operator和Optional Chaining不能在模板(template)语法中生效，只能在script中生效。
   • Nullish coalescing Operator：a ?? 2
   • Optional Chaining：a?.x
2. 装饰器语法，需要关闭 vscode 的 vetur 的验证，并交给和开启 eslint 验证。

在 .vscode/settings.json 中添加一行
关闭 vetur 对script 的校验  我选择将验证交给 eslint 处理
"vetur.validation.script": false,

function log() {
  /**
  * @param target 对应 methods 这个对象
  * @param name 对应属性方法的名称
  * @param descriptor 对应属性方法的修饰符
  */
  return function (target, name, descriptor) {
    console.log(target, name, descriptor)
    const fn = descriptor.value
    descriptor.value = function (...rest) {
      console.log(this)
      console.log(`这是调用方法【${name}】前打印的日志`)
      fn.call(this, ...rest)
      console.log(`这是调用方法【${name}】后打印的日志`)
    }
  }
}

// home.vue
export default {
  ...,
  methods: {
    @log()
    test() {
      console.log('获取数据')
    }
  }
}