19、Vue项目开发中的工具配置与测试实践

Vue项目开发中的工具配置与测试实践

1. PostCSS与Autoprefixer配置

在Vue项目中，我们无需单独安装PostCSS，因为vue-loader已经包含了它。不过，我们需要安装所需的插件。这里，我们使用 autoprefixer 包来让CSS代码兼容更多浏览器。
- 安装autoprefixer ：

npm i -D autoprefixer

• 添加配置文件 ：在项目根目录创建 postcss.config.js 文件，并配置如下：

module.exports = {
  plugins: [
    require('autoprefixer'),
  ],
}

例如，对于以下Stylus代码：

.store-cart-item
  user-select none

最终生成的CSS代码会自动添加浏览器前缀：

.store-item[data-v-1af8c5dc] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-use