Vue2.0配置postcss-px2rem

Posted 2023-03-28

参考技术A 1、安装node（自带npm包管理工具）

2、安装vue2.x脚手架：npm install vue-cli -g，控制台输入vue list查看是否安装成功

3、创建项目：vue init webpack my-project

4、安装postcss-px2rem：npm install postcss-px2rem

5、配置：找到文件build/vue-loader.config.js，添加如下：

const px2rem = require('postcss-px2rem')

// 配置remUnit

postcss: function()

        return [px2rem(remUnit: 75)];



6、在index.html中添加根font-size大小

<script>

      document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth ||  document.body.clientWidth) /10 + 'px';

      window.addEventListener("resize",()=>

      document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth ||  document.body.clientWidth) /10 + 'px';

    );

</script>

vue全局配置----小白基础篇

今天学习vue全局配置。希望帮助我们去了解vue的全局配置，快速开发。

Vue.config是vue的全局配置对象。包含Vue的所有全局属性：

1. silent:boolean(默认值：false)----取消Vue的所有的日志与警告 ；用法：Vue.config.silent = true
2. optionMergeStrategies：{[key:string]:Function}(默认是空对象{}）
   vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
   return child + 1
   }
    自定义合并策略的选项：接受第一个参数是父实例，第二个参数实例为子实例，第三个参数是Vue实例上下文
   const Profile = Vue.extend({
   _my_option: 1
   })
3.  

    devtools:boolean(默认是true,生成版为false) 用法：Vue.config.devtools = true 配置是否允许vue-devtools检查代码。开发版本默认为：true ,生产为false

4. errorHandler:Funtion （默认值是默认抛出错误）用法：
   Vue.config.errorHandler = function (err, vm) {
   // handle error
   }在指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可以获取错误信息和vue实例
5. ignoredELements:array<string>（默认是【】）用法：
   Vue.config.ignoredElements = [
   ‘my-custom-web-component‘, ‘another-web-component‘
   ]拼错组件名称，从而抛出一个关于Unknown custom element 
6. keyCodes:{[ key:string]:number | Array <number>} (默认是{}）用法：Vue.config.keyCodes = { v:86, F1:112,mediaPlayPause:179,up:[38,87]} 这个多半伴随v-on 自定义键位别名。

 

本文参考vue官网：vue