【冬之乐园】

更新于 2019-10-13

每次在终端运行 vue-cli-service 时，都会先找到对应的 vue.config.js，获取到相关配置，才继续执行其它操作

module.exports = {
  // 部署应用包时的基本 URL
  publicPath: process.env.NODE_ENV === 'production'
    ? '//your_url'
    : '/',
    
  // 运行 vue-cli-service build 时生成的生产环境构建文件的目录
  // 默认构建前清除文件夹(构建时传入 --no-clean 可关闭该行为
  outputDir: 'dist',

  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: 'static',

  // 指定生成的 index.html 的输出路径 (相对于 outputDir),也可以是一个绝对路径
  indexPath: 'index.html',

  // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
  filenameHashing: true,

  // 当在 multi-page 模式下构建时，webpack 配置会包含不一样的插件
  // (这时会存在多个 html-webpack-plugin 和 preload-webpack-plugin 的实例)。
  // 如果你试图修改这些插件的选项，请确认运行 vue inspect
  pages: {
    index: {
      // page 的入口
      entry: 'src/pages/index/index.js',
      // 模板来源
      template: 'src/pages/index/index.html',
      // 在 dist 的输出为 index.html
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '首页',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    
    // 多入口时，接着写子页面
    //subpage: 'src/subpage/main.js'
  },
  
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,

  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,

  // 默认情况下 babel-loader 忽略其中的所有文件 node_modules，
  // 想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  transpileDependencies: [],

  // 生产环境 sourceMap
  productionSourceMap: false,
  
  // 跨域设置 
  // 可取值参考： https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes
  crossorigin: undefined,
  
  // 构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性, 默认false
  integrity: false,
  
  // webpack 配置，键值对象时会合并配置，为方法时会改写配置
  // https://cli.vuejs.org/guide/webpack.html#simple-configuration
  configureWebpack: {
      plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  //configureWebpack: (config) => {},

  // webpack 链接 API，用于生成和修改 webapck 配置
  // https://github.com/mozilla-neutrino/webpack-chain
  chainWebpack: (config) => {
    // 因为是多页面，所以取消 chunks，每个页面只对应一个单独的 JS / CSS
    config.optimization
      .splitChunks({
        cacheGroups: {}
      });

    // 'src/lib' 目录下为外部库文件，不参与 eslint 检测
    config.module
      .rule('eslint')
      .exclude
      .add('/Users/maybexia/Downloads/FE/community_built-in/src/lib')
      .end()
  },

  // 配置高于chainWebpack中关于 css loader 的配置
  css: {
    // false 时只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块
    // true 时可以去掉文件名中的 .module， 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块
    modules: false,
    
     // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用 <style> 方式内联至 html 文件中
    // 生产环境下是 true，开发环境下是 false  
    extract: true,

    // 是否构建样式地图，设置为 true 之后可能会影响构建的性能
    sourceMap: false,

    // css预设器配置项
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },

      postcss: {
        // 这里的选项会传递给 postcss-loader
      }
    }
  },

  // 所有 webpack-dev-server 的选项都支持
  // https://webpack.js.org/configuration/dev-server/
  devServer: {
    open: true,

    host: '127.0.0.1',

    port: 3000,

    https: false,

    hotOnly: false,

    // 将任何未知请求 (没有匹配到静态文件的请求) 代理到该字段指向的地方 
    proxy: null,

    before: app => {
    }
  },
  // 构建时开启多进程处理 babel 编译
  // 是否为 Babel 或 TypeScript 使用 thread-loader
  parallel: require('os').cpus().length > 1,

  // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},

  // 第三方插件配置
  pluginOptions: {}
};

拓展：

如何配置 vue-cli 3.0 的 vue.config.js

阅读全文

vue-cli 3学习之vue-cli-service插件开发（注册自定义命令）

更新于 2019-11-14

构建vue-cli3

vue-cli 3 | vue-cli-service | plugin

前言

提到 vue-cli，官方文档对其的介绍如下：

A simple CLI for scaffolding Vue.js projects. 一个简单的Vue.js工程命令行脚手架工具。

说白了，vue-cli 其实就是一个基于webpack构建，可以让用户快速初始化一个项目的工具。

基本原理: vue-cli并非从无到有地凭空生成一个项目，而是通过下载/拉取(通过download-git-repo工具)已有的工程到本地，完成生成项目的工作。

注意安装vue-cli 3前，如若已安装旧版本vue-cli，需先卸载旧版本vue-cli，再重新安装vue-cli 3

node版本要求: 安装 Node.js8.9 或更高版本

这次我分享的主要主要内容是 vue-cli 3,当然不是全面的介绍，只是将我这次运营系统工作流改造中遇到比较深刻的点进行一番简单介绍

而对于根据我个人对vue-cli 3的认识，我将需掌握的内容概括为四个部分:Vue.config.js、Vue-cli-service、插件、UI。

概括：

下面这张图是我对vue-cli 3 知识点进行了一个简单的概括

比较常接触到vue一些基本的命令，比如说：

vue create: 快速初始化一个项目
vue serve：为某个原型（如：单独一个vue文件）快速启动一个服务（要求全局安装@vue/cli-service-global）
vue ui: 通过图形化界面创建或管理界面

接下来谈一谈 `Vue.config.js`

我觉得对于一个普通的项目的工作流构建来说，配置vue.config.js足够了

而里面比较特别和常用的主要是以下这些：除了 publicPath、 outputDir、 filenameHashing、 pages 等这些常用字段外，我觉得还需要提一下的是 configureWebpack 字段和 chainWebpack 字段

我对这两个字段的理解是

configureWebpack 是让用户字段写一个配置对象，其内部再通过webpack-merge将原有对象和用户配置的对象进行合并
chainWebpack 是通过利用webpack-chain提供的链式调用方法去直接修改原有的配置对象

对于 vue-cli 3来说，它还存在一个比较特别的模块，就是它提供了自定义插件的功能

插件

说到vue-cli 3 的插件，其实可以将其分为两种情况：

一种是vue-cli插件,这种情况一般是对外的，主要是开发一些npm包，并将其发布到npm上；
另一种就是service 插件, 也就是我这次工作流改造中用到的主要内容，其主要包括內建命令和配置模块，而这两部分的内容都是在调用vue-cli-service命令时才会触发;因此，使用到service插件的用户，需要安装一下vue-cli-service。

Cli插件（Generator和Prompts）：为@vue/cli项目添加额外特性的 npm 包
service插件（內建命令和配置模块）：会在一个Service实例被创建时自动加载——比如每次vue-cli-service命令在项目中被调用时。

Vue-cli-service

內建命令

该功能的实现主要是调用了api.registerCommand这个方法向vue-cli-service内部注入额外的命令，vue-cli 3提供的vue-cli-service serve和vue-cli-service build等命令的实现也是利用了这个方法。

配置模块

该功能的实现则是利用的api.chainWebpack和api.configureWebpack方法对webpack配置进行修改。

注：稍后我会在文章的下面给出一个自定义命令的 demo

1 2	// 可以通过下面这个命令查看所有命令，从而确认自定义的命令是否创建成功 npx vue-cli-service help

然后接下来看一看具体实操例子

需求场景

支持watch和build命令，并满足以下功能
同时支持--key命令读取.json文件中的key来进行构建，并支持多个key
同时支持.json配置文件，可以指定entry路径和output路径

需求示例：

# watch 监听某个入口的文件变动并编译
$ node ./scripts/Bundler.js watch --key=[your_key]

# build 打包编译某个入口的文件(生产模式)
$ node ./scripts/Bundler.js build --key=[your_key]

这对第三点，假设项目根目录下有 Views.json 文件，形如：

{
  "basePath": "resources/assets/js/views",
  "destBasePath": "public/js/res",
  "entry": {
    "page": { // 入口的唯一命名，打包和开发时要用到的 key 值
      "name": "page", // 入口文件的文件名(例如 queryDetail.js)
      "srcPath": "job/template/page", // JS 入口源文件所在的文件夹的根目录
      "output": "page" // 输出文件的名称
      "description": "页面功能描述", // 页面功能描述，不启任何作用
    }
  }
}

然而我为什么没有直接使用vue-cli-service提供的serve和build命令呢？

原因如下：
对于watch和build命令，其实他们除了要求具备vue-cli-service提供的serve和build命令效果外，还得让用户通过--key传入打包入口，而vue-cli-service提供的这些命令是其内部写好了的，我们无法对其内部进行修改，所以为了实现这个需求，我们需要进行自定义命令。

解决方式：

要实现 watch 和 build 功能，其实在 vue-cli 3 中 vue-cli-service 有提供了相对应的 api 给用户进行调用，也就是注册自定义的命令，实际上就是向 vue-cli-service 注入额外的命令。

注册命令的第一种方式 —- 使用 vue-cli-service 插件

以注册watch命令为例，做一个小demo：

demo github 地址

新建一个项目

// 首先进行 vue-cli 安装
npm i -g @vue/cli
// 查看是否安装成功，看到版本号就是安装成功了
vue -V
// 新建一个项目
vue create 项目名

针对已有项目使用 vue-cli-service

安装vue-cli-service：

1 2	// 进行 vue-cli-service 安装 npm i -D @vue/cli-service

在package.json中的vuePlugins对象中的service字段引入相应的js文件（用于注册watch 命令的文件, 假设该文件名为：vue-cli-plugin-watch.js，并放在根目录）

// package.json 中
// 注册命令的 js 文件名为 vue-cli-plugin-watch.js
{
  "scripts": {
   "watch": "vue-cli-service watch"
  },
  "vuePlugins": {
     "service": [
       "./vue-cli-plugin-watch"
     ]
  }
}

vue-cli-plugin-watch.js 代码如下

module.exports = (api, projectOptions) => {
  api.registerCommand('watch', {
  	description: 'watch plugin for vue cli 3',
  	usage: 'vue-cli-service watch',
  	options: {

    }
  }, (args) => {
    console.log('watch 命令注册成功')
  })
}

在终端输入npm run watch，看到终端输出“watch命令注册成功”后，恭喜watch命令基本注册完成啦。

可以通过运行npx vue-cli-service help查看vue-cli-service下面的所有命令，可以看到新增加了一个watch命令

补充：另外，对于一个插件的使用，我们可以选择性的让用户进行一些设置；通过让用户在vue.config.js中的pluginOptions向插件进行传参数

在项目根目录创建vue.config.js文件

// vue.config.js相关代码
module.exports = {
  pluginOptions: {
    watch: {
      // vue-cli-plugin-watch 插件可以作为 `projectOptions.pluginOptions.watch` 访问这些选项，其他插件也可以拿到
      param: '传参数给內建插件'
    }
  }
}

修改vue-cli-plugin-watch.js 代码如下

module.exports = (api, projectOptions) => {
  api.registerCommand('watch', {
  	description: 'watch plugin for vue cli 3',
  	usage: 'vue-cli-service watch',
  	options: {}
  }, (args) => {
    // 输出传入的参数
    console.log('watch 命令注册成功')
    // projectOptions 拿到的是 vue.config.js 文件暴露出来的配置
    console.log(projectOptions.pluginOptions.watch.param)
    // 通过终端传进来的参数
    const key = args.key ? args.key : process.env.npm_config_key
    console.log(`--key = ${key}`)
  })
}

运行npm run watch命令，可见终端输出了‘传参数给內建插件’，即通过vue-config.js传参成功
运行npm run watch命令，可见终端输出了‘传参数给內建插件’，即传参成功

其实再去看看build命令的实现源码，其实和上面watch的实现是差不多的

Vue-cli-service build 命令源码

注册命令后，就可以通过调用 api.resolveWebpackConfig() 取回解析好的 webpack 配置。每次调用都会新生成一个 webpack 配置用来在需要时进一步修改。

module.exports = api => {
  api.registerCommand('my-build', args => {
    const configA = api.resolveWebpackConfig()
    const configB = api.resolveWebpackConfig()

    // 针对不同的目的修改 `configA` 和 `configB`...
  })
}

也可以通过调用 api.resolveChainableWebpackConfig() 获得一个新生成的链式配置

api.registerCommand('my-build', args => {
  const configA = api.resolveChainableWebpackConfig()
  const configB = api.resolveChainableWebpackConfig()

  // 针对不同的目的链式修改 `configA` 和 `configB`...

  const finalConfigA = configA.toConfig()
  const finalConfigB = configB.toConfig()
})

再看回operation的项目需求，要求实现watch和build,watch实现还好说，但是考虑到直接使用vue-cli-service的内建命令模块实现build会将其原有的命令进行覆盖，这种操作不太理想，所以改用了另外一种实现方式:使用 commander 实现注册命令。

注册命令的第二方式 —- Commander

定制自己的命令watch

demo github源码地址

主要实现代码如下：

demo具体步骤：

初始化一个项目
在根目录下创建一个script文件夹，在该文件夹目录下新建一个用于实现注册命令的js文件，我在这创建的文件名为commandar-watch.js

1 2	// 安装 Commander npm install Commander -D

// commandar-watch 具体实现代码
// 注：可同时注册多个命令

const program = require('commander')

program.version('0.1.0')
  .option('-k, --key [type]', 'key to build')

program
  .command('watch')
  .description('run the given remote command')
  .action(function(){
    console.log('watch 命令注册成功')

    /**
     * 用户传进来的 key 值
     * yarn 运行命令时，可通过 program.key 获取到用户传进来的 key 值
     * npm 运行命令时，需通过 process.env.npm_config_key 获取到用户传进来的 key 值
     */
    const key = program.key ? program.key : process.env.npm_config_key
    console.log(key)
})

program.parse(process.argv)

在package.json文件中scripts的watch中，使用node执行commandar-watch.js的watch命令
1
2
3
4
5
{
"scripts": {
"watch": "node ./script/commandar-watch.js watch",
},
}
在终端执行npm run watch命令，看到终端输出‘watch 命令注册成功’后，恭喜watch命令注册成功啦。当然，你也可以传入--key的值，如：npm run watch --key=用户传的key值，可见到终端输出‘用户传的key值’，证明已经获取到用户传的参数啦。

再谈谈项目中 build 和 watch 的不同点

其实这两个命令主要用到的配置还是Vue-cli 3提供的基本配置，在再次基础上针对不同页面特别设置一些配置，比如说针对某些页面需要进行css提取，还有不同页面设置不同的entry和output等等。而着这两个命令的主要区别就是Watch 字段、不同mode；对于是否压缩打包，我通过设置不同的环境模式从而设置文件是否需要打包（webpack 4提供了这个功能）；至于是否需要监听文件的改变功能的实现，我借鉴了vue-cli-service build命令的--watch实现方式。

vue-cli-service build –watch ，核心代码是获取webpack 配置，并将配置对象的watch字段的值设置为true。

注: vue-cli-service中的build命令--watch的实现源码地址

Public 文件夹

主要用来放置一些无需经过webpack处理的静态资源或模板等等。其目录下的内容会被直接拷贝到构建输出目录下
关于存在原因：index.html模板，动态引入图片，引入不兼容模块

实现源码

结语

针对这次分享的内容，虽然说我侧重分享了插件部分的内容，但是并不意味着vue-cli 3 内容只有这些，只是我这次开发中遇到比较多的模块就是service插件这一块，所以就特别提了一下，它还有其他的内容比如说ui那一块等等；

体会：
在开发过程中，当遇到，对api不熟悉，造成无法很好的运用好某些api的情况时，其实可以考虑去研究研究一下源码，会发现事情变得简单，其实在vue-cli 的官网里面也有提到配合源码去学习api，这才能真正灵活的使用对应的功能等等。
在这个项目里面，我就是在一边学习一边实现需求。还有，考虑问题要全方面的想，多测试一些页面。比如说npm与yarn在终端中的传参方式不一样，导致代码中获取的key值方式也不一样这个问题，就是得多测试才会发现。还有要多请教一些前辈，你会发现有时候经验对于开发方式和开发效率来说，真的很重要。

参考文章：

深入认识 vue-cli：能做的不仅仅是初始化 vue 工程

拓展文章：

vue-cli 3学习知识点总结

vue.config.js 基本配置

vue-cli 插件

阅读全文

vue-cli 3 知识点整理

更新于 2019-09-20

BuildTool

关于指南

笔记简单整理如下：

一、介绍

二、安装

前提：

（1）node 版本要求：8.9或更高版本

（2）如若已安装旧版本vue-cli ，则将其卸载，重新安装@vue-cli

安装命令：


// 局部安装
npm i @vue/cli  或 yarn add @vue/cli

//全局安装
npm i -g @vue/cli  或 yarn add -g @vue/cli

检查是否安装成功 (全局安装时可用以下命令检查)

1	vue --version

三、基础

搭建基本项目

（1）快速构建命令 vue serve 和 vue build

前提：全局安装 @vue/cli-service-global 依赖

1	npm install -g @vue/cli-service-global

（2）vue serve 命令的选项

Usage: serve [options] [entry]

在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器

Options:
  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息

（3）vue build 命令选项：

Usage: build [options] [entry]

在生产环境模式下零配置构建一个 .js 或 .vue 文件

Options:

  -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值：app)
  -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值：入口文件名)
  -d, --dest <dir>       输出目录 (默认值：dist)
  -h, --help             输出用法信息

（4）快速创建一个项目命令

1	vue create

插件和preset

插件的注册与声明
Preset
一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们。

CLI服务

（1）vue-cli-service serve 启动一个开发服务器并附带开箱即用的模块热加载
（可通过 devServer 配置开发服务器）

 用法：vue-cli-service serve [options] [entry]

选项：
  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)

（2）vue-cli-service build

（在输出目录产生一个生产环境的包，自动进行代码压缩，vendor chunk splitting，内联chunk manifest 在 HTML 里。）

用法：vue-cli-service build [options] [entry|pattern]

选项：
  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

（3）vue-cli-service inspect

（审查 vue-cli 项目的 webpack 配置）

用法：vue-cli-service inspect [options] [...paths]

选项：
  --mode    指定环境模式 (默认值：development)

查看所有可用命令

1	npx vue-cli-service help

缓存和并行处理

（1）cache-loader：会默认为 Vue/Babel/TypeScript 编译开启。文件会缓存在 node_modules/.cache 中

注：如果你遇到了编译方面的问题，记得先删掉缓存目录之后再试试看。

（2）thread-loader

git Hook

四、开发

浏览器兼容性

（1）browserslist（指定了项目的目标浏览器的范围）

（2）ployfill

（3）现代模式

HTML 和静态资源

（1）index 文件

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入

不生成index:

// vue.config.js
module.exports = {
  // 去掉文件名中的 hash
  filenameHashing: false,
  // 删除 HTML 相关的 webpack 插件
  chainWebpack: config => {
    config.plugins.delete('html')
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  }
}

（2）插值

（3）preload
指定页面加载后很快会被用到的资源，通过 @vue/preload-webpack-plugin 进行注入

（4）Prefetch
是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。通过 @vue/preload-webpack-plugin 进行注入

（5）构建一个多页应用

（6）处理静态资源

静态资源处理方式

在 JavaScript 导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

从相对路径导入

使用相对路径引入资源，url 都会被解析成一个依赖模块
如：url(./image.png) 会被翻译为 require(‘./image.png’)
通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的文件路径，再用 url-loader 将小于 4kb （可调整为其他值）的资源内联，以减少 HTTP 请求的数量

URL转换规则

url 为绝对路径，路径被保留
url 以 . 开头，按照从相对路径导入方式进行解析
url 以 ~ 开头，任何内容都按照模块请求被解析，可引入 node 模块资源
url 以 @ 开头，任何内容都按照模块请求被解析，它的用处在于 Vue CLI 默认会设置一个指向 /src 的别名 @。(仅作用于模版中)

public 文件夹（不推荐，只是应急手段）

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
通过webpack 处理的好处:

脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。

最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本

何时使用 public 文件夹

你需要在构建输出中指定一个文件的名字（定义构建模板）。
你有上千个图片，需要动态引用它们的路径。
有些库可能和 webpack 不兼容，只能将其用一个独立的 <script> 标签引入。

css 相关

（1）引用静态资源
所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用，并将这些引用作为模块请求来处理

（2）预处理器

（3）自动化导入

如自动化导入文件(用于颜色、变量、mixin……)，你可以使用style-resources-loader

（4）postCss

（5）css Modules

通过< style module > 以开箱即用的方式在.vue文件里面使用
JavaScript 中作为 CSS Modules 导入CSS 或其它预处理文件，该文件应该以 .module.(css/|less/|sass/|scss/|styl)结尾(设置 vue.config.js 中的 css.modules为 true：导入文件时，文件名无需带上.module; 同时，即使构建时，import的文件为css文件，但也会将其当做 css Modules 来打包)
关于 css Modules 模块的类名

默认的css Modules 模块的类名

自定义生成的css Modules 模块的类名

// 可以通过 vue.config.js中的 css.loaderOptions.css 选项来实现
// 所有的 css-loader 选项在这里都是支持的，例如 localIdentName 和 camelCase
// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      }
    }
  }
}

向预处理器 Loader 传递选项

提示: 这样做比使用 chainWebpack 手动指定 loader 更推荐，因为这些选项需要应用在使用了相应 loader 的多个地方。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/variables.scss";`
      }
    }
  }
}

爬虫和标注系统就是利用这个方式实现scss文件全局使用

webpack 相关

（1）简单的配置方式

调整webpack 配置的最简单的方式是修改vue.config.js中的 configureWebpack选项提供一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

警告: 有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起

// 基于环境有条件的配置行为
// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

（2）链式操作

（高级，利用 webpack-chain 在 vue.config.js 中的 chainWebpack进行相应修改，配合vue inspect比较方便查看对应操作方式）

修改Loader选项

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
  }
}

添加新的 Loader
替换一个规则里面的 Loader
修改插件选项

补充：
webpack-chain 的 API

webpack-chain阅读一些源码

审查项目的webpack 配置（该命令会将解析出来的 webpack 配置、包括链式访问规则和插件的提示打印到 stdout。）

// 将其输出重定向到一个文件(被格式化，非有效的webpack 配置文件)以便进行查阅
vue inspect > output.js

// 只审查第一条规则
vue inspect module.rules.0

// 指向一个规则或插件的名字
vue inspect --rule vue
vue inspect --plugin html

// 列出所有规则和插件的名字
vue inspect --rules
vue inspect --plugins

以一个文件的方式使用解析好的配置

环境变量和模式

（1）.env

.env 文件知识点补充：

该文件中定义的变量，构建过程中，会被注入到process.env中，成为该对象的一个属性；但是针对于浏览器这里没有node环境情况下，在 process.env中的字段会被当做是一个全局变量，因此，在所有的页面中都可以获取到该字段的值

// 可以替换项目根目录中的下列文件来指定环境变量
// 被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用
.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

补充：

优先级：特定模式环境文件(如：.env.production) > 一般环境文件（如：.env）
优先级：Vue CLI 启动时已经存在的环境变量 > .env 文件。
如果在环境中有默认的 NODE_ENV，你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV。

（2）模式

development
production
test

（3）在客户端侧代码中使用环境变量（在代码中始终可用的三种变量）

只有以 VUE_APP_开头的变量会被webpack.DefinePlugin 静态嵌入到客户端侧的包中
NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

补充：所有解析出来的环境变量都可以在public/index.html中以HTML插值中介绍的方式使用。

（4）只有在本地有效的变量

文件名为：.env.local

可在此基础上指定模式： .env.development.local

6.构建目标

（1）应用

（2）库

（3）Web Component 组件

部署

其他总结：

vue.config.js基本配置

vue-cli 插件

阅读全文

(转)npm编译环境运行命令时的几种传参方法

更新于 2019-10-13

(转)编译环境中的几种传参方法

原文：编译环境中的几种传参方法

在package中获取参数

1. package.json中通过$1获取参数

1	"script": { "dev": "echo $1" // ${1} 也可以}

2. cli中运行

1	npm run dev -- hello

3. cli输出结果

hello

修改process.argv

1. package.json中配置

1	"script": { "dev": "webpack"}

2. webpack中获取参数

1	console.log('自定义参数：', process.argv);

3. cli中运行

1	npm run dev -- hello

4. cli输出结果

1	自定义参数：PROJECTDIR: [ '/usr/local/bin/node', '/Users/xxx/Desktop/git/webpack-practise/node_modules/.bin/webpack', ‘hello' ]

修改process.env方法1，package.json配置如上

1. webpack中获取参数

1	console.log('自定义参数：', process.env.test);

2. cli中运行

1	test=hello npm run dev

3. cli输出结果

1	自定义参数：hello

修改process.env方法2，package.json配置如上（目前采用这个方法）

1. webpack中获取参数

1	console.log('自定义参数：', process.env.npm_config_test);

2. cli中运行

1	npm run dev --test=hello

3. cli输出结果

1	自定义参数：hello

阅读全文

关于position取值以及sticky实现粘性布局

更新于 2019-11-14

css

position | sticky

position可取值：

static：常规流，top，right，bottom，left，z-index属性无效
relative：table-*-group、table-row、table-column、table-cell、table-caption元素无效
absolute：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并
/* 全局值 */
inherit
initial
unset
/* 新增 */
sticky(拥有-webkit- 内核浏览器才支持)：实现粘性布局

position: sticky

元素先按照正常流定位，当元素滚动到设定的阈值时，元素的显示效果会变成position:fixed效果相同

设置中间元素如下：

position: sticky;
top: 20px; //元素滚动到距离顶部为20px时，停止滚动（效果类似position: fixed; top: 20px;）

兼容性：

生效规则：

1、需设置top/rigth/bottom/left中的一个值，粘性定位才生效，否则效过与相对定位相同
2、被设置为position: sticky的元素的任意父节点的overflow须是visible:
如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。
如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。
3、元素表现为：relative还是fixed是有设定的阈值决定，比如说上面的top值

参考文章

阅读全文

js 事件流和事件处理程序（DOM 标准事件模型）

更新于 2019-09-20

一、基本概念

事件：文档或浏览器窗口中发生特定交互瞬间
事件流：描述从浏览器中接收事件的顺序

IE的事件流：事件冒泡流
Netscape Communicator的事件流：事件捕获流

事件冒泡：从触发事件的最具体元素开始，逐级向上传播到document对象

注：不是所有事件都支持冒泡事件；比如：鼠标事件（mouserleave, mouseenter等），焦点事件（blur, focus等），UI事件（load, unload, abort, error, scroll, resize等）
阻止事件冒泡的方式：（1）event.stopPropagation(); （2）低版本IE取消冒泡：event.cancelBubble(); （3）return false；
注：第三种阻止方式，在取消事件冒泡事件的同时，也阻止了浏览器默认事件（event.preventDefault(); 低版本IE:window.event.returnValue = false; ）

事件捕获：从document对象开始，事件沿DOM树逐级向下传播到具体目标

其用意：在事件到达预订目标事件之前捕获它

DOM事件流

包括三个阶段：事件捕获阶段->处于目标阶段（事件源target）->事件冒泡阶段
注： event.target 取到触发事件的源头；event.currentTarget 取到当前绑定事件的元素；

事件处理程序：即响应某个事件的函数

二、四种绑定事件方法：

HTML事件处理程序：即直接在html标签上绑定以”on”开头的事件

eg:

1	<div id = "" onclick = "function() {}"></div>

缺点：

存在时差问题：有可能要调用的函数还没有加载完，用户就触发事件，从而导致错误

js与html代码紧密耦合：修改代码时很麻烦

DOM0级事件处理程序：取得要操作的对象的引用，直接绑定on事件

eg:

1
2
3

obj.onclick = function() {
    //处理内容
}

注：删除事件直接将处理事件的值设置为null; obj.onclick=null;

DOM2事件处理程序：使用addEventListener()进行事件监听

该方法接受的参数：要处理的事件名(不带on开头)、作为事件处理程序的函数和一个布尔值

布尔值表示：

true:表示在事件捕获阶段调用事件处理程序；

false:表示在事件冒泡阶段调用事件处理程序；

eg:

1
2
3

obj.addEventListener("click", function() {
    //处理内容
}, false);

优势：可以添加多个事件处理程序，事件触发顺序从上往下执行

删除事件：使用removeEventListener(), 传入与添加时相同的参数

注意：匿名函数无法移除

IE事件处理程序：

attachEvent()添加、detachEvent()移除

参数：事件处理程序名称（带on开头）和事件处理程序函数

eg:

1
2
3

obj.attachEvent("onclick", function() {
    //处理内容
});

与DOM0级方法的区别：this的作用域不一样

在DOM0中：事件处理程序会在其所属元素的作用域内运行

在attachEvent()方法内：事件处理程序在全局作用域运行，this等于window

当绑定多个事件时，事件触发顺序从下往上执行

总结：

跨浏览器的事件处理程序，为保证处理事件的代码在不同浏览器下一致执行，只需关注冒泡阶段，可通过封装一个对象，进行方法调用。

参考书籍：

《javaScript 高级程序设计》

阅读全文

js 内置对象之数组Array

更新于 2019-09-20

js | 数组

前言：

前天刚做完一个公司的校招笔试题，其中有考到数组的基础方法，故今天在此对其做一番总结，从而温故而知新。

一、数组的创建方式

1. 通过’[]’


（1）var arr1 = []; //创建空数组

（2）var arr2 = [1, 2, 3]; //直接创建一个包含三个元素分别为1, 2, 3的数组

2. 通过new Array()


（1）var arr3 = new Array(); //创建空数组

（2）var arr4 = new Array(); //创建长度为10的数组

（3）var arr5 = new Array(1, 1, 2, 3, 4); //创建数组并初始化值为1，1，2，3，4

（4）var arr6 = new Array([3]); //创建数组，第一个值初始化为3

（5）var arr7 = new Array([1, 2], [3, 4]); //创建一个二维数组，并初始化值为: [1, 2], [3, 4]

注：两种创建方式的区别

通过’[]’是直接告诉处理器创建一个新的运行时数组，无需进行其他处理

通过new Array()是让解释器直接查找执行上下文，找到构造函数，并调用它，从而生成数组对象。

推荐使用’[]’

二、Array 对象属性

1. constructor: 返回对创建此对象的数组函数的引用

2. length: 设置或返回元素的数目

3. prototype: 使有能力向对象添加属性和方法

三、Array 对象方法

分两类：根据是否对原数组产生影响

1. 不改变原数组本身


（1）concat() : 连接两个或更多的数组，并返回结果

（2）join(): 把数组所有元素通过join传入的参数进行连接，结果返回一个元素拼接起来的字符串

（3）slice(): 从某个已有的数组返回选定的元素

 语法：array.slice(start, end)

//start（必需），表示从何处开始选取，为负数时，表示从尾部开始算

//end（可选），规定从何处结束选取，不填则表示一直选取到数组尾部
（4）toSource(): 返回该对象的源代码

兼容性：只有Gecko核心的浏览器才支持（比如 Firefox）, 故IE/Safari/Chrome/Opera均不支持

（5）toString(): 把数组转换成字符串，并返回结果

var b = [1,12345678]

b.toString()； //"1,12345678"
（6）toLocaleString(): 把数组转换为本地字符串，并返回结果

var b = [1,12345678]

b.toLocaleString()； //"1,12,345,678"
（7）valueOf(): 返回数组对象的原始值

2. 改变原数组本身


（1）pop(): 删除并返回数组的最后一个元素

（2）push(): 向数组的末尾添加一个或多个元素，并返回数组新的长度

（3）reverse(): 颠倒(原)数组中元素的顺序

（4）shift(): 删除并返回数组的第一个元素

（5）unshift(): 向数组开头添加一个或更多元素，并返回新的长度

（6）sort(): 对数组的元素进行排序

语法：array.sort(sortby) //sortby（可选），规定排序顺序，须是函数
（7）splice(): 删除元素，并向数组添加新元素，然后返回被删除的元素

语法： array.splice(index, number, item1, item2, ..., itemX)

//index（必需），整数，规定添加/删除项目的位置

//number（必需），要删除的项目数，为0则不删除

//item（可选），向数组添加的新项目

参考链接：

http://www.w3school.com.cn/jsref/jsref_obj_array.asp

阅读全文

css实现垂直居中的几种方式（布局常用）

更新于 2019-09-20

css

css | layout

前提：

html模板：


<div class="parent">

<div class="content">内容垂直居中</div>

</div>

声明：以下示例，主要实现垂直居中的样式代码为加粗的部分

一、对单行元素进行垂直居中时

可设置该行内元素的父元素的height与line-heigth的值相等，让行内元素垂直居中
针对行内元素，可通过设置vertical-align: middle;以及line-height进行垂直居中

二、对文本进行垂直居中

针对文本，通过display:flex;配合align-items和justify-content实现文本居中


.content{

  display: flex;

  align-items: center;

  justify-content: center;

}

三、对已知高度块级元素进行垂直居中

绝对定位，配合top:50%和负margin-top(元素高度一半)进行垂直居中


.content{

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -10em; /* 为元素height/2 */

  margin-left: -10em;

  width: 20em;

  height: 20em;

  background-color: aqua;

}

绝对定位，配合top:0;bottom:0;和margin:auto进行垂直居中

.content{

  position: absolute;

  margin：auto；

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 200px; /*要求指明元素高度*/

  background-color: aqua;

}

设置position:absolute;和calc()函数实现垂直居中


.content{

  position: absolute;

  top:calc(50% - 10em); /*calc(50% - 元素本身高度一半)*/

  left: calc(50% - 20em); /*注意使用时减号间有空格*/

  width: 40em;

  height: 20em;

  background-color: aqua;

}

使用浮动float实现元素垂直居中

原理：通过在要进行垂直居中的元素a前面添加一个无内容的元素，并将该无内容元素的高设置为50%，在利用clear:botn清除浮动，则元素a相对于父元素来说是垂直居中。

html如下：

<div class="parent">

  <div class="float"></div>

  <div class="content">

    <div><span>内容垂直居中内容垂直居中内容容垂居中</span></div>

  </div>

</div>

css如下：


.parent{

  height: 500px;

  background-color: red;

}
/**添加的辅助元素*/
.float{

  height: 50%;

}

.content{

  clear: both;

  background-color: aqua;

}

四、对未知高度块级元素进行垂直居中

设置position：absolute；和transform:traslate(x,y)实现水平垂直居中

.content{

  position: absolute;

  margin：auto；

  top: 50%;

  left: 50%;

  transform:translate(-50%,-50%); /*针对元素本身向左以及向上移动50%*/

  background-color: aqua;

}

居于视口单位的解决方案：

可通过使用margin-top: 50vh;配合transform:translateY(-50%);实现视口居中


.content{

  width: 18em;

  margin-top: 50vh; /*50vh表示视口高度的50%*/

  transform: translateY(-50%); /*相对元素自身向上移动50%*/

  background-color: aqua;

}

通过display:table-cell和vertical-align:middle;实现垂直居中

.parent{

  display: table;

  width: 50px; /*建议设置宽高，以便于查看效果*/

  height: 500px;

}

.content{

  display: table-cell;

  vertical-align: middle;

  background-color: aqua;

}

基于flex的解决方案：

.parent{

  display: flex;

  background-color: beige;

}

.content{

  margin: auto; /*自动相对于父元素水平垂直居中*/

  background-color: aqua;

}

阅读全文

左右布局，左边定宽且右边自适应（项目中常用到）

更新于 2019-09-20

css

css | layout

前提：html结构如下：


<div class="parent">

  <div class="left">

    我是左边

  </div>

  <div class="right">

    我是右边

  </div>

</div>

方法一：使用float配合overflow:hidden


.left{

  width: 100px;

  float: left;

  background-color: aqua;

}

.right{

  overflow: hidden;

  background-color: brown;

}

原理：

元素如果不设置宽度，则默认继承父元素宽度

overflow:hidden; 清除左边元素浮动

右边元素未设置宽度，则宽度=父元素宽度-左边元素宽度；

BFC原理：因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。

方法二：使用float配合margin-left


.left{

  width: 100px;

  float: left;

  background-color: aqua;

}

.right{

  margin-left: 100px; /*等于左边的宽度*/

  background-color: brown;

}

方法三：使用float配合width:100%


.left{

  float:left;

  background-color: aqua;

}

.right{

  width:100%;

  background-color: brown;

}

方法四：float+calc()属性

.left{

  float: left; /*左边左浮动*/

  width: 100px;

  background-color: aqua;

}

.right{

  float: right; /*右边右浮动*/

  width: calc(100% - 100px); /*100%-左边块的宽度*/

  background-color: brown;

}

方法五：绝对定位

.left{

  position: absolute;

  left: 0;

  width: 100px;

  background-color: aqua;

}

.right{

  position: absolute;

  left: 100px; /*左边的宽度值*/

  width: 100%;

  background-color: brown;

}

方法六：table布局

.parent{

  display: table;

  width: 100%;

}

.left{

  display: table-cell;

  width: 100px;

  background-color: aqua;

}

.right{

  display: table-cell;

  background-color: brown;

}

原理：display:table-cell具有以下特性:

text-algin,vertical-algin等对齐属性起作用，margin以及宽高百分比值不起作用
会生成虚拟的table,tr包裹住自己，当存在相邻兄弟元素也被设置为table-cell时，则生成虚拟table,tr将其与兄弟元素包裹在一起，并一行等高显示
多个table-cell属性的元素会占忙被设置成display:table的元素的宽度；

当其中一个元素已设置宽度时，其他元素（被设为table-cell）会占满剩下的宽度;

如果只有一个table-cell元素，就算设置了宽度也会占满table元素的宽度;

对设置了float、absolute的元素不起作用。且IE6、7不支持

方法七：父容器设置 display：flex；right部分设置 flex：1

.parent{

  display: flex;

}

.right{

  flex: 1;

  background-color: brown;

}

参考：

https://www.jianshu.com/p/01747a08bcbf

https://blog.csdn.net/shuidinaozhongyan/article/details/73274651

阅读全文

css实现水平居中的几种方式

更新于 2019-09-20

css

css | layout

一、对于行内元素：

1	text-align:center;

二、对于确定宽度的块级元素：

margin和width实现水平居中

常用(前提：已设置width值)：margin-left:auto; margin-right:auto;

绝对定位和margin-left: -(宽度值/2)实现水平居中

固定宽度块级元素水平居中，通过使用绝对定位，以及设置元素margin-left为其宽度的一半

.content{

  width: 200px;

  position: absolute;

  left: 50%;

  margin-left: -100px; // 该元素宽度的一半，即100px

  background-color: aqua;

}

position:absolute + （left=0+top=0+right=0+bottom=0） + margin:auto

.content{

  position: absolute;

  width: 200px;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  margin: auto;

}

三、对于未知宽度的块级元素：

table标签配合margin左右auto实现水平居中

使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto

inline-block实现水平居中方法

display：inline-block;（或display:inline）和text-align:center;实现水平居中

存在问题：需额外处理inline-block的浏览器兼容性（解决inline-block元素的空白间距）

绝对定位实现水平居中

绝对定位+transform，translateX可以移动本省元素的50%

.content{

  position: absolute;

  left: 50%;

  transform: translateX(-50%); /* 移动元素本身50% */

  background: aqua;

}

相对定位实现水平居中

用float或者display把父元素变成行内块状元素

.contentParent{

  display: inline-block; /* 把父元素转化为行内块状元素 */

  /*float: left; 把父元素转化为行内块状元素 */

  position: relative;

  left: 50%;

}

/*目标元素*/

.content{

  position: relative;

  right: 50%;

  background-color:aqua;

}

CSS3的flex实现水平居中方法，法一

.contentParent{

  display: flex;

  flex-direction: column;

}

.content{

  align-self:center;

}

CSS3的flex实现水平居中方法，法二

.contentParent{

  display: flex;

}

.content{

  margin: auto;

}

CSS3的fit-content配合左右margin为auto实现水平居中方法

.content{

  width: fit-content;

  margin-left: auto;

  margin-right: auto;

}

参考文章：

https://www.w3cplus.com/css/elements-horizontally-center-with-css.html

http://blog.sina.com.cn/s/blog_c112a2980102xt3y.html

阅读全文

前言

概括：

接下来谈一谈 Vue.config.js

插件

Vue-cli-service

需求场景

注册命令的第一种方式 —- 使用 vue-cli-service 插件

注册命令的第二方式 —- Commander

再谈谈项目中 build 和 watch 的不同点

Public 文件夹

推荐使用 inspect

结语

关于指南

一、介绍

二、安装

三、基础

四、开发

(转)编译环境中的几种传参方法

在package中获取参数

1. package.json中通过$1获取参数

2. cli中运行

3. cli输出结果

修改process.argv

1. package.json中配置

2. webpack中获取参数

3. cli中运行

4. cli输出结果

修改process.env方法1，package.json配置如上

1. webpack中获取参数

2. cli中运行

3. cli输出结果

修改process.env方法2，package.json配置如上（目前采用这个方法）

1. webpack中获取参数

2. cli中运行

3. cli输出结果

position可取值：

position: sticky

设置中间元素如下：

生效规则：

参考文章

一、基本概念

二、 四种绑定事件方法：

总结：

前言：

一、数组的创建方式

1. 通过’[]’

2. 通过new Array()

二、Array 对象属性

1. constructor: 返回对创建此对象的数组函数的引用

2. length: 设置或返回元素的数目

3. prototype: 使有能力向对象添加属性和方法

三、Array 对象方法

1. 不改变原数组本身

2. 改变原数组本身

参考链接：

前提：

一、对单行元素进行垂直居中时

二、对文本进行垂直居中

三、对已知高度块级元素进行垂直居中

四、对未知高度块级元素进行垂直居中

前提：html结构如下：

方法一：使用float配合overflow:hidden

方法二：使用float配合margin-left

方法三：使用float配合width:100%

方法四：float+calc()属性

方法五：绝对定位

方法六：table布局

方法七：父容器设置 display：flex；right部分设置 flex：1

参考：

一、对于行内元素：

二、对于确定宽度的块级元素：

三、对于未知宽度的块级元素：

参考文章：

接下来谈一谈 `Vue.config.js`

二、四种绑定事件方法：