应用程序预处理器和Webpack

构建系统使用Webpack创建您的网站/应用程序。 如果您不熟悉Webpack，请不要担心。 因为它开箱即用。您无需对其进行配置，因为它已经设置了一切。

但是，对于需要调整默认Webpack配置的情况，可以通过编辑/quasar.conf.js和配置build> extendWebpack(cfg) 方法或 (CLI v0.16.2+) build > chainWebpack (chain)来实现。

向它添加ESLint加载器的例子（假设你已经安装了它）：

build: {
  extendWebpack (cfg) {
    cfg.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /(node_modules|quasar)/
    })
  }
}

注意你不需要返回任何东西。 extendWebpack（cfg）的参数是由Quasar为您生成的Webpack配置对象。 假设你真的知道你在做什么，你可以添加/删除/替换任何东西。

chainWebpack()的等价quasar.conf：

build: {
  chainWebpack (chain) {
    chain.module.rule('eslint')
      .test(/\.(js|vue)$/)
      .enforce('pre')
      .exclude(/(node_modules|quasar)/)
      .use('eslint-loader')
        .loader('eslint-loader')
  }
}

现在我们来讨论一下Webpack加载器。 这可能是你做最多的补充的地方。

Webpack别名

Quasar带有一些预先配置好的Webpack别名。
您可以在项目中的任何位置使用它们，webpack将解析为正确的路径。 如果你想添加你自己的别名，请参考将自己的别名添加到Webpack部分。

别名 解析为
quasar node_modules/quasar-framework/dist/quasar.<configured-theme>.esm.js
src /src
components /src/components
layouts /src/layouts
pages /src/pages
assets /src/assets
plugins /src/plugins
variables /.quasar/variables.styl

另外，如果您配置为使用Vue编译器版本（build>vueCompiler:true）进行构建，那么vue$会解析为vue/dist/vue.esm.js。

Webpack装载器

构建系统使用Webpack，所以它依靠使用webpack加载器来处理不同类型的文件（js，css，styl，scss，json等）。 默认情况下，最常用的加载程序是默认提供的。

安装装载器：

我们举个例子吧。 你想能够导入.json文件。 Quasar提供开箱即用的json支持，所以您实际上不需要执行这些步骤，但为了演示如何添加加载程序，我们将假装Quasar不提供它。

所以，你需要一个装载机。 你搜索谷歌，看看你需要什么样的webpack loader。 在这种情况下，它是“json-loader”。 我们先安装它：

$ yarn add --dev json-loader
# 或:
$ npm install --save-dev json-loader

在安装新的加载器之后，我们想告诉Webpack使用它。 因此，我们编辑/quasar.conf.js并更改build.extendWebpack()为这个新的加载器添加条目到module/rules：

// quasar.conf
build: {
  extendWebpack (cfg) {
    cfg.module.rules.push({
      test: /\.json$/,
      loader: 'json-loader'
    })
  }
}

与chainWebpack()等效:

// quasar.conf
build: {
  chainWebpack (chain) {
    chain.module.rule('json')
      .test(/\.json$/)
      .use('json-loader')
        .loader('json-loader')
  }
}

你完成了。

SASS/SCSS支持

所以你希望能够编写SASS/SCSS形式的CSS代码。 你需要一个装载机。 我们首先安装它。 请注意，对于这种特殊情况，您还需要安装node-sass，因为sass-loader依赖于它（作为对等依赖）。

$ yarn add --dev sass-loader node-sass
# 或:
$ npm install --save-dev sass-loader node-sass

你完成了。 对于SCSS/SASS来说，这一切都是需要的。 你不需要进一步配置/quasar.conf.js。

安装完成后，您可以在*.vue组件中使用此预处理器(通过在<style>标签中使用lang属性)：

<style lang="scss">
/* 我们现在能写SASS了! */
</style>

关于SASS语法的说明：

PostCSS

*.vue文件（以及所有其他样式文件）中的样式默认通过PostCSS传送，因此您不需要使用特定的装载器。

默认情况下，PostCSS配置为使用Autoprefixer。看看`/.postcssrc.js’，你可以在那里调整它，如果你需要的话。

Pug

首先，您需要安装一些依赖项：

$ yarn add --dev pug pug-plain-loader
# 或:
$ npm install --save-dev pug pug-plain-loader

然后，您需要通过quasar.conf.js扩展webpack配置：

// quasar.conf.js
build: {
  extendWebpack (cfg) {
    cfg.module.rules.push({
      test: /\.pug$/,
      loader: 'pug-plain-loader'
    })
  }
}

与chainWebpack()等效:

// quasar.conf.js
build: {
  chainWebpack (chain) {
    chain.module.rule('pug')
      .test(/\.pug$/)
      .use('pug-plain-loader')
        .loader('pug-plain-loader')
  }
}

Coffeescript

如果您使用Coffeescript，则需要禁用ESLint或告诉ESLint哪些Vue组件正在使用Coffeescript。

请注意vue-loader使用lang='coffee'来标识使用Coffeescript的组件，但是lang='coffee'不能识别ESLint。幸运的是，ESLint（遵循传统的HTML）使用type=“xxx”来标识脚本的类型。只要<script>标签有javascript之外的type，ESLint就会将该脚本标记为非javascript，并跳过它。 Coffeescript的约定是使用type=“text/coffeescript”来标识自己。因此，在使用Coffeescript的Vue组件中，同时使用lang和type来避免ESLint警告：

<template>
  ...
</template>
<script lang="coffee" type="text/coffeescript">
  ...
</script>
API代理 Vuex存储