vue的相关常用配置（sass 页面适配）

vue的相关常用配置（sass 页面适配）

1. 首先是vue中sass的使用

1.1 npm下载安装sass
    npm  install node-sass --save-dev
    npm install sass-loader --save-dev
1.2 使用的时候在style 加入语言指定lang就可以了 ，然后sass的写法就可以正常使用了
    如果是局部样式加入 scope 也可以如下
    <style lang="scss" scoped></style>

2. 然后我们需要进行页面适配

1、第一 引入lib-flexible
　　a.安装lib-flexible：npm i lib-flexible --save
　　b.在项目的入口main.js文件中引入lib-flexible  
　　import 'lib-flexible'
2、第二 使用postcss-px2rem自动将css中的px转换成rem（真的是大大提升了我们的工作效率）
　　安装postcss-px2rem ：npm install postcss-px2rem --save-dev
3、注释掉public index.html中的(不过好像不注释也可,大佬如果知道为什么要这一步能不能评论告诉我一下,谢谢)
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
4、项目文件根目录下新建一个vue.config.js文件,在其中加入配置
   module.exports={
    css: {
        loaderOptions: {
               css: {
                       // options here will be passed to css-loader
               },
         postcss: {
                    // options here will be passed to postcss-loader
                    plugins: [require('postcss-px2rem')({
                              remUnit: 75,//设计稿的 十分之一    即75px=1rem
                              "exclude": /node_modules/i
                    })]
               }
          }
      }
}

3. 按理说现在sass和页面适配都可以用了,我们来试试
   
   
   可以看到背景颜色生效,而且也能将px自动转换为rem

注意:当我们使用的时候发现需要适配大屏的时候会有个限制最大宽度540,这时候需要在node_modules中找到lib-flexible找到