(一) 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("