问心

vue的项目的环境的配置，对我们有用到的依赖以及配置的总结，方便以后使用：

如果配置了cnpm,把下面的npm换成cnpm会节约你好多时间。如果没有配置，那就这样配置一下：

具体的可以看这个淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

你也可以使用yarn

npm install -g yarn

如果还是觉得下载的比较慢，可以移步

安装sass的依赖包

npm install --save-dev sass-loader node-sass
//sass-loader依赖于node-sass
yarn add sass-loader node-sass --dev

1
2
3

在Vue style自己设置lang="scss"

<style lang="scss" scoped>
  @import './home.scss';
</style>

1
2
3

如果我们想引入全局的scss文件，可以vue.config.js中配置 这里是vue/cli4.0以上的配置

...
// css相关配置
css: {
  loaderOptions: {
    scss: {
      prependData: `@import "~@/styles/common.scss";`
        }
    }
},

1
2
3
4
5
6
7
8
9

或者安装less的依赖包

npm install less less-loader --save
//sass-loader依赖于node-sass
yarn add less less-loader --dev

1
2
3

在Vue style自己设置lang="less"

<style lang="less" scoped>
  @import './home.less';
</style>

1
2
3

如果我们想引入全局的less文件，可以vue.config.js中配置 这里是vue/cli4.0以上的配置

首先要使用插件 style-resources-loader

vue add style-resources-loader

选择less，然后在vue.config.js配置

const path = require('path');
...
// css相关配置
pluginOptions: {
  'style-resources-loader': {
    preProcessor: 'less',
    patterns: [
      path.resolve(__dirname, './src/style/common.less')
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11

如果是移动端我们可以安装lib-flexible 弹性盒布局具体的可以参考

安装lib-flexible

npm i lib-flexible --save
OR 
yarn add lib-flexible --dev

1
2
3

在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

在项目根目录的index.html 头部加入手机端适配的meta的代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个可以不加，flexible.js中有判断如果没有自己会自动添加，如果你加了可能会报一个这样的警告

安装px2rem-loader

npm install px2rem-loader

在实际的开发中，使用flexible插件时会自动把px转换成rem单位，这样我们在开发的时候直接就用px，px2rem-loader 直接帮我们转成rem

配置px2rem-loader

在vue-cli生成的webpack 配置中，vue-loader 的options和其他样式文件loader 最终都是由build/untils.js里的一个方法生成的。

我们只需要在cssLoader后面加上一个px2remLoader即可，px2rem-loader的remUnit 选项意思是1rem=多少像素，结合lib-flexible，我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10，

这里我们假设设计稿的宽度为750px ,并将px2remLoader 放进loaders数组中 vue.config.js

module.exports = {
  ...
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
            require('postcss-plugin-px2rem')({
                rootValue: 75, //换算基数
                selectorBlackList: ["van"], //要忽略并保留为px的选择器
                // 一般使用前两个就可以了

                // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                // propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                // propBlackList: [], //黑名单
                // exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果端UI框架内的px也转换成rem，请把此属性设为默认值
                // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动true。
                // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                // mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
                // minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
            }),
        ]
      }
    }
  },
  ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

或者在package.json配置

"postcss": {
  "plugins": {
    "autoprefixer": {},
    "postcss-pxtorem": {
      "rootValue": 75,
      "selectorBlackList": [
        "van"
      ],
      "propList": [
        "*"
      ]
    }
  }
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14

← v-modle一些理解 vuex模块化（module） →