在 Vue.js 应用程序中自定义 Poi

使用 Poi 设置 Vue.js 应用程序是一个非常容易和愉快的体验,有很多魔法正在发生。

易,易,易,易,易,易,易,易,易,易,易,易,易,易,易,易。

配置文件

您可以创建一个 poi.config.js 与 package.json 相同的级别,而 Poi 将通过惯例来理解它。

配置文件的结构与Webpack的类似,一些选项直接是Webpack插件的选项。

让我们看看我们可以做的一些常见定制。

HTML 输出

Poi 使用 html-webpack-plugin在帽子下方. 如果你查看默认模板,你会看到标题和描述是可配置的,所以你可以定制这些:

1[label poi.config.js]
2module.exports = {
3  html: {
4    title: 'Coolgator',
5    description: 'Cool and hungry alligator'
6  }
7};

您可以使用 package.json 的数据,这是一个常见的模式:

1[label poi.config.js]
2const pkg = require('./package.json');
3
4module.exports = {
5  html: {
6    title: 'Coolgator',
7    description: pkg.description
8  }
9};

但是,默认模板的定制非常有限,但不要担心,您可以使用自己的模板。创建一个 index.ejs 与 poi.config.js 文件相同的级别,让我们添加一个列表的 <icon>s:

1[label index.ejs]
2<head>
3...
4  <% htmlWebpackPlugin.options.icons.forEach(function(icon) { %>
5    <link rel="icon" sizes="icon.size" href="<%= icon.url %>">
6  <% }); %>
7...
8</head>

然后添加偶像的属性:

 1[label poi.config.js]
 2const pkg = require('./package.json');
 3
 4module.exports = {
 5  html: {
 6    title: 'Coolgator',
 7    description: pkg.description,
 8    icons: [
 9      {
10        size: '32x32',
11        url: 'http://via.placeholder.com/32x32'
12      }
13    ]
14  }
15};

文件结构

您可以自定义输出目录的名称:

1[label poi.config.js]
2module.exports = {
3  dist: 'buildy' // defaults to 'dist'
4};

在此,您可以使用 Webpack 的 [名称], [hash], [id], [ext] 以及所有特殊名称变量。

 1[label poi.config.js]
 2module.exports = {
 3  filename: {
 4    js: '[name].[hash:8].js',
 5    css: 'style.css',
 6    images: 'assets/images/[name].[ext]',
 7    fonts: 'assets/fonts/[name].[ext]',
 8    chunk: '[id].chunk.js'
 9  }
10};

使用staticFolder,您可以更改用于复制原始文件的文件夹名称:

1[label poi.config.js]
2module.exports = {
3  staticFolder: 'assets'
4};

Env 变量

在env属性中,我们可以定义我们的自定义变量:

1[label poi.config.js]
2module.exports = {
3  env: {
4    VERSION: '2.3'
5  }
6};

它们在代码中可用:

1const version = process.env.VERSION;

在寺庙里:

1<meta name="version" content="<%= htmlWebpackPlugin.options.env.VERSION %>" />

自动预防

使用autoprefixer来修改 PostCSS autoprefixer 插件的设置:

1[label poi.config.js]
2module.exports = {
3  autoprefixer: {
4    browsers: ['ie > 9', 'last 4 versions']
5  }
6};

使用 SCSS

要使用预处理器,您只需要安装加载器和可能的依赖。

例如,要导入.scss 文件,我们需要安装:

1$ npm install node-sass sass-loader --save-dev

在 package.json 中配置

Poi 也可以通过使用项目的 package.json 文件中的poi属性来定制:

1[label package.json]
2{
3  "poi": {
4    "dist": "buildy",
5    "staticFolder": "assets"
6  }
7  ...
8}

包装上

Poi 易于定制,同时防止您沉入配置的海洋. 在这里,我刚刚展示了最常见的。请随时前往 the docs 查看您可以做的其他事情。但记住,最好随时遵守公约。