Vue2的知识补充

最新推荐文章于 2023-12-26 12:24:45 发布

牛马小龙

最新推荐文章于 2023-12-26 12:24:45 发布

阅读量1.3k

点赞数

文章标签： vue.js 前端 javascript css

本文链接：https://blog.csdn.net/m0_65769258/article/details/123666938

版权

本文详细介绍了Vue2的环境配置、移动端适配、混入（mixin）、nextTick机制以及组件间的数据绑定。重点讨论了rem适配、mixin的使用场景、nextTick在获取DOM更新后的作用，同时也涵盖了computed和watch的区别以及父子组件的双向数据绑定。还解答了关于Vue组件数据、v-for key属性和v-if/v-for组合使用的常见问题。

摘要由CSDN通过智能技术生成

(一) vue如何配置配置环境#

在项目根目录新建两个文件 .env.development .env.production
```
# 开发环境  .env.development
VUE_APP_URL = http://localhost:3003
```
```
# 生产环境 .env.production
VUE_APP_URL = http://huruqing.cn:3003
```
配置好之后,在项目的其他的地方可以使用 process.env.VUE_APP_URL

若是我们使用的是 axios 请求数据,则可以配置 axios 的 baseURL

const service = axios.create({
  // 配置基本的路径
  baseURL: process.env.VUE_APP_URL,
  timeout: 5000
});

(二) 配置打包#

router要使用hash模式

vue.config.js的配置

module.exports = {
  lintOnSave: false,
  publicPath: '/fresh/huruqing/', // 基本路径
  outputDir: "fresh/huruqing", // 输出文件目录
  lintOnSave: false, // eslint 是否在保存时检查 
  assetsDir: 'static', // 配置js、css静态资源二级目录的位置   
}

(三) rem移动端适配#

(1) 元素单位有哪些#

px
百分比
vh和vw
em和rem

(2) rem和根标签字体大小的关系#

// rem例子 demo1.html
<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> 
        div{
            width: 1rem;
            height: 1rem;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

// rem例子 demo1.html
<!DOCTYPE html>
<html lang="en" style="font-size: 112px;">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> 
        div{
            width: 1rem;
            height: 1rem;
            background-color: green;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

(3) 移动端rem适配原理#

设置一个设备参考值(比如iPhone6)
其它设备跟据设备宽度等比缩放根标签字体大小

(4) vue项目配置rem#

安装插 npm i amfe-flexible --save
在main.js导入插件 import 'amfe-flexible'
px自动转rem
- 安装插件 npm i postcss-pxtorem@5.1.1
- 在/vue.config.js添加px2rem插件,把项目中的px转为rem

插件会修改html和body的字体大小, 而字体会继承, 所以要重新设置body的font-size为合适的字体大小

const pxtorem = require("postcss-pxtorem");

module.exports = {
  css: {
    loaderOptions: {
        // 后处理器配置
      postcss: {
        postcssOptions: {
          plugins: [
            // 把px转为rem
            pxtorem({
              rootValue: 37.5,
              propList: ["*"],
              unitPrecision: 4, //保留rem小数点多少位
            })
          ]
        } 
      }
    }
  }
};

(四) vue mixin是什么#

mixin 其实是一个对象，里面的结构大致跟普通组件的 script 里面的一样，有 data 属性，钩子函数和方法等混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

作用: 可以用来提取多个组件中的共同属性和方法等

01 组件内混入#

(1) 混入对象的生命周期先执行

(2) data里的状态若有重名, 取的是组件里的状态

// mixin.js
export default {
    data() {
        return {
            username: 'mixin-李四'
        }
    },
    created() {
        console.log('mixin-create')
    },

    methods: {
        test() {
            console.log('mixin-test');
        }
    }
}

// demo.vue
<template>
  <div>mixin对象</div>
</template>

<script>
import mixinObj from "./mixin";
export default {
  data() {
    return {
      username: "demo-张三",
    };
  },

  mixins: [mixinObj],

  created() {
    console.log("

最低0.47元/天解锁文章

牛马小龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2的知识补充

(一) vue如何配置配置环境# 在项目根目录新建两个文件.env.development.env.production # 开发环境 .env.developmentVUE_APP_URL = http://localhost:3003 # 生产环境 .env.productionVUE_APP_URL = http://huruqing.cn:3003 配置好之后,在项目的其他的地方可以使用 process.env.VUE_APP_URL 若是我们使用的是 ..
复制链接

扫一扫